fix(JumpLinks): Fix aria issues

Remove aria-label from toggle if there is visible text. Add aria-labelled by if there is visible text. Added aria-labels to examples.

Author: rebeccaalpert

packages/react-core/src/components/JumpLinks/JumpLinks.tsx

@@ -7,7 +7,7 @@ import cssToggleDisplayVar from '@patternfly/react-tokens/dist/esm/c_jump_links_
 import { Button } from '../Button';
 import { JumpLinksItem, JumpLinksItemProps } from './JumpLinksItem';
 import { JumpLinksList } from './JumpLinksList';
-import { canUseDOM, formatBreakpointMods } from '../../helpers/util';
+import { canUseDOM, formatBreakpointMods, getUniqueId } from '../../helpers/util';
 
 export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
   /** Whether to center children. */
@@ -106,6 +106,17 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
 
   let scrollableElement: HTMLElement;
 
+  if (!label && !ariaLabel) {
+    // eslint-disable-next-line no-console
+    console.warn('For accessibility reasons, an aria-label should be specified on jump links if no label is provided');
+  }
+  if (!label && !toggleAriaLabel) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'For accessibility reasons, a toggleAriaLabel should be specified on jump links if no label is provided'
+    );
+  }
+
   const getScrollableElement = () => {
     if (scrollableRef) {
       if (scrollableRef instanceof HTMLElement) {
@@ -232,6 +243,8 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
           return child;
         });
 
+  const id = getUniqueId();
+
   return (
     <nav
       className={css(
@@ -242,8 +255,9 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
         isExpanded && styles.modifiers.expanded,
         className
       )}
-      aria-label={ariaLabel}
+      aria-label={expandable || (label && alwaysShowLabel) ? null : ariaLabel}
       ref={navRef}
+      aria-labelledby={expandable || (label && alwaysShowLabel) ? id : null}
       {...props}
     >
       <div className={styles.jumpLinksMain}>
@@ -253,21 +267,31 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
               <Button
                 variant="plain"
                 onClick={() => setIsExpanded(!isExpanded)}
-                aria-label={toggleAriaLabel}
+                aria-label={label ? null : toggleAriaLabel}
                 aria-expanded={isExpanded}
                 icon={
                   <span className={styles.jumpLinksToggleIcon}>
                     <AngleRightIcon />
                   </span>
                 }
+                id={id}
               >
                 {label && label}
               </Button>
             </div>
           )}
-          {label && alwaysShowLabel && <div className={css(styles.jumpLinksLabel)}>{label}</div>}
+          {label && alwaysShowLabel && (
+            <div className={css(styles.jumpLinksLabel)} id={id}>
+              {label}
+            </div>
+          )}
         </div>
-        <ul className={styles.jumpLinksList} role="list">
+        <ul
+          aria-label={expandable || (label && alwaysShowLabel) ? null : ariaLabel}
+          aria-labelledby={expandable || (label && alwaysShowLabel) ? id : null}
+          className={styles.jumpLinksList}
+          role="list"
+        >
           {cloneChildren(children)}
         </ul>
       </div>

packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`expandable vertical with subsection 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Jump to section"
+    aria-labelledby="pf-1754059205875vtill38mjx"
     class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable"
   >
     <div
@@ -17,11 +17,11 @@ exports[`expandable vertical with subsection 1`] = `
         >
           <button
             aria-expanded="false"
-            aria-label="Toggle jump links"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-1"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
+            id="pf-1754059205875vtill38mjx"
             type="button"
           >
             <span
@@ -54,11 +54,13 @@ exports[`expandable vertical with subsection 1`] = `
         </div>
         <div
           class="pf-v6-c-jump-links__label"
+          id="pf-1754059205875vtill38mjx"
         >
           Jump to section
         </div>
       </div>
       <ul
+        aria-labelledby="pf-1754059205875vtill38mjx"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -349,7 +351,7 @@ exports[`jumplinks centered 1`] = `
 exports[`jumplinks with label 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Jump to section"
+    aria-labelledby="pf-1754059205864jwyd6ijawzn"
     class="pf-v6-c-jump-links pf-m-center"
   >
     <div
@@ -360,11 +362,13 @@ exports[`jumplinks with label 1`] = `
       >
         <div
           class="pf-v6-c-jump-links__label"
+          id="pf-1754059205864jwyd6ijawzn"
         >
           Jump to section
         </div>
       </div>
       <ul
+        aria-labelledby="pf-1754059205864jwyd6ijawzn"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -550,7 +554,7 @@ exports[`simple jumplinks 1`] = `
 exports[`vertical with label 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Jump to section"
+    aria-labelledby="pf-1754059205870og2bcrsz5jc"
     class="pf-v6-c-jump-links pf-m-vertical"
   >
     <div
@@ -561,11 +565,13 @@ exports[`vertical with label 1`] = `
       >
         <div
           class="pf-v6-c-jump-links__label"
+          id="pf-1754059205870og2bcrsz5jc"
         >
           Jump to section
         </div>
       </div>
       <ul
+        aria-labelledby="pf-1754059205870og2bcrsz5jc"
         class="pf-v6-c-jump-links__list"
         role="list"
       >

packages/react-core/src/components/JumpLinks/examples/JumpLinksBasic.tsx

@@ -1,7 +1,7 @@
 import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksBasic: React.FunctionComponent = () => (
-  <JumpLinks>
+  <JumpLinks aria-label="Basic example">
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#" isActive>
       Active section

packages/react-core/src/components/JumpLinks/examples/JumpLinksExpandableVerticalWithSubsection.tsx

@@ -1,7 +1,7 @@
 import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
 
 export const JumpLinksExpandableVerticalWithSubsection: React.FunctionComponent = () => (
-  <JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
+  <JumpLinks isVertical label="Jump to expandable vertical section" expandable={{ default: 'expandable' }}>
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#">
       Section with active subsection

packages/react-core/src/components/JumpLinks/examples/JumpLinksVertical.tsx

@@ -1,7 +1,7 @@
 import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksVertical: React.FunctionComponent = () => (
-  <JumpLinks isVertical>
+  <JumpLinks isVertical aria-label="Vertical example">
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#" isActive>
       Active section

packages/react-core/src/components/JumpLinks/examples/JumpLinksVerticalWithLabel.tsx

@@ -1,7 +1,7 @@
 import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksVerticalWithLabel: React.FunctionComponent = () => (
-  <JumpLinks isVertical label="Jump to section">
+  <JumpLinks isVertical label="Jump to vertical section">
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#" isActive>
       Active section

packages/react-core/src/components/JumpLinks/examples/JumpLinksWithCenteredList.tsx

@@ -1,7 +1,7 @@
 import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksWithCenteredList: React.FunctionComponent = () => (
-  <JumpLinks isCentered>
+  <JumpLinks isCentered aria-label="Centered example">
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#" isActive>
       Active section