From 18a0dda693b203ea8ad4bf206446fcd3329fdb48 Mon Sep 17 00:00:00 2001
From: Anna Vetcininova <anna.vetcininova@cloudogu.com>
Date: Mon, 25 Nov 2024 15:52:10 +0100
Subject: [PATCH] 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>
---
 ...cess-to-links-in-secondary-navigation.yaml |  2 +
 .../src/__snapshots__/storyshots.test.ts.snap | 49 +++++++++++++------
 .../ui-components/src/navigation/NavLink.tsx  |  2 +
 .../src/navigation/SecondaryNavigation.tsx    | 18 +++++--
 .../src/navigation/SubNavigation.tsx          |  2 +
 5 files changed, 54 insertions(+), 19 deletions(-)
 create mode 100644 gradle/changelog/add-access-to-links-in-secondary-navigation.yaml

diff --git a/gradle/changelog/add-access-to-links-in-secondary-navigation.yaml b/gradle/changelog/add-access-to-links-in-secondary-navigation.yaml
new file mode 100644
index 0000000000..ababacb1ab
--- /dev/null
+++ b/gradle/changelog/add-access-to-links-in-secondary-navigation.yaml
@@ -0,0 +1,2 @@
+- type: added
+  description: Access to links in secondary navigation
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 46308f5a47..af4f21a2f9 100644
--- 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]}
diff --git a/scm-ui/ui-components/src/navigation/NavLink.tsx b/scm-ui/ui-components/src/navigation/NavLink.tsx
index cac7881e5d..062a1b2c2f 100644
--- 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
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
index 4f997be463..62b2b44c66 100644
--- 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>
diff --git a/scm-ui/ui-components/src/navigation/SubNavigation.tsx b/scm-ui/ui-components/src/navigation/SubNavigation.tsx
index 45b5612daf..2944f84302 100644
--- 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>