fix(lists): added role to list elements within components

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

@@ -18,6 +18,8 @@ export interface AlertGroupProps extends Omit<React.HTMLProps<HTMLUListElement>,
   onOverflowClick?: () => void;
   /** Custom text to show for the overflow message */
   overflowMessage?: string;
+  /** Adds an accessible label to the alert group. */
+  'aria-label'?: string;
 }
 
 interface AlertGroupState {
@@ -53,14 +55,24 @@ export class AlertGroup extends React.Component<AlertGroupProps, AlertGroupState
   }
 
   render() {
-    const { className, children, isToast, isLiveRegion, onOverflowClick, overflowMessage, ...props } = this.props;
+    const {
+      className,
+      children,
+      isToast,
+      isLiveRegion,
+      onOverflowClick,
+      overflowMessage,
+      'aria-label': ariaLabel,
+      ...props
+    } = this.props;
     const alertGroup = (
       <AlertGroupInline
         onOverflowClick={onOverflowClick}
         className={className}
         isToast={isToast}
         isLiveRegion={isLiveRegion}
         overflowMessage={overflowMessage}
+        aria-label={ariaLabel}
         {...props}
       >
         {children}

packages/react-core/src/components/AlertGroup/AlertGroupInline.tsx

@@ -14,6 +14,7 @@ export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   ...rest
 }: AlertGroupProps) => (
   <ul
+    role="list"
     aria-live={isLiveRegion ? 'polite' : null}
     aria-atomic={isLiveRegion ? false : null}
     className={css(styles.alertGroup, className, isToast ? styles.modifiers.toast : '')}

packages/react-core/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroupInline.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`AlertGroupInline should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <ul
     class="pf-c-alert-group"
+    role="list"
   />
 </DocumentFragment>
 `;

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

@@ -4,6 +4,7 @@ exports[`AlertGroup Alert Group renders without children 1`] = `
 <DocumentFragment>
   <ul
     class="pf-c-alert-group"
+    role="list"
   />
 </DocumentFragment>
 `;

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

@@ -27,7 +27,7 @@ export const Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({
   const ouiaProps = useOUIAProps(Breadcrumb.displayName, ouiaId, ouiaSafe);
   return (
     <nav {...props} aria-label={ariaLabel} className={css(styles.breadcrumb, className)} {...ouiaProps}>
-      <ol className={styles.breadcrumbList}>
+      <ol className={styles.breadcrumbList} role="list">
         {React.Children.map(children, (child, index) => {
           const showDivider = index > 0;
           if (React.isValidElement(child)) {

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

@@ -11,6 +11,7 @@ exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
   >
     <ol
       class="pf-c-breadcrumb__list"
+      role="list"
     />
   </nav>
 </DocumentFragment>
@@ -27,6 +28,7 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
   >
     <ol
       class="pf-c-breadcrumb__list"
+      role="list"
     >
       <li
         class="pf-c-breadcrumb__item"
@@ -82,6 +84,7 @@ exports[`Breadcrumb component should render breadcrumb with className 1`] = `
   >
     <ol
       class="pf-c-breadcrumb__list"
+      role="list"
     />
   </nav>
 </DocumentFragment>
@@ -98,6 +101,7 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = `
   >
     <ol
       class="pf-c-breadcrumb__list"
+      role="list"
     />
   </nav>
 </DocumentFragment>

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

@@ -67,6 +67,8 @@ export interface ContextSelectorProps extends OUIAProps {
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** Adds an accessible label to the context selector menu. */
+  menuAriaLabel?: string;
 }
 
 export class ContextSelector extends React.Component<ContextSelectorProps, { ouiaStateId: string }> {
@@ -128,6 +130,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
       isFlipEnabled,
       id,
       zIndex,
+      menuAriaLabel,
       ...props
     } = this.props;
 
@@ -156,7 +159,9 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
               />
             </div>
             <ContextSelectorContext.Provider value={{ onSelect }}>
-              <ContextSelectorMenuList isOpen={isOpen}>{children}</ContextSelectorMenuList>
+              <ContextSelectorMenuList isOpen={isOpen} aria-label={menuAriaLabel}>
+                {children}
+              </ContextSelectorMenuList>
             </ContextSelectorContext.Provider>
             {footer}
           </FocusTrap>

packages/react-core/src/components/ContextSelector/ContextSelectorMenuList.tsx

@@ -3,12 +3,14 @@ import styles from '@patternfly/react-styles/css/components/ContextSelector/cont
 import { css } from '@patternfly/react-styles';
 
 export interface ContextSelectorMenuListProps {
-  /** Content rendered inside the Context Selector Menu */
+  /** Content rendered inside the context selector menu */
   children?: React.ReactNode;
-  /** Classess applied to root element of Context Selector menu */
+  /** Classess applied to root element of context selector menu */
   className?: string;
-  /** Flag to indicate if Context Selector menu is opened */
+  /** Flag to indicate if context selector menu is opened */
   isOpen?: boolean;
+  /** Adds an accessible label to the context selector menu. */
+  'aria-label'?: string;
 }
 
 export class ContextSelectorMenuList extends React.Component<ContextSelectorMenuListProps> {

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

@@ -111,6 +111,7 @@ export class DataList extends React.Component<DataListProps> {
             className
           )}
           style={props.style}
+          role="list"
           {...props}
           ref={this.ref}
         >

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

@@ -36,6 +36,7 @@ exports[`DataList DataList variants Breakpoint - 2xl 1`] = `
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-2xl"
+    role="list"
   />
 </DocumentFragment>
 `;
@@ -45,6 +46,7 @@ exports[`DataList DataList variants Breakpoint - always 1`] = `
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid"
+    role="list"
   />
 </DocumentFragment>
 `;
@@ -54,6 +56,7 @@ exports[`DataList DataList variants Breakpoint - lg 1`] = `
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-lg"
+    role="list"
   />
 </DocumentFragment>
 `;
@@ -63,6 +66,7 @@ exports[`DataList DataList variants Breakpoint - md 1`] = `
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-md"
+    role="list"
   />
 </DocumentFragment>
 `;
@@ -72,6 +76,7 @@ exports[`DataList DataList variants Breakpoint - none 1`] = `
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-none"
+    role="list"
   />
 </DocumentFragment>
 `;
@@ -81,6 +86,7 @@ exports[`DataList DataList variants Breakpoint - sm 1`] = `
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-sm"
+    role="list"
   />
 </DocumentFragment>
 `;
@@ -90,6 +96,7 @@ exports[`DataList DataList variants Breakpoint - xl 1`] = `
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-xl"
+    role="list"
   />
 </DocumentFragment>
 `;
@@ -214,6 +221,7 @@ exports[`DataList List 1`] = `
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-md data-list-custom"
+    role="list"
   />
 </DocumentFragment>
 `;
@@ -223,6 +231,7 @@ exports[`DataList List compact 1`] = `
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-compact pf-m-grid-md"
+    role="list"
   />
 </DocumentFragment>
 `;
@@ -232,6 +241,7 @@ exports[`DataList List default 1`] = `
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-grid-md"
+    role="list"
   />
 </DocumentFragment>
 `;
@@ -241,6 +251,7 @@ exports[`DataList List draggable 1`] = `
   <ul
     aria-label="this is a simple list"
     class="pf-c-data-list pf-m-compact pf-m-grid-md"
+    role="list"
   />
 </DocumentFragment>
 `;

packages/react-core/src/components/Divider/examples/DividerUsingLi.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Divider } from '@patternfly/react-core';
 
 export const DividerUsingLi: React.FunctionComponent = () => (
-  <ul>
+  <ul role="list">
     <li>List item one</li>
     <Divider component="li" />
     <li>List item two</li>

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

@@ -18,6 +18,8 @@ export interface HelperTextProps extends React.HTMLProps<HTMLDivElement | HTMLUL
    * expect or intend for any helper text items within the container to be dynamically updated.
    */
   isLiveRegion?: boolean;
+  /** Adds an accessible label to the helper text when component is a "ul". */
+  'aria-label'?: string;
 }
 
 export const HelperText: React.FunctionComponent<HelperTextProps> = ({
@@ -26,6 +28,7 @@ export const HelperText: React.FunctionComponent<HelperTextProps> = ({
   component = 'div',
   id,
   isLiveRegion = false,
+  'aria-label': ariaLabel,
   ...props
 }: HelperTextProps) => {
   const Component = component as any;
@@ -34,6 +37,7 @@ export const HelperText: React.FunctionComponent<HelperTextProps> = ({
       id={id}
       className={css(styles.helperText, className)}
       {...(isLiveRegion && { 'aria-live': 'polite' })}
+      {...(component === 'ul' && { role: 'list', 'aria-label': ariaLabel })}
       {...props}
     >
       {children}

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

@@ -191,6 +191,7 @@ exports[`HelperText variant comonent helper text renders properly 1`] = `
 <DocumentFragment>
   <ul
     class="pf-c-helper-text"
+    role="list"
   >
     <li
       class="pf-c-helper-text__item"

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

@@ -19,7 +19,7 @@ export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   label?: React.ReactNode;
   /** Flag to always show the label when using `expandable` */
   alwaysShowLabel?: boolean;
-  /** Aria-label to add to nav element. Defaults to label. */
+  /** Adds an accessible label to the internal nav element. Defaults to the value of the label prop. */
   'aria-label'?: string;
   /** Selector for the scrollable element to spy on. Not passing a selector disables spying. */
   scrollableSelector?: string;
@@ -72,12 +72,7 @@ const getScrollItems = (children: React.ReactNode, res: HTMLElement[]) => {
 
 function isResponsive(jumpLinks: HTMLElement) {
   // https://github.com/patternfly/patternfly/blob/main/src/patternfly/components/JumpLinks/jump-links.scss#L103
-  return (
-    jumpLinks &&
-    getComputedStyle(jumpLinks)
-      .getPropertyValue(cssToggleDisplayVar.name)
-      .includes('block')
-  );
+  return jumpLinks && getComputedStyle(jumpLinks).getPropertyValue(cssToggleDisplayVar.name).includes('block');
 }
 
 export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
@@ -245,7 +240,9 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
           )}
           {label && alwaysShowLabel && <div className={css(styles.jumpLinksLabel)}>{label}</div>}
         </div>
-        <ul className={styles.jumpLinksList}>{cloneChildren(children)}</ul>
+        <ul className={styles.jumpLinksList} role="list">
+          {cloneChildren(children)}
+        </ul>
       </div>
     </nav>
   );

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

@@ -14,7 +14,7 @@ export const JumpLinksList: React.FunctionComponent<JumpLinksListProps> = ({
   className,
   ...props
 }: JumpLinksListProps) => (
-  <ul className={css(styles.jumpLinksList, className)} {...props}>
+  <ul className={css(styles.jumpLinksList, className)} role="list" {...props}>
     {children}
   </ul>
 );

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

@@ -57,6 +57,7 @@ exports[`expandable vertical with subsection 1`] = `
       </div>
       <ul
         class="pf-c-jump-links__list"
+        role="list"
       >
         <li
           class="pf-c-jump-links__item"
@@ -85,6 +86,7 @@ exports[`expandable vertical with subsection 1`] = `
           </a>
           <ul
             class="pf-c-jump-links__list"
+            role="list"
           >
             <li
               aria-current="location"
@@ -173,6 +175,7 @@ exports[`jumplinks centered 1`] = `
       />
       <ul
         class="pf-c-jump-links__list"
+        role="list"
       >
         <li
           class="pf-c-jump-links__item"
@@ -240,6 +243,7 @@ exports[`jumplinks with label 1`] = `
       </div>
       <ul
         class="pf-c-jump-links__list"
+        role="list"
       >
         <li
           class="pf-c-jump-links__item"
@@ -300,6 +304,7 @@ exports[`simple jumplinks 1`] = `
       />
       <ul
         class="pf-c-jump-links__list"
+        role="list"
       >
         <li
           class="pf-c-jump-links__item"
@@ -367,6 +372,7 @@ exports[`vertical with label 1`] = `
       </div>
       <ul
         class="pf-c-jump-links__list"
+        role="list"
       >
         <li
           class="pf-c-jump-links__item"