fix: breadcrumbs a11y (#996)

* fix: breadcrumbs a11y * fix: requested changes * fix: removed aria-current and extra spacing
gravity-ui · Sep 11, 2024 · 3a45bab · 3a45bab
1 parent ec3aa89
commit 3a45bab
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 21 deletions.
diff --git a/src/components/HeaderBreadcrumbs/HeaderBreadcrumbs.scss b/src/components/HeaderBreadcrumbs/HeaderBreadcrumbs.scss
@@ -6,38 +6,40 @@ $block: '.#{$ns}header-breadcrumbs';
 #{$block} {
     z-index: 11;
 
+    &__list {
+        @include reset-list-style();
+    }
+
     &__item {
+        @include text-size(body-2);
         display: inline-block;
     }
 
     &__text {
-        @include text-size(body-2);
         @include link();
-
         color: var(--g-color-text-secondary);
 
-        &:after {
-            content: '\a0/ ';
-            margin: 0 8px 0 6px;
-            color: var(--g-color-text-secondary);
-        }
-
         &:hover {
             color: var(--g-color-text-primary);
         }
     }
 
+    &__separator {
+        margin: 0 8px 0 6px;
+        color: var(--g-color-text-secondary);
+    }
+
     &_theme_dark {
         #{$block}__text {
             color: var(--g-color-text-light-secondary);
 
-            &:after {
-                color: var(--g-color-text-light-secondary);
-            }
-
             &:hover {
                 color: var(--g-color-text-light-primary);
             }
         }
+
+        #{$block}__separator {
+            color: var(--g-color-text-light-secondary);
+        }
     }
 }
diff --git a/src/components/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx b/src/components/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx
@@ -19,14 +19,19 @@ export default function HeaderBreadcrumbs(props: HeaderBreadCrumbsProps) {
     }, [analyticsEvents, handleAnalytics]);
 
     return (
-        <div className={b({theme}, className)} aria-label={i18n('label')}>
-            {items?.map((item) => (
-                <div className={b('item')} key={item.url}>
-                    <a href={item.url} className={b('text')} onClick={onClick}>
-                        {item.text}
-                    </a>
-                </div>
-            ))}
-        </div>
+        <nav className={b({theme}, className)} aria-label={i18n('label')}>
+            <ol className={b('list')}>
+                {items?.map(({url, text}) => (
+                    <li className={b('item')} key={url}>
+                        <a href={url} className={b('text')} onClick={onClick}>
+                            {text}
+                        </a>
+                        <span className={b('separator')} aria-hidden>
+                            /
+                        </span>
+                    </li>
+                ))}
+            </ol>
+        </nav>
     );
 }