UI: Add a 'main' role to the Main component for a11y #13827
Conversation
|
Thank you @adagar! @tooppaaa @jsomsanith can you please review? |
shilman
changed the title
| @@ -120,7 +120,7 @@ export const Main: FunctionComponent<{ isFullscreen: boolean; position: CSSPrope | |||
| position = undefined, | |||
| ...props | |||
| }) => ( | |||
| <Pane style={position} top {...props}> | |||
| <Pane style={position} top {...props} role="main"> | |||
There was a problem hiding this comment.
This is totally correct so I approved. But as a suggestion, a better way would be to render a ˋmain` element
Via styled component « as »
| <Pane style={position} top {...props} role="main"> | |
| <Pane style={position} top {...props} as="main"> |
The same can be applied to the sidebar to render a nav element
There was a problem hiding this comment.
Great suggestions! I'm hoping to use this one as an example, but then I'd like this approach to be spread so that most if not all major UI elements have landmarks set like this. I'll make the as update after testing to confirm axe picks it up correctly.
There was a problem hiding this comment.
@jsomsanith we're using emotion not styled components ... not sure that makes a difference? 🤷♂️
There was a problem hiding this comment.
Thanks for the precision. Emotion has the « as » props as well 🙂
There was a problem hiding this comment.
This took me a bit longer to get back to than expected, but from what I can tell, as can't be used for this type of element:
Type '{ children: Element; as: string; style: CSSProperties; top: true; }' is not assignable to type 'IntrinsicAttributes & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & Pick<...> & { ...; } & { ...; }'.
Property 'as' does not exist on type 'IntrinsicAttributes & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & Pick<...> & { ...; } & { ...; }'.ts(2322)
Issue: #13794
What I did
Added a
role="main"to the Main functional componentHow to test
Install and run the
axeplug-in in Chrome. Observe that the error regarding a main landmark is resolved after this PR is added.