@patternfly/react-core 5.0.0-alpha.26 → 5.0.0-alpha.28

package/next/components/Wizard/WizardNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WizardNav.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/WizardNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAoB7D,CAAC"}
+{"version":3,"file":"WizardNav.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/WizardNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CA0B7D,CAAC"}

package/next/components/Wizard/WizardNav.js

@@ -3,10 +3,10 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 export const WizardNav = ({ children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isExpanded = false, isInnerList = false }) => {
     if (isInnerList) {
-        return React.createElement("ol", { className: css(styles.wizardNavList) }, children);
+        return (React.createElement("ol", { className: css(styles.wizardNavList), role: "list" }, children));
     }
     return (React.createElement("nav", { className: css(styles.wizardNav, isExpanded && styles.modifiers.expanded), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy },
-        React.createElement("ol", { className: css(styles.wizardNavList) }, children)));
+        React.createElement("ol", { className: css(styles.wizardNavList), role: "list" }, children)));
 };
 WizardNav.displayName = 'WizardNav';
 //# sourceMappingURL=WizardNav.js.map

package/next/components/Wizard/WizardNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardNav.js","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/WizardNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,uDAAuD,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAe/C,MAAM,CAAC,MAAM,SAAS,GAA4C,CAAC,EACjE,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACJ,EAAE,EAAE;IACnB,IAAI,WAAW,EAAE;QACf,OAAO,4BAAI,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,aAAa,CAAC,IAAG,QAAQ,CAAM,CAAC;KAClE;IAED,OAAO,CACL,6BACE,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE,UAAU,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAC7D,SAAS,qBACJ,cAAc;QAE/B,4BAAI,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,aAAa,CAAC,IAAG,QAAQ,CAAM,CACrD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}
+{"version":3,"file":"WizardNav.js","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/WizardNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,uDAAuD,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAe/C,MAAM,CAAC,MAAM,SAAS,GAA4C,CAAC,EACjE,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACJ,EAAE,EAAE;IACnB,IAAI,WAAW,EAAE;QACf,OAAO,CACL,4BAAI,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,IAAI,EAAC,MAAM,IAClD,QAAQ,CACN,CACN,CAAC;KACH;IAED,OAAO,CACL,6BACE,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE,UAAU,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAC7D,SAAS,qBACJ,cAAc;QAE/B,4BAAI,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,IAAI,EAAC,MAAM,IAClD,QAAQ,CACN,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.26",
+  "version": "5.0.0-alpha.28",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "4d604e40fe4f0c133fb4a319b9c19f44d7ac234f"
+  "gitHead": "613d25f3c3cd5428f3bb0e369f0dc50799e5854e"
 }

package/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,7 +55,16 @@ 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}
@@ -61,6 +72,7 @@ export class AlertGroup extends React.Component<AlertGroupProps, AlertGroupState
         isToast={isToast}
         isLiveRegion={isLiveRegion}
         overflowMessage={overflowMessage}
+        aria-label={ariaLabel}
         {...props}
       >
         {children}

package/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 : '')}

package/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>
 `;

package/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>
 `;

