Fix missing aria-label in navigation

Reviewed-by: Philipp Ahrendt <philipp.ahrendt@cloudogu.com>

gradle/changelog/fix-missing-aria-label-in-secon-navigation.yaml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: missing arial-label in second navigation for bluespice, smeagol and documentation plugin

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -77742,7 +77742,6 @@ exports[`Storyshots Secondary Navigation Active when match 1`] = `
         >
           <li>
             <a
-              aria-label="Puzzle 42"
               className=""
               href="/42"
               onClick={[Function]}
@@ -77757,7 +77756,6 @@ exports[`Storyshots Secondary Navigation Active when match 1`] = `
           <li>
             <a
               aria-current="page"
-              aria-label="Heart Of Gold"
               className="is-active"
               href="/heart-of-gold"
               onClick={[Function]}
@@ -77808,7 +77806,6 @@ exports[`Storyshots Secondary Navigation Default 1`] = `
         >
           <li>
             <a
-              aria-label="Puzzle 42"
               className=""
               href="/42"
               onClick={[Function]}
@@ -77822,7 +77819,6 @@ exports[`Storyshots Secondary Navigation Default 1`] = `
           </li>
           <li>
             <a
-              aria-label="Heart Of Gold"
               className=""
               href="/heart-of-gold"
               onClick={[Function]}
@@ -77873,7 +77869,6 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
         >
           <li>
             <a
-              aria-label="Puzzle 42"
               className=""
               href="/42"
               onClick={[Function]}
@@ -77903,7 +77898,6 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
             >
               <li>
                 <a
-                  aria-label="Heart Of Gold"
                   className=""
                   href="/hitchhiker/starships/heart-of-gold"
                   onClick={[Function]}
@@ -77918,7 +77912,6 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
               <li>
                 <a
                   aria-current="page"
-                  aria-label="Starship Titanic"
                   className="is-active"
                   href="/hitchhiker/starships/titanic"
                   onClick={[Function]}
@@ -77967,7 +77960,6 @@ exports[`Storyshots Secondary Navigation Sub Navigation 1`] = `
         >
           <li>
             <a
-              aria-label="Puzzle 42"
               className=""
               href="/42"
               onClick={[Function]}

scm-ui/ui-components/src/navigation/ExternalLink.tsx

@@ -14,15 +14,15 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC } from "react";
+import React, { FC, HTMLAttributes } from "react";
 
 type Props = {
   to: string;
   className?: string;
-};
+} & HTMLAttributes<HTMLAnchorElement>;
 
-const ExternalLink: FC<Props> = ({ to, children, className }) => (
-  <a href={to} target="_blank" rel="noopener noreferrer" className={className}>
+const ExternalLink: FC<Props> = ({ to, children, className, ...props }) => (
+  <a href={to} target="_blank" rel="noopener noreferrer" className={className} {...props}>
     {children}
   </a>
 );

scm-ui/ui-components/src/navigation/ExternalNavLink.tsx

@@ -41,7 +41,7 @@ const ExternalNavLink: FC<Props> = ({ to, icon, label }) => {
 
   return (
     <li title={collapsed ? label : undefined}>
-      <ExternalLink to={to} className={collapsed ? "has-text-centered" : ""}>
+      <ExternalLink to={to} className={collapsed ? "has-text-centered" : ""} aria-label={collapsed ? label : undefined}>
         {showIcon}
         {isSecondaryNavigation && collapsed ? null : label}
       </ExternalLink>

scm-ui/ui-components/src/navigation/NavLink.tsx

@@ -20,7 +20,7 @@ import { Link } from "react-router-dom";
 import { useSecondaryNavigation } from "../useSecondaryNavigation";
 import { RoutingProps } from "./RoutingProps";
 import useActiveMatch from "./useActiveMatch";
-import { createAttributesForTesting } from "../devBuild";
+import { createAttributesForTesting } from "@scm-manager/ui-core";
 import { SecondaryNavigationContext } from "./SecondaryNavigationContext";
 import { SubNavigationContext } from "./SubNavigationContext";
 
@@ -66,7 +66,7 @@ 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}
+        aria-label={collapsed ? title : undefined}
         {...(active ? { "aria-current": "page" } : {})}
       >
         {children ? (

scm-ui/ui-components/src/navigation/SubNavigation.tsx

@@ -74,7 +74,7 @@ const SubNavigation: FC<Props> = ({
           className={classNames(active ? "is-active" : "", collapsed ? "has-text-centered" : "")}
           to={to}
           {...createAttributesForTesting(testId)}
-          aria-label={title}
+          aria-label={collapsed ? title : undefined}
           {...(active ? { "aria-current": "page" } : {})}
         >
           <i className={classNames(defaultIcon, "fa-fw")} /> {collapsed ? "" : label}