fix(docs): improved sidebar voiceover support

Informasjonsforvaltning · Oct 3, 2024 · 8952c71 · 8952c71
1 parent db6a17a
commit 8952c71
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 9 deletions.
diff --git a/apps/docs/src/app/components/mdx-page/mdx-page.module.scss b/apps/docs/src/app/components/mdx-page/mdx-page.module.scss
@@ -75,7 +75,7 @@
                 display: none;
             }
 
-            aside {
+            .asideContent {
                 max-width: inherit;
                 margin: 0 -2rem;
                 padding: 1rem 2rem;

diff --git a/apps/docs/src/app/components/sidebar/index.tsx b/apps/docs/src/app/components/sidebar/index.tsx
@@ -77,6 +77,8 @@ const NestedList = ({ items, locale, pathname }: NestedListProps) => {
         <Button
             variant='tertiary'
             onClick={() => toggleOpen(itemPath)}
+            aria-labelledby={itemPath}
+            aria-pressed={isOpen}
         >
             {isOpen ? (
                 <ChevronUpIcon
@@ -97,6 +99,7 @@ const NestedList = ({ items, locale, pathname }: NestedListProps) => {
             {items.map((item) => {
                 const itemPathWithLocale = `/${locale}${item.path}`;
                 const isOpen = openItems[item.path] || false;
+                const hasChildren = item.children && item.children?.length > 0;
 
                 return (
                     <li
@@ -107,11 +110,17 @@ const NestedList = ({ items, locale, pathname }: NestedListProps) => {
                             {itemPathWithLocale === pathname ? (
                                 <strong>{item.title}</strong>
                             ) : (
-                                <a href={itemPathWithLocale}>{item.title}</a>
+                                <a
+                                    href={itemPathWithLocale}
+                                    aria-expanded={hasChildren ? isOpen : undefined }
+                                    id={item.path}
+                                >
+                                    {item.title}
+                                </a>
                             )}
-                            {item.children && item.children.length > 0 && getToggleButton(isOpen, item.path)}
+                            {hasChildren && getToggleButton(isOpen, item.path)}
                         </div>
-                        {isOpen && item.children && item.children?.length > 0 && (
+                        {isOpen && hasChildren && (
                             <NestedList
                                 items={item.children}
                                 locale={locale}

diff --git a/apps/docs/src/app/components/table-of-contents/index.tsx b/apps/docs/src/app/components/table-of-contents/index.tsx
@@ -31,7 +31,7 @@ type TableOfContentsProps = {
 };
 
 const TableOfContents = ({ headlines, dictionary }: TableOfContentsProps) => (
-    <nav
+    <aside
         className={styles.sidebar}
         aria-labelledby='tableOfContents.onThisPage'
     >
@@ -43,7 +43,7 @@ const TableOfContents = ({ headlines, dictionary }: TableOfContentsProps) => (
             {dictionary.tableOfContents.onThisPage}
         </Heading>
         <TocList headlines={headlines} />
-    </nav>
+    </aside>
 );
 
 export default TableOfContents;
diff --git a/libs/ui/src/lib/breadcrumbs/breadcrumbs.module.scss b/libs/ui/src/lib/breadcrumbs/breadcrumbs.module.scss
@@ -12,6 +12,10 @@
     a {
         color: var(--color-link);
     }
+
+    @media (max-width: 865px) {
+        margin: 0 0 1rem 0;
+    }
 }
 
 .crumb {

diff --git a/libs/ui/src/lib/header/index.tsx b/libs/ui/src/lib/header/index.tsx
@@ -110,8 +110,7 @@ const Header = ({
                             variant={showMenu ? 'secondary' : 'tertiary'}
                             onClick={() => setShowMenu(!showMenu)}
                             aria-label={dictionary.header.menuButton}
-                            aria-checked={showMenu}
-                            role='switch'
+                            aria-pressed={showMenu}
                         >
                             {showMenu ? (
                                 <XMarkIcon

diff --git a/libs/ui/src/lib/main-menu/index.tsx b/libs/ui/src/lib/main-menu/index.tsx
@@ -39,7 +39,7 @@ const MainMenu = ({ className, dictionary, baseUri }: MainMenuProps) => {
 
     return (
         <motion.nav
-            className={cn(styles.mainMenum, className)}
+            className={cn(styles.mainMenu, className)}
             variants={animations.links}
             initial='hidden'
             animate='show'