diff --git a/packages/react-core/src/components/AboutModal/AboutModal.tsx b/packages/react-core/src/components/AboutModal/AboutModal.tsx index 60f3422d871..951a6cf450b 100644 --- a/packages/react-core/src/components/AboutModal/AboutModal.tsx +++ b/packages/react-core/src/components/AboutModal/AboutModal.tsx @@ -136,8 +136,8 @@ export class AboutModal extends React.Component { return ReactDOM.createPortal( , container diff --git a/packages/react-core/src/components/AboutModal/AboutModalContainer.tsx b/packages/react-core/src/components/AboutModal/AboutModalContainer.tsx index bf0d32ee619..3b5ed7c4fc8 100644 --- a/packages/react-core/src/components/AboutModal/AboutModalContainer.tsx +++ b/packages/react-core/src/components/AboutModal/AboutModalContainer.tsx @@ -34,9 +34,9 @@ export interface AboutModalContainerProps extends React.HTMLProps { if (!isOpen) { @@ -62,13 +62,17 @@ export const AboutModalContainer: React.FunctionComponent - + - - {productName && } + + {productName && } diff --git a/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx index 8f1083e589a..bf4c1def0b9 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx +++ b/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx @@ -48,7 +48,7 @@ test('modal does not call onClose for esc key if it is not open', () => { expect(props.onClose).not.toBeCalled(); }); -test('Each modal is given new ariaDescribedById and ariaLabelledbyId', () => { +test('Each modal is given new aria-describedby and aria-labelledby', () => { const first = new AboutModal(props); const second = new AboutModal(props); expect(first.ariaLabelledBy).not.toBe(second.ariaLabelledBy); diff --git a/packages/react-core/src/components/AboutModal/__tests__/AboutModalContainer.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/AboutModalContainer.test.tsx index f950ebe5933..08b5bd40dad 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/AboutModalContainer.test.tsx +++ b/packages/react-core/src/components/AboutModal/__tests__/AboutModalContainer.test.tsx @@ -9,8 +9,8 @@ const props = { brandImageSrc: 'brandImg...', brandImageAlt: 'Brand Image', backgroundImageSrc: 'backgroundImageSrc...', - ariaLabelledbyId: 'ariaLablledbyId', - ariaDescribedById: 'ariaDescribedById' + 'aria-labelledby': 'ariaLablledbyId', + 'aria-describedby': 'ariaDescribedById' }; test('About Modal Container Test simple', () => { const view = shallow(This is ModalBox content); diff --git a/packages/react-core/src/components/AboutModal/__tests__/Generated/AboutModalContainer.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/Generated/AboutModalContainer.test.tsx index 68492d2cc3b..95cadad61b2 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/Generated/AboutModalContainer.test.tsx +++ b/packages/react-core/src/components/AboutModal/__tests__/Generated/AboutModalContainer.test.tsx @@ -19,8 +19,8 @@ it('AboutModalContainer should match snapshot (auto-generated)', () => { brandImageSrc={'string'} brandImageAlt={'string'} backgroundImageSrc={'string'} - ariaLabelledbyId={'string'} - ariaDescribedById={'string'} + aria-labelledby={'string'} + aria-describedby={'string'} /> ); expect(view).toMatchSnapshot(); diff --git a/packages/react-core/src/components/AboutModal/__tests__/Generated/__snapshots__/AboutModal.test.tsx.snap b/packages/react-core/src/components/AboutModal/__tests__/Generated/__snapshots__/AboutModal.test.tsx.snap index 3e2377f664d..5b65e14b5b5 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/Generated/__snapshots__/AboutModal.test.tsx.snap +++ b/packages/react-core/src/components/AboutModal/__tests__/Generated/__snapshots__/AboutModal.test.tsx.snap @@ -5,8 +5,8 @@ exports[`AboutModal should match snapshot (auto-generated) 1`] = ` containerInfo={
} > { {!isReadOnly && ( @@ -110,7 +110,7 @@ export class Chip extends React.Component { {!isReadOnly && ( diff --git a/packages/react-core/src/components/ChipGroup/ChipButton.tsx b/packages/react-core/src/components/ChipGroup/ChipButton.tsx index 1693e22401c..e2859a3fdab 100644 --- a/packages/react-core/src/components/ChipGroup/ChipButton.tsx +++ b/packages/react-core/src/components/ChipGroup/ChipButton.tsx @@ -3,7 +3,7 @@ import { Button, ButtonProps } from '../Button'; export interface ChipButtonProps extends ButtonProps { /** Aria label for chip button */ - ariaLabel?: string; + 'aria-label'?: string; /** Content rendered inside the chip item */ children?: React.ReactNode; /** Additional classes added to the chip item */ @@ -13,7 +13,7 @@ export interface ChipButtonProps extends ButtonProps { } export const ChipButton: React.FunctionComponent = ({ - ariaLabel = 'close', + 'aria-label': ariaLabel = 'close', children = null, className = '', onClick = () => undefined, diff --git a/packages/react-core/src/components/ChipGroup/__tests__/Chip.test.tsx b/packages/react-core/src/components/ChipGroup/__tests__/Chip.test.tsx index 9b84f05fbe5..9af229d43c6 100644 --- a/packages/react-core/src/components/ChipGroup/__tests__/Chip.test.tsx +++ b/packages/react-core/src/components/ChipGroup/__tests__/Chip.test.tsx @@ -49,3 +49,4 @@ describe('Chip', () => { expect(view).toMatchSnapshot(); }); }); + diff --git a/packages/react-core/src/components/ChipGroup/__tests__/Generated/__snapshots__/ChipButton.test.tsx.snap b/packages/react-core/src/components/ChipGroup/__tests__/Generated/__snapshots__/ChipButton.test.tsx.snap index 99c9775080d..aa85b8fc10c 100644 --- a/packages/react-core/src/components/ChipGroup/__tests__/Generated/__snapshots__/ChipButton.test.tsx.snap +++ b/packages/react-core/src/components/ChipGroup/__tests__/Generated/__snapshots__/ChipButton.test.tsx.snap @@ -2,7 +2,8 @@ exports[`ChipButton should match snapshot (auto-generated) 1`] = ` - - -`; - exports[`should render Login form 1`] = `
{ hideTitle?: boolean; /** Flag to show the close button in the header area of the modal */ showClose?: boolean; - /** Id to use for Modal Box description */ - ariaDescribedById?: string; + /** Id to use for Modal Box descriptor */ + modalContentAriaDescribedById?: string; /** Custom footer */ footer?: React.ReactNode; /** Action buttons to add to the standard Modal Footer, ignored if `footer` is given */ @@ -61,7 +61,7 @@ export class Modal extends React.Component { isOpen: false, hideTitle: false, showClose: true, - ariaDescribedById: '', + modalContentAriaDescribedById: '', actions: [] as any[], isFooterLeftAligned: false, onClose: () => undefined as any, @@ -158,7 +158,7 @@ export class Modal extends React.Component { {...props} title={this.props.title} id={this.id} - ariaDescribedById={this.props.ariaDescribedById} + modalBoxAriaDescribedById={this.props.modalContentAriaDescribedById} />, container ); diff --git a/packages/react-core/src/components/Modal/ModalContent.tsx b/packages/react-core/src/components/Modal/ModalContent.tsx index 321c5fa82d6..5274823fb12 100644 --- a/packages/react-core/src/components/Modal/ModalContent.tsx +++ b/packages/react-core/src/components/Modal/ModalContent.tsx @@ -48,8 +48,8 @@ export interface ModalContentProps { isFooterLeftAligned?: boolean; /** A callback for when the close button is clicked */ onClose?: () => void; - /** Id to use for Modal Box description */ - ariaDescribedById?: string; + /** Id to use for Modal Box descriptor */ + modalBoxAriaDescribedById?: string; /** Id of the ModalBoxBody */ id: string; /** Flag to disable focus trap */ @@ -72,7 +72,7 @@ export const ModalContent: React.FunctionComponent = ({ isLarge = false, isSmall = false, width = -1, - ariaDescribedById = '', + modalBoxAriaDescribedById = '', id = '', disableFocusTrap = false, ...props @@ -100,7 +100,7 @@ export const ModalContent: React.FunctionComponent = ({ isLarge={isLarge} isSmall={isSmall} title={title} - id={ariaDescribedById || id} + id={modalBoxAriaDescribedById || id} > {showClose && } {modalBoxHeader} diff --git a/packages/react-core/src/components/Modal/__tests__/Generated/__snapshots__/Modal.test.tsx.snap b/packages/react-core/src/components/Modal/__tests__/Generated/__snapshots__/Modal.test.tsx.snap index 3a46d7a76eb..e7477a00f34 100644 --- a/packages/react-core/src/components/Modal/__tests__/Generated/__snapshots__/Modal.test.tsx.snap +++ b/packages/react-core/src/components/Modal/__tests__/Generated/__snapshots__/Modal.test.tsx.snap @@ -25,6 +25,8 @@ exports[`Modal should match snapshot (auto-generated) 1`] = ` isLarge={false} isOpen={false} isSmall={false} + modalBoxAriaDescribedById="" + modalContentAriaDescribedById="" onClose={[Function]} showClose={true} title="string" diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md index 7a39b4ae5e4..fd47727d307 100644 --- a/packages/react-core/src/components/Modal/examples/Modal.md +++ b/packages/react-core/src/components/Modal/examples/Modal.md @@ -319,7 +319,7 @@ class CustomHeaderFooter extends React.Component { isOpen={isModalOpen} header={header} title="custom header example" - ariaDescribedById="custom-header-example" + modalContentAriaDescribedBy="custom-header-example" onClose={this.handleModalToggle} footer={footer} isFooterLeftAligned @@ -372,7 +372,7 @@ class NoHeader extends React.Component { hideTitle={true} title="no header example" showClose={true} - ariaDescribedById="no-header-example" + modalContentAriaDescribedBy="no-header-example" onClose={this.handleModalToggle} footer={footer} isFooterLeftAligned diff --git a/packages/react-core/src/components/Nav/NavList.tsx b/packages/react-core/src/components/Nav/NavList.tsx index a941ca05ec5..16b31daad41 100644 --- a/packages/react-core/src/components/Nav/NavList.tsx +++ b/packages/react-core/src/components/Nav/NavList.tsx @@ -15,9 +15,9 @@ export interface NavListProps className?: string; /** Indicates the list type. */ variant?: 'default' | 'simple' | 'horizontal' | 'tertiary'; - /** aria-label for the left scroll button */ + /** Aria-label for the left scroll button */ ariaLeftScroll?: string; - /** aria-label for the right scroll button */ + /** Aria-label for the right scroll button */ ariaRightScroll?: string; } diff --git a/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx b/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx index d481c018dfb..5ba83bb4cff 100644 --- a/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx +++ b/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx @@ -30,8 +30,6 @@ export interface OptionsMenuProps extends React.HTMLProps { isText?: boolean; /** Flag to indicate if menu is groupped */ isGrouped?: boolean; - /** Provides an accessible name for the options menu */ - ariaLabelMenu?: string; /** Indicates where menu will be aligned horizontally */ position?: 'right' | 'left'; /** Menu will open up or open down from the options menu toggle */ diff --git a/packages/react-core/src/components/OptionsMenu/OptionsMenuItemGroup.tsx b/packages/react-core/src/components/OptionsMenu/OptionsMenuItemGroup.tsx index 3d723f42ef7..aed95f69d2c 100644 --- a/packages/react-core/src/components/OptionsMenu/OptionsMenuItemGroup.tsx +++ b/packages/react-core/src/components/OptionsMenu/OptionsMenuItemGroup.tsx @@ -8,7 +8,7 @@ export interface OptionsMenuItemGroupProps extends React.HTMLProps /** Classes applied to root element of the options menu items group */ className?: string; /** Provides an accessible name for the options menu items group */ - ariaLabel?: string; + 'aria-label'?: string; /** Optional title for the options menu items group */ groupTitle?: string | React.ReactNode; /** Flag indicating this options menu items group will be followed by a horizontal separator */ @@ -17,7 +17,7 @@ export interface OptionsMenuItemGroupProps extends React.HTMLProps export const OptionsMenuItemGroup: React.FunctionComponent = ({ className = '', - ariaLabel = '', + 'aria-label': ariaLabel = '', groupTitle = '', children = null, hasSeparator = false, diff --git a/packages/react-core/src/components/OptionsMenu/OptionsMenuToggle.tsx b/packages/react-core/src/components/OptionsMenu/OptionsMenuToggle.tsx index 1a22dc566b6..fd5182b2b1c 100644 --- a/packages/react-core/src/components/OptionsMenu/OptionsMenuToggle.tsx +++ b/packages/react-core/src/components/OptionsMenu/OptionsMenuToggle.tsx @@ -60,7 +60,7 @@ export const OptionsMenuToggle: React.FunctionComponent isActive={isActive} isFocused={isFocused} id={parentId ? `${parentId}-toggle` : `${contextId}-toggle`} - ariaHasPopup="listbox" + aria-haspopup="listbox" aria-label={ariaLabel} aria-expanded={isOpen} {...(toggleTemplate ? { children: toggleTemplate } : {})} diff --git a/packages/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx b/packages/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx index 78c43557b9b..0a9459597a1 100644 --- a/packages/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx +++ b/packages/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx @@ -32,7 +32,7 @@ export interface OptionsMenuToggleWithTextProps extends React.HTMLProps { isOpen={true} isText={false} isGrouped={false} - ariaLabelMenu={'string'} position={'right'} direction={'up'} /> diff --git a/packages/react-core/src/components/OptionsMenu/__tests__/Generated/OptionsMenuToggleWithText.test.tsx b/packages/react-core/src/components/OptionsMenu/__tests__/Generated/OptionsMenuToggleWithText.test.tsx index ace91b2f20d..3718dd4f774 100644 --- a/packages/react-core/src/components/OptionsMenu/__tests__/Generated/OptionsMenuToggleWithText.test.tsx +++ b/packages/react-core/src/components/OptionsMenu/__tests__/Generated/OptionsMenuToggleWithText.test.tsx @@ -24,7 +24,7 @@ it('OptionsMenuToggleWithText should match snapshot (auto-generated)', () => { isActive={false} isDisabled={false} parentRef={document.body} - ariaHasPopup={true} + aria-haspopup={true} aria-label={"'Options menu'"} /> ); diff --git a/packages/react-core/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenu.test.tsx.snap b/packages/react-core/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenu.test.tsx.snap index 8ec1853eba3..dad3323cb79 100644 --- a/packages/react-core/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenu.test.tsx.snap +++ b/packages/react-core/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenu.test.tsx.snap @@ -19,7 +19,6 @@ exports[`OptionsMenu should match snapshot (auto-generated) 1`] = ` } >
    ReactNode diff --git a/packages/react-core/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap b/packages/react-core/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap index 6c8076d63af..5233c055b42 100644 --- a/packages/react-core/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap +++ b/packages/react-core/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap @@ -103,7 +103,7 @@ exports[`optionsMenu expanded 1`] = ` id="expanded" > { ...(valueText ? { 'aria-valuetext': valueText } : { 'aria-describedby': `${this.id}-description` }) }; - const ariaProps: { [k: string]: any } = { + const progressBarAriaProps: AriaProps = { 'aria-describedby': `${this.id}-description`, 'aria-valuemin': min, 'aria-valuenow': value, @@ -83,7 +84,7 @@ export class Progress extends React.Component { }; if (valueText) { - ariaProps['aria-valuetext'] = valueText; + progressBarAriaProps['aria-valuetext'] = valueText; } const scaledValue = Math.min(100, Math.max(0, Math.floor(((value - min) / (max - min)) * 100))); @@ -108,7 +109,7 @@ export class Progress extends React.Component { label={label} variant={variant} measureLocation={measureLocation} - ariaProps={ariaProps} + progressBarAriaProps={progressBarAriaProps} />
); diff --git a/packages/react-core/src/components/Progress/ProgressBar.tsx b/packages/react-core/src/components/Progress/ProgressBar.tsx index 43983595bfe..b068ec761cb 100644 --- a/packages/react-core/src/components/Progress/ProgressBar.tsx +++ b/packages/react-core/src/components/Progress/ProgressBar.tsx @@ -18,17 +18,17 @@ export interface ProgressBarProps extends React.HTMLProps { /** Actual progress value. */ value: number; /** Minimal value of progress. */ - ariaProps?: AriaProps; + progressBarAriaProps?: AriaProps; } export const ProgressBar: React.FunctionComponent = ({ - ariaProps, + progressBarAriaProps, className = '', children = null, value, ...props }: ProgressBarProps) => ( -
+
{children}
diff --git a/packages/react-core/src/components/Progress/ProgressContainer.tsx b/packages/react-core/src/components/Progress/ProgressContainer.tsx index fb3ceb3369b..69a9c739dfd 100644 --- a/packages/react-core/src/components/Progress/ProgressContainer.tsx +++ b/packages/react-core/src/components/Progress/ProgressContainer.tsx @@ -20,7 +20,7 @@ export enum ProgressVariant { export interface ProgressContainerProps extends Omit, 'label'> { /** Properties needed for aria support */ - ariaProps?: AriaProps; + progressBarAriaProps?: AriaProps; /** Progress component DOM ID. */ parentId: string; /** Progress title. */ @@ -41,7 +41,7 @@ const variantToIcon: { [k: string]: React.FunctionComponent } = { }; export const ProgressContainer: React.FunctionComponent = ({ - ariaProps, + progressBarAriaProps, value, title = '', parentId, @@ -65,7 +65,7 @@ export const ProgressContainer: React.FunctionComponent )}
- + {measureLocation === ProgressMeasureLocation.inside && `${value}%`} diff --git a/packages/react-core/src/components/Progress/__tests__/Generated/__snapshots__/Progress.test.tsx.snap b/packages/react-core/src/components/Progress/__tests__/Generated/__snapshots__/Progress.test.tsx.snap index 5b81a345bb4..d920ef3e181 100644 --- a/packages/react-core/src/components/Progress/__tests__/Generated/__snapshots__/Progress.test.tsx.snap +++ b/packages/react-core/src/components/Progress/__tests__/Generated/__snapshots__/Progress.test.tsx.snap @@ -8,7 +8,10 @@ exports[`Progress should match snapshot (auto-generated) 1`] = ` role="progressbar" >
@@ -408,7 +408,7 @@ export class Select extends React.Component {selections && (selections as string[]).map(item => ( - onSelect(e, item)} closeBtnAriaLabel={ariaLabelRemove}> + onSelect(e, item)} closeBtnAriaLabel={removeSelectionAriaLabel}> {this.getDisplay(item, 'node')} ))} @@ -467,9 +467,9 @@ export class Select extends React.Component { /** Type of the toggle button, defaults to 'button' */ type?: 'reset' | 'button' | 'submit' | undefined; /** Id of label for the Select aria-labelledby */ - ariaLabelledBy?: string; + 'aria-labelledby'?: string; /** Label for toggle of select variants */ - ariaLabelToggle?: string; + 'aria-label'?: string; /** Flag for variant, determines toggle rules and interaction */ variant?: 'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti'; /** Flag indicating if select toggle has an clear button */ @@ -60,8 +60,8 @@ export class SelectToggle extends React.Component { isDisabled: false, hasClearButton: false, variant: 'single', - ariaLabelledBy: '', - ariaLabelToggle: '', + 'aria-labelledby': '', + 'aria-label': '', type: 'button', onToggle: () => {}, onEnter: () => {}, @@ -172,8 +172,8 @@ export class SelectToggle extends React.Component { id, type, hasClearButton, - ariaLabelledBy, - ariaLabelToggle, + 'aria-labelledby': ariaLabelledBy, + 'aria-label': ariaLabel, ...props } = this.props; /* eslint-enable @typescript-eslint/no-unused-vars */ @@ -248,7 +248,7 @@ export class SelectToggle extends React.Component { {...toggleProps} type={type} className={css(buttonStyles.button, styles.selectToggleButton, styles.modifiers.plain)} - aria-label={ariaLabelToggle} + aria-label={ariaLabel} onClick={_event => { _event.stopPropagation(); onToggle(!isExpanded); diff --git a/packages/react-core/src/components/Select/__tests__/Generated/Select.test.tsx b/packages/react-core/src/components/Select/__tests__/Generated/Select.test.tsx index c92ba135120..57577f15395 100644 --- a/packages/react-core/src/components/Select/__tests__/Generated/Select.test.tsx +++ b/packages/react-core/src/components/Select/__tests__/Generated/Select.test.tsx @@ -24,11 +24,11 @@ it('Select should match snapshot (auto-generated)', () => { selections={''} toggleId={'null'} aria-label={"''"} - ariaLabelledBy={"''"} - ariaLabelTypeAhead={"''"} - ariaLabelClear={"'Clear all'"} - ariaLabelToggle={"'Options menu'"} - ariaLabelRemove={"'Remove'"} + aria-labelledby={"''"} + typeAheadAriaLabel={"''"} + clearSelectionsAriaLabel={"'Clear all'"} + toggleAriaLabel={"'Options menu'"} + removeSelectionAriaLabel={"'Remove'"} onSelect={( event: React.MouseEvent | React.ChangeEvent, value: string | SelectOptionObject, diff --git a/packages/react-core/src/components/Select/__tests__/Generated/SelectToggle.test.tsx b/packages/react-core/src/components/Select/__tests__/Generated/SelectToggle.test.tsx index 0b18597019e..4f1f1bda236 100644 --- a/packages/react-core/src/components/Select/__tests__/Generated/SelectToggle.test.tsx +++ b/packages/react-core/src/components/Select/__tests__/Generated/SelectToggle.test.tsx @@ -25,8 +25,8 @@ it('SelectToggle should match snapshot (auto-generated)', () => { isPlain={false} isDisabled={false} type={'button'} - ariaLabelledBy={"''"} - ariaLabelToggle={"''"} + aria-labelledby={"''"} + aria-label={"''"} variant={'single'} /> ); diff --git a/packages/react-core/src/components/Select/__tests__/Generated/__snapshots__/Select.test.tsx.snap b/packages/react-core/src/components/Select/__tests__/Generated/__snapshots__/Select.test.tsx.snap index b5d5c7ab331..29933b7f92a 100644 --- a/packages/react-core/src/components/Select/__tests__/Generated/__snapshots__/Select.test.tsx.snap +++ b/packages/react-core/src/components/Select/__tests__/Generated/__snapshots__/Select.test.tsx.snap @@ -22,8 +22,8 @@ exports[`Select should match snapshot (auto-generated) 1`] = ` } > @@ -43,8 +43,8 @@ exports[`checkbox select renders checkbox select groups successfully - old class } > @@ -677,8 +677,8 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = ` } > @@ -1351,8 +1351,8 @@ exports[`checkbox select renders closed successfully - old classes 1`] = ` } > @@ -1506,8 +1506,8 @@ exports[`checkbox select renders closed successfully 1`] = ` } > @@ -1661,8 +1661,8 @@ exports[`checkbox select renders expanded successfully - old classes 1`] = ` } > @@ -2043,8 +2043,8 @@ exports[`checkbox select renders expanded successfully 1`] = ` } > @@ -2445,8 +2445,8 @@ exports[`checkbox select renders expanded successfully with custom objects 1`] = } > @@ -2822,8 +2822,8 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = ` } > @@ -3268,8 +3268,8 @@ exports[`select custom select filter filters properly 1`] = ` } > @@ -3666,8 +3666,8 @@ exports[`select renders select groups successfully 1`] = ` } > @@ -4260,8 +4260,8 @@ exports[`select renders up drection successfully 1`] = ` } > @@ -4419,8 +4419,8 @@ exports[`select single select renders closed successfully 1`] = ` } > @@ -4578,8 +4578,8 @@ exports[`select single select renders disabled successfully 1`] = ` } > @@ -4738,8 +4738,8 @@ exports[`select single select renders expanded successfully 1`] = ` } > @@ -5102,8 +5102,8 @@ exports[`select single select renders expanded successfully with custom objects } > @@ -5444,8 +5444,8 @@ exports[`select with custom content renders closed successfully 1`] = ` } > @@ -5598,8 +5598,8 @@ exports[`select with custom content renders expanded successfully 1`] = ` } > @@ -5818,8 +5818,8 @@ exports[`typeahead multi select renders closed successfully 1`] = ` } > @@ -6002,8 +6002,8 @@ exports[`typeahead multi select renders expanded successfully 1`] = ` } > @@ -6396,8 +6396,8 @@ exports[`typeahead multi select renders selected successfully 1`] = ` } > @@ -6791,8 +6791,8 @@ exports[`typeahead multi select renders selected successfully 1`] = ` Mrs @@ -7168,12 +7168,9 @@ exports[`typeahead multi select renders selected successfully 1`] = ` exports[`typeahead multi select test onChange 1`] = ` @@ -289,7 +289,7 @@ class GroupedCheckboxSelectInput extends React.Component { selections={selected} isExpanded={isExpanded} placeholderText="Filter by status" - ariaLabelledBy={titleId} + aria-labelledby={titleId} isGrouped > {this.options} @@ -390,7 +390,7 @@ class FilteringCheckboxSelectInput extends React.Component { selections={selected} isExpanded={isExpanded} placeholderText="Filter by status" - ariaLabelledBy={titleId} + aria-labelledby={titleId} onFilter={this.onFilter} onClear={this.clearSelection} isGrouped @@ -487,13 +487,13 @@ class TypeaheadSelectInput extends React.Component { {options} @@ -702,13 +702,13 @@ class MultiTypeaheadSelectInput extends React.Component { {this.options} @@ -904,14 +904,14 @@ class PlainSelectInput extends React.Component { @@ -548,7 +548,7 @@ export class SelectDemo extends Component { onClear={this.clearSelection} selections={typeaheadSelected} isExpanded={typeaheadIsExpanded} - ariaLabelledBy={titleId} + aria-labelledby={titleId} placeholderText="Select a state" isCreatable={typeaheadIsCreatable} onCreateOption={(typeaheadNewOptions && this.typeaheadCreateNew) || undefined} @@ -600,7 +600,7 @@ export class SelectDemo extends Component { onClear={this.clearSelection} selections={typeaheadMultiSelected} isExpanded={typeaheadMultiIsExpanded} - ariaLabelledBy={titleId} + aria-labelledby={titleId} placeholderText="Select a state" > {this.state.typeaheadOptions.map((option, index) => ( @@ -632,7 +632,7 @@ export class SelectDemo extends Component { onClear={this.clearSelection} selections={cdtypeaheadMultiSelected} isExpanded={cdtypeaheadMultiIsExpanded} - ariaLabelledBy={titleId} + aria-labelledby={titleId} placeholderText="Select a state" > {this.customTypeaheadOptions.map((option, index) => ( @@ -664,7 +664,7 @@ export class SelectDemo extends Component { onClear={this.clearSelection} selections={customTypeaheadMultiSelected} isExpanded={customTypeaheadMultiIsExpanded} - ariaLabelledBy={titleId} + aria-labelledby={titleId} placeholderText="Select a state" > {this.state.typeaheadOptions.map((option, index) => ( @@ -703,7 +703,7 @@ export class SelectDemo extends Component { selections={plainTypeaheadMultiSelected} isExpanded={plainTypeaheadMultiIsExpanded} isPlain={plainTypeaheadMultiIsPlain} - ariaLabelledBy={titleId} + aria-labelledby={titleId} placeholderText="Select a state" > {this.state.typeaheadOptions.map((option, index) => ( @@ -737,7 +737,7 @@ export class SelectDemo extends Component { aria-label="Select Input" onToggle={this.customContentOnToggle} isExpanded={customContentIsExpanded} - ariaLabelledBy={titleId} + aria-labelledby={titleId} direction={this.state.direction} maxHeight={200} placeholderText="Custom Content..." @@ -770,7 +770,7 @@ export class SelectDemo extends Component { onClear={() => null} selections={''} isExpanded={false} - ariaLabelledBy={titleId} + aria-labelledby={titleId} placeholderText="Select a state" > diff --git a/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap index d6b8878ed40..52683b178d5 100644 --- a/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap +++ b/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap @@ -4567,7 +4567,7 @@ exports[`Actions table 1`] = ` data-ouia-safe={true} >