Accessibility: No alt text on any icons #5905
Merged
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
… it's possible to hit it with when navigation using a keyboard. Also hiding the icon from screen readers and adding a new class called "__action" and make sure all styles match it so you can't visually tell the difference from before.
…t as a submit button all of the sudden
…his component further - Stuff for another PR really :)
…f "group" + group.id to ensure we can add a proper anchor reference to the area using the dropdown in the umb-editor-navigation-item directive
…readers - We don't want that :-) Also adding the :focus-within pseudo selector so any children that might be present will appear when tabbing through the UI
…e added for meaningful non-visual context
…ingful non-visual context for screen readers
…upported with the upcoming release of Edge 76
1 task
BatJan
changed the title
|
Wonderful work here, Jan. Thanks ever so much. We'll get in touch if we need you at all. Em |
# Conflicts: # src/Umbraco.Web.UI/Umbraco/config/lang/da.xml # src/Umbraco.Web.UI/Umbraco/config/lang/en.xml # src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
|
Love it! Corrected the |
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.
Prerequisites
This fixes issue 29, 108 and 122 from #5277
Description
This PR fixes some accessibility issues with the button's in the top right corner of the users section "Users" and "Groups".
The
<a>tag has been converted to a<button>and thetabindex="-1"has been removed, so it's possible to reach the options using the tab key. Furthermore the icon has been hidden from screen readers using the aria-hidden attribute.Also I've adjusted the styling to cater for the button now being used and so that it's possible to visually see that one has tabbed to one of the options.
This is a general change in the
<umb-editor-navigation-item>directive/component so it will also improve the accessibility wherever this is used like in the content section (content apps) and package section for instance 😃Edit 17/07/2019: Turns out issue 29 from the accessibility issue is somewhat related to this issue as well so I have fixed the issue mentioned in this issue as well.
This means the dropdown has got the following updates
Looking forward to receive some feedback one this 👍
Tabbing before
Tabbing after
Tabbing where a tab has a dropdown before
Tabbing where a tab has a dropdown after
