fix(UIShell): eliminate duplicate main #4865
Conversation
This change eliminates duplicated `<main>` (one from UI shell story) and `<div role="main">` (one from the Storybook decorator for all stories) by telling the existence of former to the latter. This change also does: * Defines the color of non-focused state of skip-to-content element, given our a11y test tool cannot detect "shown for screen reader only" element * Make focus sentinel point to the main content for better navigation Refs carbon-design-system#3576.
|
Deploy preview for the-carbon-components ready! Built with commit 373b4ea https://deploy-preview-4865--the-carbon-components.netlify.com |
|
Deploy preview for carbon-elements ready! Built with commit 373b4ea |
|
Deploy preview for carbon-components-react ready! Built with commit 373b4ea https://deploy-preview-4865--carbon-components-react.netlify.com |
|
Hey @asudoh! I asked Sharon Sniders at IBMa about the violations reported in #3576 and she confirmed that the duplicate main violation and the color contrast violation from DAP do not need to be addressed since they come from our storybook environment or DAP mistakenly sensing SkipToContent when it's not visible! Only the "An element with WAI-ARIA role must be contained within a valid element" violation needs to be resolved and your other PR for UIShell (#4834) should fix that! 😄 |
|
I see thanks @abbeyhrt! |
This change eliminates duplicated
<main>(one from UI shell story) and<div role="main">(one from the Storybook decorator for all stories) by telling the existence of former to the latter.This change also does:
Refs #3576.
Changelog
Changed
<main>and<div role="main">Testing / Reviewing
Testing should make sure skip-to-content element is not broken. All other changes are of Storybook environment.