Improve accessibility for links in second navigation menu

Co-authored-by: Anna Vetcininova<anna.vetcininova@cloudogu.com> Committed-by: Anna Vetcininova<anna.vetcininova@cloudogu.com> Pushed-by: Anna Vetcininova<anna.vetcininova@cloudogu.com>
2026-01-18 05:22:10 +01:00 · 2024-11-25 15:52:10 +01:00
parent 531de24fa5
commit 18a0dda693
5 changed files with 54 additions and 19 deletions
--- a/gradle/changelog/add-access-to-links-in-secondary-navigation.yaml
+++ b/gradle/changelog/add-access-to-links-in-secondary-navigation.yaml
@@ -0,0 +1,2 @@
+- type: added
+  description: Access to links in secondary navigation
--- a/scm-ui/ui-components/src/snapshots/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/snapshots/storyshots.test.ts.snap
@@ -77753,18 +77753,21 @@ exports[`Storyshots Secondary Navigation Active when match 1`] = `
      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 ioXCUt menu"
    >
      <div>
-        <p
+        <button
          aria-label="secondaryNavigation.hideContent"
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 joMQbq menu-label"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
+          collapsed={false}
          onClick={[Function]}
+          type="button"
        >
          Hitchhiker
-        </p>
+        </button>
        <ul
          className="menu-list"
        >
          <li>
            <a
+              aria-label="Puzzle 42"
              className=""
              href="/42"
              onClick={[Function]}
@@ -77778,6 +77781,8 @@ exports[`Storyshots Secondary Navigation Active when match 1`] = `
          </li>
          <li>
            <a
+              aria-current="page"
+              aria-label="Heart Of Gold"
              className="is-active"
              href="/heart-of-gold"
              onClick={[Function]}
@@ -77807,25 +77812,28 @@ exports[`Storyshots Secondary Navigation Default 1`] = `
      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 ioXCUt menu"
    >
      <div>
-        <p
+        <button
          aria-label="secondaryNavigation.hideContent"
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 joMQbq menu-label is-clickable"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
+          collapsed={false}
          onClick={[Function]}
+          type="button"
        >
          <i
-            className="SecondaryNavigation__Icon-sc-8p1rgi-1 hDCYCs is-medium"
+            className="SecondaryNavigation__Icon-sc-8p1rgi-1 gqxbcY is-medium"
          >
            <i
              className="fas fa-caret-down"
            />
          </i>
          Hitchhiker
-        </p>
+        </button>
        <ul
          className="menu-list"
        >
          <li>
            <a
+              aria-label="Puzzle 42"
              className=""
              href="/42"
              onClick={[Function]}
@@ -77839,6 +77847,7 @@ exports[`Storyshots Secondary Navigation Default 1`] = `
          </li>
          <li>
            <a
+              aria-label="Heart Of Gold"
              className=""
              href="/heart-of-gold"
              onClick={[Function]}
@@ -77868,25 +77877,28 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 ioXCUt menu"
    >
      <div>
-        <p
+        <button
          aria-label="secondaryNavigation.hideContent"
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 joMQbq menu-label is-clickable"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
+          collapsed={false}
          onClick={[Function]}
+          type="button"
        >
          <i
-            className="SecondaryNavigation__Icon-sc-8p1rgi-1 hDCYCs is-medium"
+            className="SecondaryNavigation__Icon-sc-8p1rgi-1 gqxbcY is-medium"
          >
            <i
              className="fas fa-caret-down"
            />
          </i>
          Hitchhiker
-        </p>
+        </button>
        <ul
          className="menu-list"
        >
          <li>
            <a
+              aria-label="Puzzle 42"
              className=""
              href="/42"
              onClick={[Function]}
@@ -77900,6 +77912,7 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
          </li>
          <li>
            <a
+              aria-current="page"
              className="is-active"
              href="/hitchhiker/starships"
              onClick={[Function]}
@@ -77915,6 +77928,7 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
            >
              <li>
                <a
+                  aria-label="Heart Of Gold"
                  className=""
                  href="/hitchhiker/starships/heart-of-gold"
                  onClick={[Function]}
