A11y - Updated aria-labels for landmarks, added landmark for sidebar and plug skiplinks #5290
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
- by having aria-label as navigation VoiceOver read and seen the landmark as navigation navigation
…iceOver rotary menu
- This way a Volto site can add as many links needed to skip to the content area that matters
✅ Deploy Preview for volto ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
sneridagh
approved these changes
Oct 24, 2023
|
I'm not familiar with the pluggable component, so I can't help with that. However, the result of these changes efficiently solves the sidebar problem. I have a small question: When we are on the home edit page, without the sidebar, the landmarks guide shows 'sidebar empty complementary'. This way, it kinda helps show that the sidebar is empty and "doesn't work for nothing", but it's not quite accurate because it's not that there's no content in the sidebar, we don't have the sidebar. And the fact that it's clickable but doesn't take us anywhere can be confusing. However, I'm not sure if is something possible. |
Wagner3UB
approved these changes
Oct 24, 2023
sneridagh
added a commit
that referenced
this pull request
Oct 25, 2023
* main: (38 commits) A11y - Updated aria-labels for landmarks, added landmark for sidebar and plug skiplinks (#5290) (FIX): put padding so the text is not clipped (#5305) Add upgrade docs for users of `@kitconcept/volto-blocks-grid` addon (#5333) Add new multilingual acceptance tests with Seamless mode enabled (#5332) Fix reference to installation (#5328) Fix compare translations view (#5327) Release 17.2.0 Fix to return correct results when loading the search block from a URL (#5298) Allow multiple path criteria (#5317) Release 17.1.1 Added guard in `flattenScales` in edge case image is undefined (#5318) Normalize the shape of the image component `item` prop if it contains the serialized object after creation to match the one in the catalog. (#5266) Release 17.1.0 move the function to get the lead image sizes to the block configuration (#5289) Removed default aspect-ratio from Image component (#5278) Added support for `blocksConfig` configuration in the listing block (#5310) fix: logo and login storybook (#5286) Refactor Logo component to improve the conditional link to the root (#5280) Fix hierarchy of readme headings Clean up readme and install docs (#5287) ...
sneridagh
pushed a commit
that referenced
this pull request
Oct 27, 2023
…and plug skiplinks (#5290)
sneridagh
added a commit
that referenced
this pull request
Oct 30, 2023
* main: (283 commits) Release 17.3.0 Fix DatetimeWidget on FF, the button default if no type is set is sen… (#5343) Call applyBlockDefaults from addBlock/insertBlock, add initialValue() configuration option for blocks (#5320) A11y - Updated aria-labels for landmarks, added landmark for sidebar and plug skiplinks (#5290) (FIX): put padding so the text is not clipped (#5305) Add upgrade docs for users of `@kitconcept/volto-blocks-grid` addon (#5333) Add new multilingual acceptance tests with Seamless mode enabled (#5332) Fix reference to installation (#5328) Fix compare translations view (#5327) Release 17.2.0 Fix to return correct results when loading the search block from a URL (#5298) Allow multiple path criteria (#5317) Release 17.1.1 Added guard in `flattenScales` in edge case image is undefined (#5318) Normalize the shape of the image component `item` prop if it contains the serialized object after creation to match the one in the catalog. (#5266) Release 17.1.0 move the function to get the lead image sizes to the block configuration (#5289) Removed default aspect-ratio from Image component (#5278) Added support for `blocksConfig` configuration in the listing block (#5310) fix: logo and login storybook (#5286) ...
sneridagh
added a commit
that referenced
this pull request
Oct 30, 2023
* main: Release 17.3.0 Fix DatetimeWidget on FF, the button default if no type is set is sen… (#5343) Call applyBlockDefaults from addBlock/insertBlock, add initialValue() configuration option for blocks (#5320) A11y - Updated aria-labels for landmarks, added landmark for sidebar and plug skiplinks (#5290) (FIX): put padding so the text is not clipped (#5305) Add upgrade docs for users of `@kitconcept/volto-blocks-grid` addon (#5333) Add new multilingual acceptance tests with Seamless mode enabled (#5332) Fix reference to installation (#5328) Fix compare translations view (#5327) Release 17.2.0 Fix to return correct results when loading the search block from a URL (#5298) Allow multiple path criteria (#5317)
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.
This pull request addresses some of the issues mentioned in the following issue
#5268
"The second option brings us to another scenario. The CMS's main page doesn't have a sidebar, which means the skip links should also be different from the 'edit' page."
Added a pluggable section to skiplinks this way if you have other links that you want to skip to you can add extra links
in a Plug.
There is now a complementary role to the sidebar so you can easily focus on it using a screen reader with the landmark
section
Updated aria-label for Footer, Navigation, Sidebar and Skip links:
Everything is now Capitalized based on examples I've seen on other websites such as Apple.com or looking at the documentation examples of https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role
Here is a before and after landmark reading out of a Mac