Docs/a11y roundup (#1862)

* add aria label to W3C image

* add aria-hidden to React icon, label already says React

* Remove out of order headings, tab title should suffice

* add labels to nav landmarks. Remove aside landmark from section nav as is not needed

Co-authored-by: Heather Buchel <[email protected]>

Author: hbuchel

docs/src/components/ComponentStyleDisplay.tsx

@@ -26,13 +26,11 @@ export const ComponentStyleDisplay = ({ componentName }) => {
           <Tabs>
             <TabItem title="Target Classes">
               <View padding={`${tokens.space.medium} 0`}>
-                <Heading>Component Class Names</Heading>
                 <ComponentClassTable componentName={componentName} />
               </View>
             </TabItem>
             <TabItem title="CSS Variables">
               <View padding={`${tokens.space.medium} 0`}>
-                <Heading>Component CSS Variable Names</Heading>
                 <ComponentVariableTable
                   componentName={componentName.toLowerCase()}
                 />

docs/src/components/Layout/Header.tsx

@@ -57,7 +57,14 @@ const NavLink = ({
 };
 
 const Nav = (props) => (
-  <Flex as="nav" className="docs-nav" alignItems="center" gap="0" grow="1">
+  <Flex
+    as="nav"
+    aria-label="Main navigation"
+    className="docs-nav"
+    alignItems="center"
+    gap="0"
+    grow="1"
+  >
     <NavLink {...props} href="/getting-started/installation">
       Getting started
     </NavLink>
@@ -156,7 +163,7 @@ export const Header = ({ platform, colorMode, setColorMode }) => {
           </Flex>
 
           <Nav onClick={() => setExpanded(false)} />
-          <nav className="docs-sidebar-nav">
+          <nav aria-label="Section navigation" className="docs-sidebar-nav">
             <SecondaryNav onClick={() => setExpanded(false)} />
           </nav>
         </View>

docs/src/components/Layout/SecondaryNav.tsx

@@ -185,12 +185,12 @@ export const SecondaryNav = (props) => {
 
 export const Sidebar = () => {
   return (
-    <aside className="docs-sidebar">
+    <nav aria-label="Section navigation" className="docs-sidebar">
       <div className="docs-sidebar-inner">
-        <nav className="docs-sidebar-nav">
+        <div className="docs-sidebar-nav">
           <SecondaryNav />
-        </nav>
+        </div>
       </div>
-    </aside>
+    </nav>
   );
 };

docs/src/components/Layout/index.tsx

@@ -95,7 +95,7 @@ export default function Page({
                   isExternal
                 >
                   <Icon
-                    ariaLabel=""
+                    ariaLabel="W3C"
                     as={SiW3C}
                     marginInlineEnd={tokens.space.xs}
                   />
@@ -123,6 +123,7 @@ export default function Page({
                 >
                   <Icon
                     ariaLabel=""
+                    aria-hidden="true"
                     as={SiReact}
                     marginInlineEnd={tokens.space.xs}
                   />