@@ -77928,6 +77942,8 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
              </li>
              <li>
                <a
+                  aria-current="page"
+                  aria-label="Starship Titanic"
                  className="is-active"
                  href="/hitchhiker/starships/titanic"
                  onClick={[Function]}
@@ -77955,25 +77971,28 @@ exports[`Storyshots Secondary Navigation Sub Navigation 1`] = `
      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 ioXCUt menu"
    >
      <div>
-        <p
+        <button
          aria-label="secondaryNavigation.hideContent"
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 joMQbq menu-label is-clickable"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
+          collapsed={false}
          onClick={[Function]}
+          type="button"
        >
          <i
-            className="SecondaryNavigation__Icon-sc-8p1rgi-1 hDCYCs is-medium"
+            className="SecondaryNavigation__Icon-sc-8p1rgi-1 gqxbcY is-medium"
          >
            <i
              className="fas fa-caret-down"
            />
          </i>
          Hitchhiker
-        </p>
+        </button>
        <ul
          className="menu-list"
        >
          <li>
            <a
+              aria-label="Puzzle 42"
              className=""
              href="/42"
              onClick={[Function]}
--- a/scm-ui/ui-components/src/navigation/NavLink.tsx
+++ b/scm-ui/ui-components/src/navigation/NavLink.tsx
@@ -66,6 +66,8 @@ const NavLink: FC<Props> = ({ to, activeWhenMatch, activeOnlyWhenExact, title, t
        className={classNames(active ? "is-active" : "", collapsed ? "has-text-centered" : "")}
        to={to}
        {...createAttributesForTesting(testId)}
+        aria-label={title}
+        {...(active ? { "aria-current": "page" } : {})}
      >
        {children ? (
          children
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -20,6 +20,7 @@ import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import { useSecondaryNavigation } from "../useSecondaryNavigation";
 import { SecondaryNavigationContext } from "./SecondaryNavigationContext";
+import { Button } from "@scm-manager/ui-buttons";

 type Props = {
  label: string;
@@ -49,10 +50,19 @@ const Icon = styled.i<CollapsedProps>`
  height: 1.5rem;
  font-size: 24px;
  margin-top: -0.75rem;
+  color: #e2e2e2;
 `;

-const MenuLabel = styled.p<CollapsedProps>`
+const MenuButton = styled(Button)<CollapsedProps>`
  justify-content: ${(props: CollapsedProps) => (props.collapsed ? "center" : "inherit")};
+  width: 100%;
+  color: #e2e2e2;
+  &:hover {
+    color: #e2e2e2;
+  }
+  &:focus {
+    color: #e2e2e2;
+  }
 `;

 const SecondaryNavigation: FC<Props> = ({ label, children, collapsible = true }) => {
@@ -65,8 +75,8 @@ const SecondaryNavigation: FC<Props> = ({ label, children, collapsible = true })
  return (
    <SectionContainer className="menu" collapsed={collapsed ?? false}>
      <div>
-        <MenuLabel
-          className={classNames("menu-label", { "is-clickable": isCollapsible })}
+        <MenuButton
+          className={classNames("menu-label", { "is-clickable": true })}
          collapsed={collapsed}
          onClick={toggleCollapse}
          aria-label={menuAriaLabel}
@@ -77,7 +87,7 @@ const SecondaryNavigation: FC<Props> = ({ label, children, collapsible = true })
            </Icon>
          ) : null}
          {collapsed ? "" : label}
-        </MenuLabel>
+        </MenuButton>
        <ul className="menu-list">
          <SecondaryNavigationContext.Provider value={true}>{children}</SecondaryNavigationContext.Provider>
        </ul>
--- a/scm-ui/ui-components/src/navigation/SubNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SubNavigation.tsx
@@ -74,6 +74,8 @@ const SubNavigation: FC<Props> = ({
          className={classNames(active ? "is-active" : "", collapsed ? "has-text-centered" : "")}
          to={to}
          {...createAttributesForTesting(testId)}
+          aria-label={title}
+          {...(active ? { "aria-current": "page" } : {})}
        >
          <i className={classNames(defaultIcon, "fa-fw")} /> {collapsed ? "" : label}
        </Link>