package/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)) {

package/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>

package/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>

package/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> {

package/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}
         >

package/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>
 `;

package/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>

package/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}

package/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"

package/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>
   );

package/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>
 );

package/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"

package/src/components/List/List.tsx

@@ -32,9 +32,12 @@ export interface ListProps extends Omit<React.HTMLProps<HTMLUListElement | HTMLO
   isPlain?: boolean;
   /** Modifies the size of the icons in the list */
   iconSize?: 'default' | 'large';
-  /** Sets the way items are numbered if variant is set to ordered */
+  /** Sets the way items are numbered if component is set to "ol". */
   type?: OrderType;
+  /** Sets the type of the list component. */
   component?: 'ol' | 'ul';
+  /** Adds an accessible label to the list. */
+  'aria-label'?: string;
 }
 
 export const List: React.FunctionComponent<ListProps> = ({
@@ -53,6 +56,7 @@ export const List: React.FunctionComponent<ListProps> = ({
     <ol
       ref={ref as React.LegacyRef<HTMLOListElement>}
       type={type}
+      {...(isPlain && { role: 'list' })}
       {...props}
       className={css(
         styles.list,
@@ -68,6 +72,7 @@ export const List: React.FunctionComponent<ListProps> = ({
   ) : (
     <ul
       ref={ref as React.LegacyRef<HTMLUListElement>}
+      {...(isPlain && { role: 'list' })}
       {...props}
       className={css(
         styles.list,

package/src/components/List/__tests__/__snapshots__/List.test.tsx.snap

@@ -79,6 +79,7 @@ exports[`List icon list 1`] = `
 <DocumentFragment>
   <ul
     class="pf-c-list pf-m-plain"
+    role="list"
   >
     <li
       class="pf-c-list__item"

package/src/components/LoginPage/LoginMainFooter.tsx

@@ -7,8 +7,10 @@ export interface LoginMainFooterProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Content rendered inside the login main footer */
   children?: React.ReactNode;
-  /** Content rendered inside the login main footer as social media links* */
+  /** Content rendered inside the login main footer as social media links */
   socialMediaLoginContent?: React.ReactNode;
+  /** Adds an accessible name to the social media login list. */
+  socialMediaLoginAriaLabel?: string;
   /** Content rendered inside of login main footer band to display a sign up for account message */
   signUpForAccountMessage?: React.ReactNode;
   /** Content rendered inside of login main footer band do display a forgot credentials link* */
@@ -21,11 +23,16 @@ export const LoginMainFooter: React.FunctionComponent<LoginMainFooterProps> = ({
   signUpForAccountMessage = null,
   forgotCredentials = null,
   className = '',
+  socialMediaLoginAriaLabel,
   ...props
 }: LoginMainFooterProps) => (
   <div className={css(styles.loginMainFooter, className)} {...props}>
     {children}
-    {socialMediaLoginContent && <ul className={css(styles.loginMainFooterLinks)}>{socialMediaLoginContent}</ul>}
+    {socialMediaLoginContent && (
+      <ul className={css(styles.loginMainFooterLinks)} aria-label={socialMediaLoginAriaLabel} role="list">
+        {socialMediaLoginContent}
+      </ul>
+    )}
     {(signUpForAccountMessage || forgotCredentials) && (
       <div className={css(styles.loginMainFooterBand)}>
         {signUpForAccountMessage}

package/src/components/LoginPage/LoginPage.tsx

@@ -43,6 +43,8 @@ export interface LoginPageProps extends React.HTMLProps<HTMLDivElement> {
   forgotCredentials?: React.ReactNode;
   /** Content rendered inside of social media login footer section */
   socialMediaLoginContent?: React.ReactNode;
+  /** Adds an accessible name to the social media login list. */
+  socialMediaLoginAriaLabel?: string;
 }
 
 export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
@@ -61,6 +63,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
   signUpForAccountMessage = null,
   forgotCredentials = null,
   socialMediaLoginContent = null,
+  socialMediaLoginAriaLabel,
   ...props
 }: LoginPageProps) => {
   const HeaderBrand = (
@@ -85,6 +88,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
         {(socialMediaLoginContent || forgotCredentials || signUpForAccountMessage) && (
           <LoginMainFooter
             socialMediaLoginContent={socialMediaLoginContent}
+            socialMediaLoginAriaLabel={socialMediaLoginAriaLabel}
             forgotCredentials={forgotCredentials}
             signUpForAccountMessage={signUpForAccountMessage}
           />

package/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap

@@ -82,6 +82,7 @@ exports[`check loginpage example against snapshot 1`] = `
         >
           <ul
             class="pf-c-login__main-footer-links"
+            role="list"
           >
             Footer
           </ul>

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -134,6 +134,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
       loginTitle="Log in to your account"
       loginSubtitle="Enter your single sign-on LDAP credentials."
       socialMediaLoginContent={socialMediaLoginContent}
+      socialMediaLoginAriaLabel="Log in with social media"
       signUpForAccountMessage={signUpForAccountMessage}
       forgotCredentials={forgotCredentials}
     >

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -185,6 +185,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
       loginSubtitle="Enter your single sign-on LDAP credentials."
       headerUtilities={headerUtils}
       socialMediaLoginContent={socialMediaLoginContent}
+      socialMediaLoginAriaLabel="Log in with social media"
       signUpForAccountMessage={signUpForAccountMessage}
       forgotCredentials={forgotCredentials}
     >

package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx

@@ -135,6 +135,7 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
       loginTitle="Log in to your account"
       loginSubtitle="Enter your single sign-on LDAP credentials."
       socialMediaLoginContent={socialMediaLoginContent}
+      socialMediaLoginAriaLabel="Log in with social media"
       signUpForAccountMessage={signUpForAccountMessage}
       forgotCredentials={forgotCredentials}
     >

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -21,6 +21,8 @@ export interface MultipleFileUploadStatusProps extends React.HTMLProps<HTMLDivEl
   statusToggleText?: string;
   /** Icon to show in the status toggle */
   statusToggleIcon?: 'danger' | 'success' | 'inProgress' | React.ReactNode;
+  /** Adds an accessible label to the list of status items. */
+  'aria-label'?: string;
 }
 
 export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploadStatusProps> = ({
@@ -28,6 +30,7 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
   className,
   statusToggleText,
   statusToggleIcon,
+  'aria-label': ariaLabel,
   ...props
 }: MultipleFileUploadStatusProps) => {
   const [icon, setIcon] = React.useState<React.ReactNode>();
@@ -63,7 +66,9 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
   return (
     <div className={css(styles.multipleFileUploadStatus, className)} {...props}>
       <ExpandableSection toggleContent={toggle} isExpanded={isOpen} onToggle={toggleExpandableSection}>
-        <ul className="pf-c-multiple-file-upload__status-list">{children}</ul>
+        <ul className="pf-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
+          {children}
+        </ul>
       </ExpandableSection>
     </div>
   );

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap

@@ -51,6 +51,7 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
       >
         <ul
           class="pf-c-multiple-file-upload__status-list"
+          role="list"
         >
           Foo
         </ul>
@@ -125,6 +126,7 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
       >
         <ul
           class="pf-c-multiple-file-upload__status-list"
+          role="list"
         >
           Foo
         </ul>
@@ -187,6 +189,7 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
       >
         <ul
           class="pf-c-multiple-file-upload__status-list"
+          role="list"
         >
           Foo
         </ul>
@@ -247,6 +250,7 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
       >
         <ul
           class="pf-c-multiple-file-upload__status-list"
+          role="list"
         >
           Foo
         </ul>