diff --git a/packages/react-core/src/components/AlertGroup/AlertGroup.tsx b/packages/react-core/src/components/AlertGroup/AlertGroup.tsx index 0ce85babc71..1e42fe6f549 100644 --- a/packages/react-core/src/components/AlertGroup/AlertGroup.tsx +++ b/packages/react-core/src/components/AlertGroup/AlertGroup.tsx @@ -18,6 +18,8 @@ export interface AlertGroupProps extends Omit, 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 {children} diff --git a/packages/react-core/src/components/AlertGroup/AlertGroupInline.tsx b/packages/react-core/src/components/AlertGroup/AlertGroupInline.tsx index 8a828cf416f..f47dbaf8f98 100644 --- a/packages/react-core/src/components/AlertGroup/AlertGroupInline.tsx +++ b/packages/react-core/src/components/AlertGroup/AlertGroupInline.tsx @@ -14,6 +14,7 @@ export const AlertGroupInline: React.FunctionComponent = ({ ...rest }: AlertGroupProps) => (
      `; diff --git a/packages/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap b/packages/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap index ecd04b19c1c..3bb226cf325 100644 --- a/packages/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap +++ b/packages/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap @@ -4,6 +4,7 @@ exports[`AlertGroup Alert Group renders without children 1`] = `
        `; diff --git a/packages/react-core/src/components/Breadcrumb/Breadcrumb.tsx b/packages/react-core/src/components/Breadcrumb/Breadcrumb.tsx index 1ffa4d8ad4d..fea9df52ad8 100644 --- a/packages/react-core/src/components/Breadcrumb/Breadcrumb.tsx +++ b/packages/react-core/src/components/Breadcrumb/Breadcrumb.tsx @@ -27,7 +27,7 @@ export const Breadcrumb: React.FunctionComponent = ({ const ouiaProps = useOUIAProps(Breadcrumb.displayName, ouiaId, ouiaSafe); return ( @@ -27,6 +28,7 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = ` >
          1. @@ -98,6 +101,7 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = ` >
              diff --git a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx index 1ac4ca99ede..de2b916e9ca 100644 --- a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx +++ b/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 { @@ -128,6 +130,7 @@ export class ContextSelector extends React.Component - {children} + + {children} + {footer} diff --git a/packages/react-core/src/components/ContextSelector/ContextSelectorMenuList.tsx b/packages/react-core/src/components/ContextSelector/ContextSelectorMenuList.tsx index 66fc0233b31..d407d8ac10e 100644 --- a/packages/react-core/src/components/ContextSelector/ContextSelectorMenuList.tsx +++ b/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 { diff --git a/packages/react-core/src/components/DataList/DataList.tsx b/packages/react-core/src/components/DataList/DataList.tsx index d42c9b6bb54..613536ab1f5 100644 --- a/packages/react-core/src/components/DataList/DataList.tsx +++ b/packages/react-core/src/components/DataList/DataList.tsx @@ -111,6 +111,7 @@ export class DataList extends React.Component { className )} style={props.style} + role="list" {...props} ref={this.ref} > diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap index 81b49758b09..2e93a2bbfdd 100644 --- a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap +++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap @@ -36,6 +36,7 @@ exports[`DataList DataList variants Breakpoint - 2xl 1`] = `
                `; @@ -45,6 +46,7 @@ exports[`DataList DataList variants Breakpoint - always 1`] = `
                  `; @@ -54,6 +56,7 @@ exports[`DataList DataList variants Breakpoint - lg 1`] = `
                    `; @@ -63,6 +66,7 @@ exports[`DataList DataList variants Breakpoint - md 1`] = `
                      `; @@ -72,6 +76,7 @@ exports[`DataList DataList variants Breakpoint - none 1`] = `
                        `; @@ -81,6 +86,7 @@ exports[`DataList DataList variants Breakpoint - sm 1`] = `
                          `; @@ -90,6 +96,7 @@ exports[`DataList DataList variants Breakpoint - xl 1`] = `
                            `; @@ -214,6 +221,7 @@ exports[`DataList List 1`] = `
                              `; @@ -223,6 +231,7 @@ exports[`DataList List compact 1`] = `
                                `; @@ -232,6 +241,7 @@ exports[`DataList List default 1`] = `
                                  `; @@ -241,6 +251,7 @@ exports[`DataList List draggable 1`] = `
                                    `; diff --git a/packages/react-core/src/components/Divider/examples/DividerUsingLi.tsx b/packages/react-core/src/components/Divider/examples/DividerUsingLi.tsx index b71602dc05c..b6da6ce09f4 100644 --- a/packages/react-core/src/components/Divider/examples/DividerUsingLi.tsx +++ b/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 = () => ( -
                                      +
                                      • List item one
                                      • List item two
                                      • diff --git a/packages/react-core/src/components/HelperText/HelperText.tsx b/packages/react-core/src/components/HelperText/HelperText.tsx index 83f2332411b..4ba22cdc46f 100644 --- a/packages/react-core/src/components/HelperText/HelperText.tsx +++ b/packages/react-core/src/components/HelperText/HelperText.tsx @@ -18,6 +18,8 @@ export interface HelperTextProps extends React.HTMLProps = ({ @@ -26,6 +28,7 @@ export const HelperText: React.FunctionComponent = ({ component = 'div', id, isLiveRegion = false, + 'aria-label': ariaLabel, ...props }: HelperTextProps) => { const Component = component as any; @@ -34,6 +37,7 @@ export const HelperText: React.FunctionComponent = ({ id={id} className={css(styles.helperText, className)} {...(isLiveRegion && { 'aria-live': 'polite' })} + {...(component === 'ul' && { role: 'list', 'aria-label': ariaLabel })} {...props} > {children} diff --git a/packages/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap b/packages/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap index 4ffdbcb9484..402d633cce5 100644 --- a/packages/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap +++ b/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`] = `
                                        • , '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 = ({ @@ -245,7 +240,9 @@ export const JumpLinks: React.FunctionComponent = ({ )} {label && alwaysShowLabel &&
                                          {label}
                                          } -
                                            {cloneChildren(children)}
                                          +
                                            + {cloneChildren(children)} +
                                          ); diff --git a/packages/react-core/src/components/JumpLinks/JumpLinksList.tsx b/packages/react-core/src/components/JumpLinks/JumpLinksList.tsx index ab101ccf55c..68f6342af4c 100644 --- a/packages/react-core/src/components/JumpLinks/JumpLinksList.tsx +++ b/packages/react-core/src/components/JumpLinks/JumpLinksList.tsx @@ -14,7 +14,7 @@ export const JumpLinksList: React.FunctionComponent = ({ className, ...props }: JumpLinksListProps) => ( -
                                            +
                                              {children}
                                            ); diff --git a/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap b/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap index a31adaba723..f7231bfb391 100644 --- a/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap +++ b/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap @@ -57,6 +57,7 @@ exports[`expandable vertical with subsection 1`] = `