Skip to content
Submitted 7 months ago

Officelite coming soon. Responsive design + Accessibility

Ortaly•970
@ortalyarts
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Officelite coming soon site
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Features:

  • Vanilla Javascript + Native CSS + Semantic HTML5.
  • Responsive design + Mobile first approach.
  • Form validation.
  • Accessibility.
  • Customised accessible drop down select element.
  • Countdown to launch date (for presentation purpose: the date is set to 30 days in the future from the moment the user visits the website).
What specific areas of your project would you like help with?

Accessibility question: I've spotted a bug: if I navigate through the site with the keyboard (using tab key), after arriving to the select element I can't go further or go back to other inputs. So to move back or forth I have to use the mouse... Any suggestions on how to fix this issue are highly appreciated!

Any other suggestions for improvement are also very welcome :)

Community feedback

  • M•940
    @Dev-MV6Posted 7 months ago

    Hi there 👋

    The reason you are unable to change the tab focus when it reaches the drop-down menu is that you are you using the Event.preventDefault method in your handleKeyPress function which instructs the browser to not execute the default action for that event.

    In your case, you are telling the browser to prevent any default action when the keydown event is triggered on the target element, and the default action in this particular case is to change the tab focus, that's why when you press the Tab key, the focus gets stuck on the drop-down menu.

    Hope you find this helpful 👍

    Marked as helpful
    0
    Ortaly•970
    @ortalyartsPosted 7 months ago

    @Dev-MV6 Thank you! Yes, this was the problem. Solved :)

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord