Accessibility - Add focus styles and fix inputs #40
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Wrapped the navmenu icon in a button element and tweaked the styles so that a keyboard can be used to open the nav drawer. This also adds more semantic HTML, as an svg element should not be used as a button. Added the same hover styles for drawer items to their focus state as well.
Added the same hover styles for the links to their focus state. Also tweaked these components so that the buttons were hidden to assistive technologies, but the links retain their label via the aria-labelledby attribute. This fixes the issue of assistive technologies reading the same thing twice, while keeping the visual effect when clicking the button.
Added focus styles to the links for the projects section. I also removed the button element from the View All link as it was not needed. I instead added those styles to the anchor element itself and made some tweaks to get the same visual.
Added an outline to the arrow buttons on focus, as well as an opacity style on focus and hover. Also added a focus style to the slider dots to better tell when one has focus.
Used the same formatting as the Project styles by tweaking the View All link, removing the unneeded button element. Added an outline to each blog card to make it clear which one had focus.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I added focus styles to the interactive elements that I came across. For the most part, if you don't like the styles I chose it should be easy enough to go in and tweak them, as they're now set up to receive whatever focus styles you wish. Most I just adopted the same hover styles, others I added an outline.
I also explained some rationale for some commits if you care to look. I also have not tested the focus styles on each theme yet, so that could be worth doing/having someone else do.
The final thing I did was fix the input elements so that they are now linked to the proper label elements.