Accessibility: Grid filter drop down can't be accessed via keyboard #5963
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
…d add a sr-only text for the layout options
…ing look like it usually does
…ed using keyboard
…anslations for english and danish
… text saying "Active layout: Grid" for instance
…tabbed outside of
…s being tabbed outside of
|
Lovely work again, Jan. Thanks for putting the time aside. Keyboard accessibility is going to make such a difference. 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
|
Lovely work @BatJan ! Remember to remove those console logs next time! 😉 |
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 issues 62,82 and 87 from #5277
Description
This PR makes the grid selections keyboard accessible and it also improves accessibility for screen readers as well exposing visually hidden texts.
Before it was not possible to tab to the layout dropdown - Now it's possible to reach the layout dropdown toggle using the keyboard and tab through the options as well. When one tabs outside the options that appear the dropdown is closed due to the addition of a deep-blur directive, which is also mentioned in #5960 - It's cherry picked from this branch.
I have also expanded the language files with a "visuallyHiddenTexts" area where I hope we can agree to store text key's that serve pure non-visual purposes, which I think will make it easier to ensure translations into other languages etc. 😃
Looking forward to receive some feedback 👍
Content section before
Content section after
Media section before
Media section after
Recycle bin before
This is displaying the recycle bin from "Content" section but it's the same for the recycle bin in the "Media" section.
Recycle bin after
