Skip to content

Commit 550d850

Browse files
seanforyou23seanforyou23
committed
fix(aria-props): align aria related property names #1529 
1 parent 354f1de commit 550d850

File tree

68 files changed

+595
-682
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+595
-682
lines changed

‎packages/react-core/src/components/AboutModal/AboutModal.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -135,11 +135,7 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
135135
}
136136

137137
return ReactDOM.createPortal(
138-
<AboutModalContainer
139-
ariaLabelledbyId={this.ariaLabelledBy}
140-
ariaDescribedById={this.ariaDescribedBy}
141-
{...props}
142-
/>,
138+
<AboutModalContainer aboutModalBoxHeaderId={this.ariaLabelledBy} aboutModalBoxContentId={this.ariaDescribedBy} {...props} />,
143139
container
144140
);
145141
}

‎packages/react-core/src/components/AboutModal/AboutModalContainer.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export interface AboutModalContainerProps extends React.HTMLProps<HTMLDivElement
3434
/** the URL of the image for the background. */
3535
backgroundImageSrc?: string;
3636
/** id to use for About Modal Box aria labeled by */
37-
ariaLabelledbyId: string;
37+
aboutModalBoxHeaderId: string;
3838
/** id to use for About Modal Box aria described by */
39-
ariaDescribedById: string;
39+
aboutModalBoxContentId: string;
4040
/** Set close button aria label */
4141
closeButtonAriaLabel?: string;
4242
}
@@ -51,9 +51,9 @@ export const AboutModalContainer: React.FunctionComponent<AboutModalContainerPro
5151
brandImageSrc,
5252
brandImageAlt,
5353
backgroundImageSrc,
54-
ariaLabelledbyId,
55-
ariaDescribedById,
5654
closeButtonAriaLabel,
55+
aboutModalBoxHeaderId,
56+
aboutModalBoxContentId,
5757
...props
5858
}: AboutModalContainerProps) => {
5959
if (!isOpen) {
@@ -62,13 +62,13 @@ export const AboutModalContainer: React.FunctionComponent<AboutModalContainerPro
6262
return (
6363
<Backdrop>
6464
<FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }} className={css(styles.bullseye)}>
65-
<AboutModalBox className={className} aria-labelledby={ariaLabelledbyId} aria-describedby={ariaDescribedById}>
65+
<AboutModalBox className={className} aria-labelledby={aboutModalBoxHeaderId} aria-describedby={aboutModalBoxContentId}>
6666
<AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
67-
<AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
68-
{productName && <AboutModalBoxHeader id={ariaLabelledbyId} productName={productName} />}
67+
<AboutModalBoxCloseButton onClose={onClose} aria-label={closeButtonAriaLabel} />
68+
{productName && <AboutModalBoxHeader id={aboutModalBoxHeaderId} productName={productName} />}
6969
<AboutModalBoxContent
7070
trademark={trademark}
71-
id={ariaDescribedById}
71+
id={aboutModalBoxContentId}
7272
noAboutModalBoxContentContainer={false}
7373
{...props}
7474
>

‎packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ test('modal does not call onClose for esc key if it is not open', () => {
4848
expect(props.onClose).not.toBeCalled();
4949
});
5050

51-
test('Each modal is given new ariaDescribedById and ariaLabelledbyId', () => {
51+
test('Each modal is given new aria-describedby and aria-labelledby', () => {
5252
const first = new AboutModal(props);
5353
const second = new AboutModal(props);
5454
expect(first.ariaLabelledBy).not.toBe(second.ariaLabelledBy);

‎packages/react-core/src/components/AboutModal/__tests__/AboutModalContainer.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ const props = {
99
brandImageSrc: 'brandImg...',
1010
brandImageAlt: 'Brand Image',
1111
backgroundImageSrc: 'backgroundImageSrc...',
12-
ariaLabelledbyId: 'ariaLablledbyId',
13-
ariaDescribedById: 'ariaDescribedById'
12+
'aria-labelledby': 'ariaLablledbyId',
13+
'aria-describedby': 'ariaDescribedById'
1414
};
1515
test('About Modal Container Test simple', () => {
1616
const view = shallow(<AboutModalContainer {...props}>This is ModalBox content</AboutModalContainer>);

‎packages/react-core/src/components/AboutModal/__tests__/Generated/AboutModalContainer.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ it('AboutModalContainer should match snapshot (auto-generated)', () => {
1919
brandImageSrc={'string'}
2020
brandImageAlt={'string'}
2121
backgroundImageSrc={'string'}
22-
ariaLabelledbyId={'string'}
23-
ariaDescribedById={'string'}
22+
aria-labelledby={'string'}
23+
aria-describedby={'string'}
2424
/>
2525
);
2626
expect(view).toMatchSnapshot();

‎packages/react-core/src/components/AboutModal/__tests__/Generated/__snapshots__/AboutModal.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ exports[`AboutModal should match snapshot (auto-generated) 1`] = `
55
containerInfo={<div />}
66
>
77
<AboutModalContainer
8-
ariaDescribedById="pf-about-modal-content-0"
9-
ariaLabelledbyId="pf-about-modal-title-0"
8+
aboutModalBoxContentId="pf-about-modal-content-0"
9+
aboutModalBoxHeaderId="pf-about-modal-title-0"
1010
backgroundImageSrc="''"
1111
brandImageAlt="string"
1212
brandImageSrc="string"

‎packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalContainer.test.tsx.snap‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ exports[`About Modal Container Test isOpen 1`] = `
1515
tag="div"
1616
>
1717
<AboutModalBox
18-
aria-describedby="ariaDescribedById"
19-
aria-labelledby="ariaLablledbyId"
2018
className=""
2119
>
2220
<AboutModalBoxBrand
@@ -27,11 +25,11 @@ exports[`About Modal Container Test isOpen 1`] = `
2725
onClose={[Function]}
2826
/>
2927
<AboutModalBoxHeader
30-
id="ariaLablledbyId"
3128
productName="Product Name"
3229
/>
3330
<AboutModalBoxContent
34-
id="ariaDescribedById"
31+
aria-describedby="ariaDescribedById"
32+
aria-labelledby="ariaLablledbyId"
3533
noAboutModalBoxContentContainer={false}
3634
title="Test Modal Container title"
3735
trademark="Trademark and copyright information here"

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -246,8 +246,8 @@ exports[`ApplicationLauncher custom icon 1`] = `
246246
className="pf-c-app-launcher pf-m-expanded"
247247
>
248248
<DropdownToggle
249+
aria-haspopup={true}
249250
aria-label="Application launcher"
250-
ariaHasPopup={true}
251251
iconComponent={null}
252252
id="pf-toggle-id-5"
253253
isDisabled={false}
@@ -373,8 +373,8 @@ exports[`ApplicationLauncher custom icon 1`] = `
373373
}
374374
>
375375
<Toggle
376+
aria-haspopup={true}
376377
aria-label="Application launcher"
377-
ariaHasPopup={true}
378378
bubbleEvent={false}
379379
className=""
380380
id="pf-toggle-id-5"
@@ -1114,8 +1114,8 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = `
11141114
className="pf-c-app-launcher pf-m-top pf-m-align-right"
11151115
>
11161116
<DropdownToggle
1117+
aria-haspopup={true}
11171118
aria-label="Application launcher"
1118-
ariaHasPopup={true}
11191119
iconComponent={null}
11201120
id="pf-toggle-id-3"
11211121
isDisabled={false}
@@ -1160,8 +1160,8 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = `
11601160
}
11611161
>
11621162
<Toggle
1163+
aria-haspopup={true}
11631164
aria-label="Application launcher"
1164-
ariaHasPopup={true}
11651165
bubbleEvent={false}
11661166
className=""
11671167
id="pf-toggle-id-3"
@@ -1503,8 +1503,8 @@ exports[`ApplicationLauncher dropup 1`] = `
15031503
className="pf-c-app-launcher pf-m-top"
15041504
>
15051505
<DropdownToggle
1506+
aria-haspopup={true}
15061507
aria-label="Application launcher"
1507-
ariaHasPopup={true}
15081508
iconComponent={null}
15091509
id="pf-toggle-id-2"
15101510
isDisabled={false}
@@ -1549,8 +1549,8 @@ exports[`ApplicationLauncher dropup 1`] = `
15491549
}
15501550
>
15511551
<Toggle
1552+
aria-haspopup={true}
15521553
aria-label="Application launcher"
1553-
ariaHasPopup={true}
15541554
bubbleEvent={false}
15551555
className=""
15561556
id="pf-toggle-id-2"
@@ -1892,8 +1892,8 @@ exports[`ApplicationLauncher expanded 1`] = `
18921892
className="pf-c-app-launcher pf-m-expanded"
18931893
>
18941894
<DropdownToggle
1895+
aria-haspopup={true}
18951896
aria-label="Application launcher"
1896-
ariaHasPopup={true}
18971897
iconComponent={null}
18981898
id="pf-toggle-id-4"
18991899
isDisabled={false}
@@ -2018,8 +2018,8 @@ exports[`ApplicationLauncher expanded 1`] = `
20182018
}
20192019
>
20202020
<Toggle
2021+
aria-haspopup={true}
20212022
aria-label="Application launcher"
2022-
ariaHasPopup={true}
20232023
bubbleEvent={false}
20242024
className=""
20252025
id="pf-toggle-id-4"
@@ -2756,8 +2756,8 @@ exports[`ApplicationLauncher regular 1`] = `
27562756
className="pf-c-app-launcher"
27572757
>
27582758
<DropdownToggle
2759+
aria-haspopup={true}
27592760
aria-label="Application launcher"
2760-
ariaHasPopup={true}
27612761
iconComponent={null}
27622762
id="pf-toggle-id-0"
27632763
isDisabled={false}
@@ -2802,8 +2802,8 @@ exports[`ApplicationLauncher regular 1`] = `
28022802
}
28032803
>
28042804
<Toggle
2805+
aria-haspopup={true}
28052806
aria-label="Application launcher"
2806-
ariaHasPopup={true}
28072807
bubbleEvent={false}
28082808
className=""
28092809
id="pf-toggle-id-0"
@@ -3145,8 +3145,8 @@ exports[`ApplicationLauncher right aligned 1`] = `
31453145
className="pf-c-app-launcher pf-m-align-right"
31463146
>
31473147
<DropdownToggle
3148+
aria-haspopup={true}
31483149
aria-label="Application launcher"
3149-
ariaHasPopup={true}
31503150
iconComponent={null}
31513151
id="pf-toggle-id-1"
31523152
isDisabled={false}
@@ -3191,8 +3191,8 @@ exports[`ApplicationLauncher right aligned 1`] = `
31913191
}
31923192
>
31933193
<Toggle
3194+
aria-haspopup={true}
31943195
aria-label="Application launcher"
3195-
ariaHasPopup={true}
31963196
bubbleEvent={false}
31973197
className=""
31983198
id="pf-toggle-id-1"

‎packages/react-core/src/components/ChipGroup/Chip.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ class Chip extends React.Component<ChipProps & InjectedOuiaProps, ChipState> {
103103
{!isReadOnly && (
104104
<ChipButton
105105
onClick={onClick}
106-
ariaLabel={closeBtnAriaLabel}
106+
aria-label={closeBtnAriaLabel}
107107
id={`remove_${randomId}`}
108108
aria-labelledby={`remove_${randomId} ${randomId}`}
109109
>
@@ -128,7 +128,7 @@ class Chip extends React.Component<ChipProps & InjectedOuiaProps, ChipState> {
128128
{!isReadOnly && (
129129
<ChipButton
130130
onClick={onClick}
131-
ariaLabel={closeBtnAriaLabel}
131+
aria-label={closeBtnAriaLabel}
132132
id={`remove_${randomId}`}
133133
aria-labelledby={`remove_${randomId} ${randomId}`}
134134
>

‎packages/react-core/src/components/ChipGroup/ChipButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Button, ButtonProps } from '../Button';
33

44
export interface ChipButtonProps extends ButtonProps {
55
/** Aria label for chip button */
6-
ariaLabel?: string;
6+
'aria-label'?: string;
77
/** Content rendered inside the chip item */
88
children?: React.ReactNode;
99
/** Additional classes added to the chip item */
@@ -13,7 +13,7 @@ export interface ChipButtonProps extends ButtonProps {
1313
}
1414

1515
export const ChipButton: React.FunctionComponent<ChipButtonProps> = ({
16-
ariaLabel = 'close',
16+
'aria-label': ariaLabel = 'close',
1717
children = null,
1818
className = '',
1919
onClick = () => undefined,

0 commit comments

Comments
 (0)