initial round of jest fixes post v4 update, more aria-labels for modals, more i18nHash filtering to rid warnings, fix of malformed ToolbarContent import, update snapshots

This commit is contained in:
John Mitchell
2020-06-10 13:43:39 -04:00
parent 826b03b78e
commit 957c0b31bf
16 changed files with 711 additions and 872 deletions

View File

@@ -14,6 +14,7 @@ describe('<About />', () => {
test('close button calls onClose handler', () => { test('close button calls onClose handler', () => {
aboutWrapper = mountWithContexts(<About isOpen onClose={onClose} />); aboutWrapper = mountWithContexts(<About isOpen onClose={onClose} />);
console.log(aboutWrapper.debug())
closeButton = aboutWrapper.find('AboutModalBoxCloseButton Button'); closeButton = aboutWrapper.find('AboutModalBoxCloseButton Button');
closeButton.simulate('click'); closeButton.simulate('click');
expect(onClose).toBeCalled(); expect(onClose).toBeCalled();

View File

@@ -76,6 +76,7 @@ function AssociateModal({
<Modal <Modal
variant="large" variant="large"
title={title} title={title}
aria-label={i18n._(t`Association modal`)}
isOpen={isModalOpen} isOpen={isModalOpen}
onClose={handleClose} onClose={handleClose}
actions={[ actions={[

View File

@@ -11,7 +11,7 @@ describe('Background', () => {
</Background> </Background>
); );
expect(wrapper).toHaveLength(1); expect(wrapper).toHaveLength(1);
expect(wrapper.find('BackgroundImage')).toHaveLength(1); expect(wrapper.find('.pf-c-background-image')).toHaveLength(1);
expect(wrapper.find('#test')).toHaveLength(1); expect(wrapper.find('#test')).toHaveLength(1);
}); });
}); });

View File

@@ -4,7 +4,7 @@ import { t } from '@lingui/macro';
import { ChipGroup as PFChipGroup } from '@patternfly/react-core'; import { ChipGroup as PFChipGroup } from '@patternfly/react-core';
import { number, shape } from 'prop-types'; import { number, shape } from 'prop-types';
function ChipGroup({ i18n, numChips, totalChips, ...props }) { function ChipGroup({ i18n, numChips, totalChips, i18nHash, ...props }) {
return ( return (
<PFChipGroup <PFChipGroup
{...props} {...props}

View File

@@ -6,7 +6,7 @@ import { Chip } from '@patternfly/react-core';
import { Credential } from '../../types'; import { Credential } from '../../types';
import { toTitleCase } from '../../util/strings'; import { toTitleCase } from '../../util/strings';
function CredentialChip({ credential, i18n, ...props }) { function CredentialChip({ credential, i18n, i18nHash, ...props }) {
let type; let type;
if (credential.cloud) { if (credential.cloud) {
type = i18n._(t`Cloud`); type = i18n._(t`Cloud`);

View File

@@ -5,8 +5,8 @@ import { t } from '@lingui/macro';
import { import {
Checkbox, Checkbox,
Toolbar, Toolbar,
ToolbarContent as _ToolbarContent, ToolbarContent,
ToolbarGroup as _ToolbarGroup, ToolbarGroup,
ToolbarItem, ToolbarItem,
ToolbarToggleGroup, ToolbarToggleGroup,
} from '@patternfly/react-core'; } from '@patternfly/react-core';

View File

@@ -144,6 +144,7 @@ function Lookup(props) {
<Modal <Modal
variant="large" variant="large"
title={i18n._(t`Select ${header || i18n._(t`Items`)}`)} title={i18n._(t`Select ${header || i18n._(t`Items`)}`)}
aria-label={i18n._(t`Lookup modal`)}
isOpen={isModalOpen} isOpen={isModalOpen}
onClose={closeModal} onClose={closeModal}
actions={[ actions={[

View File

@@ -22,7 +22,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
} }
} }
> >
<DataListItem <Component
aria-labelledby="items-list-item-9000" aria-labelledby="items-list-item-9000"
id="9000" id="9000"
key="9000" key="9000"
@@ -32,14 +32,14 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
className="pf-c-data-list__item" className="pf-c-data-list__item"
id="9000" id="9000"
> >
<DataListItemRow <Component
key=".0" key=".0"
rowid="items-list-item-9000" rowid="items-list-item-9000"
> >
<div <div
className="pf-c-data-list__item-row" className="pf-c-data-list__item-row"
> >
<DataListItemCells <Component
dataListCells={ dataListCells={
Array [ Array [
<ForwardRef(Styled(PFDataListCell))> <ForwardRef(Styled(PFDataListCell))>
@@ -211,7 +211,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</StyledComponent> </StyledComponent>
</DataListCell> </DataListCell>
</div> </div>
</DataListItemCells> </Component>
<Styled(DataListAction) <Styled(DataListAction)
aria-label="actions" aria-label="actions"
aria-labelledby="items-list-item-9000" aria-labelledby="items-list-item-9000"
@@ -264,7 +264,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
className="pf-c-data-list__item-action sc-bwzfXH llKtln" className="pf-c-data-list__item-action sc-bwzfXH llKtln"
rowid="items-list-item-9000" rowid="items-list-item-9000"
> >
<Component <Switch
aria-label="Toggle notification start" aria-label="Toggle notification start"
id="notification-9000-started-toggle" id="notification-9000-started-toggle"
isChecked={false} isChecked={false}
@@ -273,73 +273,43 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Start" labelOff="Start"
onChange={[Function]} onChange={[Function]}
> >
<ComponentWithOuia <label
component={[Function]} className="pf-c-switch"
componentProps={ data-ouia-component-id={0}
Object { data-ouia-component-type="PF4/Switch"
"aria-label": "Toggle notification start", data-ouia-safe={true}
"id": "notification-9000-started-toggle", htmlFor="notification-9000-started-toggle"
"isChecked": false,
"isDisabled": false,
"label": "Start",
"labelOff": "Start",
"onChange": [Function],
}
}
consumerContext={null}
> >
<Switch <input
aria-label="Toggle notification start" aria-label="Toggle notification start"
className="" aria-labelledby={null}
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-started-toggle" id="notification-9000-started-toggle"
isChecked={false}
isDisabled={false}
label="Start"
labelOff="Start"
onChange={[Function]} onChange={[Function]}
ouiaContext={ type="checkbox"
Object { />
"isOuia": false, <span
"ouiaId": null, className="pf-c-switch__toggle"
} />
} <span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
> >
<label Start
className="pf-c-switch" </span>
htmlFor="notification-9000-started-toggle" <span
> aria-hidden="true"
<input className="pf-c-switch__label pf-m-off"
aria-label="Toggle notification start" id={null}
aria-labelledby={null} >
checked={false} Start
className="pf-c-switch__input" </span>
disabled={false} </label>
id="notification-9000-started-toggle" </Switch>
onChange={[Function]} <Switch
type="checkbox"
/>
<span
className="pf-c-switch__toggle"
/>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
>
Start
</span>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-off"
id={null}
>
Start
</span>
</label>
</Switch>
</ComponentWithOuia>
</Component>
<Component
aria-label="Toggle notification success" aria-label="Toggle notification success"
id="notification-9000-success-toggle" id="notification-9000-success-toggle"
isChecked={false} isChecked={false}
@@ -348,73 +318,43 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Success" labelOff="Success"
onChange={[Function]} onChange={[Function]}
> >
<ComponentWithOuia <label
component={[Function]} className="pf-c-switch"
componentProps={ data-ouia-component-id={1}
Object { data-ouia-component-type="PF4/Switch"
"aria-label": "Toggle notification success", data-ouia-safe={true}
"id": "notification-9000-success-toggle", htmlFor="notification-9000-success-toggle"
"isChecked": false,
"isDisabled": false,
"label": "Success",
"labelOff": "Success",
"onChange": [Function],
}
}
consumerContext={null}
> >
<Switch <input
aria-label="Toggle notification success" aria-label="Toggle notification success"
className="" aria-labelledby={null}
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-success-toggle" id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Success"
labelOff="Success"
onChange={[Function]} onChange={[Function]}
ouiaContext={ type="checkbox"
Object { />
"isOuia": false, <span
"ouiaId": null, className="pf-c-switch__toggle"
} />
} <span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
> >
<label Success
className="pf-c-switch" </span>
htmlFor="notification-9000-success-toggle" <span
> aria-hidden="true"
<input className="pf-c-switch__label pf-m-off"
aria-label="Toggle notification success" id={null}
aria-labelledby={null} >
checked={false} Success
className="pf-c-switch__input" </span>
disabled={false} </label>
id="notification-9000-success-toggle" </Switch>
onChange={[Function]} <Switch
type="checkbox"
/>
<span
className="pf-c-switch__toggle"
/>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
>
Success
</span>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-off"
id={null}
>
Success
</span>
</label>
</Switch>
</ComponentWithOuia>
</Component>
<Component
aria-label="Toggle notification failure" aria-label="Toggle notification failure"
id="notification-9000-error-toggle" id="notification-9000-error-toggle"
isChecked={false} isChecked={false}
@@ -423,79 +363,49 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Failure" labelOff="Failure"
onChange={[Function]} onChange={[Function]}
> >
<ComponentWithOuia <label
component={[Function]} className="pf-c-switch"
componentProps={ data-ouia-component-id={2}
Object { data-ouia-component-type="PF4/Switch"
"aria-label": "Toggle notification failure", data-ouia-safe={true}
"id": "notification-9000-error-toggle", htmlFor="notification-9000-error-toggle"
"isChecked": false,
"isDisabled": false,
"label": "Failure",
"labelOff": "Failure",
"onChange": [Function],
}
}
consumerContext={null}
> >
<Switch <input
aria-label="Toggle notification failure" aria-label="Toggle notification failure"
className="" aria-labelledby={null}
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-error-toggle" id="notification-9000-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
labelOff="Failure"
onChange={[Function]} onChange={[Function]}
ouiaContext={ type="checkbox"
Object { />
"isOuia": false, <span
"ouiaId": null, className="pf-c-switch__toggle"
} />
} <span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
> >
<label Failure
className="pf-c-switch" </span>
htmlFor="notification-9000-error-toggle" <span
> aria-hidden="true"
<input className="pf-c-switch__label pf-m-off"
aria-label="Toggle notification failure" id={null}
aria-labelledby={null} >
checked={false} Failure
className="pf-c-switch__input" </span>
disabled={false} </label>
id="notification-9000-error-toggle" </Switch>
onChange={[Function]}
type="checkbox"
/>
<span
className="pf-c-switch__toggle"
/>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
>
Failure
</span>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-off"
id={null}
>
Failure
</span>
</label>
</Switch>
</ComponentWithOuia>
</Component>
</div> </div>
</DataListAction> </DataListAction>
</StyledComponent> </StyledComponent>
</Styled(DataListAction)> </Styled(DataListAction)>
</div> </div>
</DataListItemRow> </Component>
</li> </li>
</DataListItem> </Component>
</NotificationListItem> </NotificationListItem>
`; `;

View File

@@ -49,11 +49,11 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
id="" id=""
role="tooltip" role="tooltip"
> >
<TooltipContent <Unknown
isLeftAligned={false} isLeftAligned={false}
> >
Select a row to delete Select a row to delete
</TooltipContent> </Unknown>
</div> </div>
} }
delay={ delay={
@@ -103,44 +103,20 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
onClick={[Function]} onClick={[Function]}
variant="danger" variant="danger"
> >
<ComponentWithOuia <button
component={[Function]} aria-disabled={null}
componentProps={ aria-label="Delete"
Object { className="pf-c-button pf-m-danger"
"aria-label": "Delete", data-ouia-component-id={null}
"children": "Delete", data-ouia-component-type="PF4/Button"
"isDisabled": true, data-ouia-safe={true}
"onClick": [Function], disabled={true}
"variant": "danger", onClick={[Function]}
} tabIndex={null}
} type="button"
consumerContext={null}
> >
<Button Delete
aria-label="Delete" </button>
isDisabled={true}
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
variant="danger"
>
<button
aria-disabled={null}
aria-label="Delete"
className="pf-c-button pf-m-danger"
disabled={true}
onClick={[Function]}
tabIndex={null}
type="button"
>
Delete
</button>
</Button>
</ComponentWithOuia>
</Component> </Component>
</div> </div>
<Portal <Portal
@@ -165,7 +141,7 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
id="" id=""
role="tooltip" role="tooltip"
> >
<TooltipContent <Component
isLeftAligned={false} isLeftAligned={false}
> >
<div <div
@@ -173,7 +149,7 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
> >
Select a row to delete Select a row to delete
</div> </div>
</TooltipContent> </Component>
</div> </div>
</Portal> </Portal>
</PopoverBase> </PopoverBase>

View File

@@ -32,7 +32,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
i18n={"/i18n/"} i18n={"/i18n/"}
onRoleDelete={[Function]} onRoleDelete={[Function]}
> >
<DataListItem <Component
aria-labelledby="access-list-item" aria-labelledby="access-list-item"
id="2" id="2"
key="2" key="2"
@@ -42,7 +42,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
className="pf-c-data-list__item" className="pf-c-data-list__item"
id="2" id="2"
> >
<DataListItemRow <Component
key=".0" key=".0"
rowid="access-list-item" rowid="access-list-item"
> >
@@ -53,8 +53,8 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
dataListCells={ dataListCells={
Array [ Array [
<ForwardRef(Styled(PFDataListCell))> <ForwardRef(Styled(PFDataListCell))>
<TextContent> <Unknown>
<Text <Unknown
component="h6" component="h6"
> >
<ForwardRef(ResourceAccessListItem___StyledLink) <ForwardRef(ResourceAccessListItem___StyledLink)
@@ -66,8 +66,8 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
> >
jane jane
</ForwardRef(ResourceAccessListItem___StyledLink)> </ForwardRef(ResourceAccessListItem___StyledLink)>
</Text> </Unknown>
</TextContent> </Unknown>
<ForwardRef(Styled(DetailList)) <ForwardRef(Styled(DetailList))
stacked={true} stacked={true}
> >
@@ -92,12 +92,17 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
numChips={5} numChips={5}
totalChips={1} totalChips={1}
> >
<Unknown <Chip
className=""
closeBtnAriaLabel="close"
component="div"
isOverflowChip={false}
isReadOnly={false} isReadOnly={false}
onClick={[Function]} onClick={[Function]}
tooltipPosition="top"
> >
Member Member
</Unknown> </Chip>
</WithI18n> </WithI18n>
} }
/> />
@@ -112,8 +117,8 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
dataListCells={ dataListCells={
Array [ Array [
<ForwardRef(Styled(PFDataListCell))> <ForwardRef(Styled(PFDataListCell))>
<TextContent> <Unknown>
<Text <Unknown
component="h6" component="h6"
> >
<ForwardRef(ResourceAccessListItem___StyledLink) <ForwardRef(ResourceAccessListItem___StyledLink)
@@ -125,8 +130,8 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
> >
jane jane
</ForwardRef(ResourceAccessListItem___StyledLink)> </ForwardRef(ResourceAccessListItem___StyledLink)>
</Text> </Unknown>
</TextContent> </Unknown>
<ForwardRef(Styled(DetailList)) <ForwardRef(Styled(DetailList))
stacked={true} stacked={true}
> >
@@ -151,12 +156,17 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
numChips={5} numChips={5}
totalChips={1} totalChips={1}
> >
<Unknown <Chip
className=""
closeBtnAriaLabel="close"
component="div"
isOverflowChip={false}
isReadOnly={false} isReadOnly={false}
onClick={[Function]} onClick={[Function]}
tooltipPosition="top"
> >
Member Member
</Unknown> </Chip>
</WithI18n> </WithI18n>
} }
/> />
@@ -189,13 +199,13 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
forwardedRef={null} forwardedRef={null}
rowid="access-list-item" rowid="access-list-item"
> >
<DataListItemCells <Component
className="ResourceAccessListItem__DataListItemCells-sc-658iqk-0 jCdAGK" className="ResourceAccessListItem__DataListItemCells-sc-658iqk-0 jCdAGK"
dataListCells={ dataListCells={
Array [ Array [
<ForwardRef(Styled(PFDataListCell))> <ForwardRef(Styled(PFDataListCell))>
<TextContent> <Unknown>
<Text <Unknown
component="h6" component="h6"
> >
<ForwardRef(ResourceAccessListItem___StyledLink) <ForwardRef(ResourceAccessListItem___StyledLink)
@@ -207,8 +217,8 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
> >
jane jane
</ForwardRef(ResourceAccessListItem___StyledLink)> </ForwardRef(ResourceAccessListItem___StyledLink)>
</Text> </Unknown>
</TextContent> </Unknown>
<ForwardRef(Styled(DetailList)) <ForwardRef(Styled(DetailList))
stacked={true} stacked={true}
> >
@@ -233,12 +243,17 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
numChips={5} numChips={5}
totalChips={1} totalChips={1}
> >
<Unknown <Chip
className=""
closeBtnAriaLabel="close"
component="div"
isOverflowChip={false}
isReadOnly={false} isReadOnly={false}
onClick={[Function]} onClick={[Function]}
tooltipPosition="top"
> >
Member Member
</Unknown> </Chip>
</WithI18n> </WithI18n>
} }
/> />
@@ -287,11 +302,11 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
<div <div
className="pf-c-data-list__cell sc-bdVaJa kruorc" className="pf-c-data-list__cell sc-bdVaJa kruorc"
> >
<TextContent> <Component>
<div <div
className="pf-c-content" className="pf-c-content"
> >
<Text <Component
component="h6" component="h6"
> >
<h6 <h6
@@ -378,9 +393,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
</StyledComponent> </StyledComponent>
</ResourceAccessListItem___StyledLink> </ResourceAccessListItem___StyledLink>
</h6> </h6>
</Text> </Component>
</div> </div>
</TextContent> </Component>
<Styled(DetailList) <Styled(DetailList)
stacked={true} stacked={true}
> >
@@ -421,7 +436,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
className="sc-bwzfXH kVCDmm" className="sc-bwzfXH kVCDmm"
stacked={true} stacked={true}
> >
<TextList <Component
className="sc-bwzfXH kVCDmm" className="sc-bwzfXH kVCDmm"
component="dl" component="dl"
> >
@@ -479,7 +494,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
data-cy={null} data-cy={null}
fullWidth={false} fullWidth={false}
> >
<TextListItem <Component
className="sc-htpNat iYJcPm" className="sc-htpNat iYJcPm"
component="dt" component="dt"
data-cy={null} data-cy={null}
@@ -491,7 +506,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
> >
Name Name
</dt> </dt>
</TextListItem> </Component>
</Component> </Component>
</StyledComponent> </StyledComponent>
</Styled(Component)> </Styled(Component)>
@@ -542,7 +557,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
data-cy={null} data-cy={null}
fullWidth={false} fullWidth={false}
> >
<TextListItem <Component
className="sc-bxivhb gxmPlV" className="sc-bxivhb gxmPlV"
component="dd" component="dd"
data-cy={null} data-cy={null}
@@ -554,13 +569,13 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
> >
jane brown jane brown
</dd> </dd>
</TextListItem> </Component>
</Component> </Component>
</StyledComponent> </StyledComponent>
</Styled(Component)> </Styled(Component)>
</Detail> </Detail>
</dl> </dl>
</TextList> </Component>
</DetailList> </DetailList>
</StyledComponent> </StyledComponent>
</Styled(DetailList)> </Styled(DetailList)>
@@ -644,7 +659,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
className="sc-bwzfXH kVCDmm" className="sc-bwzfXH kVCDmm"
stacked={true} stacked={true}
> >
<TextList <Component
className="sc-bwzfXH kVCDmm" className="sc-bwzfXH kVCDmm"
component="dl" component="dl"
> >
@@ -661,12 +676,17 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
numChips={5} numChips={5}
totalChips={1} totalChips={1}
> >
<Unknown <Chip
className=""
closeBtnAriaLabel="close"
component="div"
isOverflowChip={false}
isReadOnly={false} isReadOnly={false}
onClick={[Function]} onClick={[Function]}
tooltipPosition="top"
> >
Member Member
</Unknown> </Chip>
</WithI18n> </WithI18n>
} }
> >
@@ -714,7 +734,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
data-cy={null} data-cy={null}
fullWidth={false} fullWidth={false}
> >
<TextListItem <Component
className="sc-htpNat iYJcPm" className="sc-htpNat iYJcPm"
component="dt" component="dt"
data-cy={null} data-cy={null}
@@ -726,7 +746,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
> >
Team Roles Team Roles
</dt> </dt>
</TextListItem> </Component>
</Component> </Component>
</StyledComponent> </StyledComponent>
</Styled(Component)> </Styled(Component)>
@@ -777,7 +797,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
data-cy={null} data-cy={null}
fullWidth={false} fullWidth={false}
> >
<TextListItem <Component
className="sc-bxivhb gxmPlV" className="sc-bxivhb gxmPlV"
component="dd" component="dd"
data-cy={null} data-cy={null}
@@ -801,187 +821,125 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
totalChips={1} totalChips={1}
> >
<ChipGroup <ChipGroup
className="" aria-label="Chip group category"
categoryName=""
closeBtnAriaLabel="Close chip group"
collapsedText="-4 more" collapsedText="-4 more"
defaultIsOpen={false} defaultIsOpen={false}
expandedText="Show less" expandedText="Show less"
isClosable={false}
numChips={5} numChips={5}
withToolbar={false} onClick={[Function]}
tooltipPosition="top"
> >
<ul <GenerateId
className="pf-c-chip-group" prefix="pf-random-id-"
> >
<InnerChipGroup <div
className="" className="pf-c-chip-group"
collapsedText="-4 more"
defaultIsOpen={false}
expandedText="Show less"
isOpen={false}
numChips={5}
onToggleCollapse={[Function]}
withToolbar={false}
> >
<Component <ul
component="li" aria-label="Chip group category"
isReadOnly={false} className="pf-c-chip-group__list"
key=".$3" role="list"
onClick={[Function]}
> >
<ComponentWithOuia <li
component={[Function]} className="pf-c-chip-group__list-item"
componentProps={ key="0"
Object {
"children": "Member",
"component": "li",
"isReadOnly": false,
"onClick": [Function],
}
}
consumerContext={null}
> >
<Chip <Chip
className="" className=""
closeBtnAriaLabel="close" closeBtnAriaLabel="close"
component="li" component="div"
isOverflowChip={false} isOverflowChip={false}
isReadOnly={false} isReadOnly={false}
key=".$3"
onClick={[Function]} onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
tooltipPosition="top" tooltipPosition="top"
> >
<GenerateId <GenerateId
prefix="pf-random-id-" prefix="pf-random-id-"
> >
<li <div
className="pf-c-chip" className="pf-c-chip"
data-ouia-component-id={1}
data-ouia-component-type="PF4/Chip"
data-ouia-safe={true}
> >
<span <span
className="pf-c-chip__text" className="pf-c-chip__text"
id="pf-random-id-0" id="pf-random-id-1"
> >
Member Member
</span> </span>
<ChipButton <Component
aria-labelledby="remove_pf-random-id-0 pf-random-id-0" aria-label="close"
ariaLabel="close" aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
id="remove_pf-random-id-0" id="remove_pf-random-id-1"
onClick={[Function]} onClick={[Function]}
variant="plain"
> >
<Component <button
aria-disabled={null}
aria-label="close" aria-label="close"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0" aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
className="" className="pf-c-button pf-m-plain"
id="remove_pf-random-id-0" data-ouia-component-id={null}
data-ouia-component-type="PF4/Button"
data-ouia-safe={true}
disabled={false}
id="remove_pf-random-id-1"
onClick={[Function]} onClick={[Function]}
variant="plain" tabIndex={null}
type="button"
> >
<ComponentWithOuia <TimesIcon
component={[Function]} aria-hidden="true"
componentProps={ color="currentColor"
Object { noVerticalAlign={false}
"aria-label": "close", size="sm"
"aria-labelledby": "remove_pf-random-id-0 pf-random-id-0",
"children": <TimesCircleIcon
aria-hidden="true"
color="currentColor"
noVerticalAlign={false}
size="sm"
title={null}
/>,
"className": "",
"id": "remove_pf-random-id-0",
"onClick": [Function],
"variant": "plain",
}
}
consumerContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
> >
<Button <svg
aria-label="close" aria-hidden="true"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0" aria-labelledby={null}
className="" fill="currentColor"
id="remove_pf-random-id-0" height="1em"
onClick={[Function]} role="img"
ouiaContext={ style={
Object { Object {
"isOuia": false, "verticalAlign": "-0.125em",
"ouiaId": null,
} }
} }
variant="plain" viewBox="0 0 352 512"
width="1em"
> >
<button <path
aria-disabled={null} d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
aria-label="close" transform=""
aria-labelledby="remove_pf-random-id-0 pf-random-id-0" />
className="pf-c-button pf-m-plain" </svg>
disabled={false} </TimesIcon>
id="remove_pf-random-id-0" </button>
onClick={[Function]} </Component>
tabIndex={null} </div>
type="button"
>
<TimesCircleIcon
aria-hidden="true"
color="currentColor"
noVerticalAlign={false}
size="sm"
title={null}
>
<svg
aria-hidden="true"
aria-labelledby={null}
fill="currentColor"
height="1em"
role="img"
style={
Object {
"verticalAlign": "-0.125em",
}
}
viewBox="0 0 512 512"
width="1em"
>
<path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
transform=""
/>
</svg>
</TimesCircleIcon>
</button>
</Button>
</ComponentWithOuia>
</Component>
</ChipButton>
</li>
</GenerateId> </GenerateId>
</Chip> </Chip>
</ComponentWithOuia> </li>
</Component> </ul>
</InnerChipGroup> </div>
</ul> </GenerateId>
</ChipGroup> </ChipGroup>
</ChipGroup> </ChipGroup>
</I18n> </I18n>
</WithI18n> </WithI18n>
</dd> </dd>
</TextListItem> </Component>
</Component> </Component>
</StyledComponent> </StyledComponent>
</Styled(Component)> </Styled(Component)>
</Detail> </Detail>
</dl> </dl>
</TextList> </Component>
</DetailList> </DetailList>
</StyledComponent> </StyledComponent>
</Styled(DetailList)> </Styled(DetailList)>
@@ -990,12 +948,12 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
</StyledComponent> </StyledComponent>
</DataListCell> </DataListCell>
</div> </div>
</DataListItemCells> </Component>
</StyledComponent> </StyledComponent>
</ResourceAccessListItem__DataListItemCells> </ResourceAccessListItem__DataListItemCells>
</div> </div>
</DataListItemRow> </Component>
</li> </li>
</DataListItem> </Component>
</ResourceAccessListItem> </ResourceAccessListItem>
`; `;

View File

@@ -143,6 +143,7 @@ function HostEventModal({ onClose, hostEvent = {}, isOpen = false, i18n }) {
isOpen={isOpen} isOpen={isOpen}
onClose={onClose} onClose={onClose}
title={i18n._(t`Host Details`)} title={i18n._(t`Host Details`)}
aria-label={i18n._(t`Host details modal`)}
> >
<Tabs <Tabs
aria-label={i18n._(t`Tabs`)} aria-label={i18n._(t`Tabs`)}

View File

@@ -30,6 +30,7 @@ function SurveyPreviewModal({
return ( return (
<Modal <Modal
title={i18n._(t`Survey Preview`)} title={i18n._(t`Survey Preview`)}
aria-label={i18n._(t`Survey preview modal`)}
isOpen={isPreviewModalOpen} isOpen={isPreviewModalOpen}
onClose={() => onToggleModalOpen(false)} onClose={() => onToggleModalOpen(false)}
variant="small" variant="small"

View File

@@ -21,6 +21,7 @@ function LinkModal({ header, i18n, onConfirm }) {
header={header} header={header}
isOpen isOpen
title={i18n._(t`Workflow Link`)} title={i18n._(t`Workflow Link`)}
aria-label={i18n._(t`Workflow link modal`)}
onClose={() => dispatch({ type: 'CANCEL_LINK_MODAL' })} onClose={() => dispatch({ type: 'CANCEL_LINK_MODAL' })}
actions={[ actions={[
<Button <Button

View File

@@ -134,6 +134,7 @@ function NodeViewModal({ i18n }) {
variant="large" variant="large"
isOpen isOpen
title={unifiedJobTemplate.name} title={unifiedJobTemplate.name}
aria-label={i18n._(t`Workflow node view modal`)}
onClose={() => dispatch({ type: 'SET_NODE_TO_VIEW', value: null })} onClose={() => dispatch({ type: 'SET_NODE_TO_VIEW', value: null })}
actions={[ actions={[
<Button <Button

View File

@@ -12,6 +12,7 @@ function UnsavedChangesModal({ i18n, onSaveAndExit, onExit }) {
width={600} width={600}
isOpen isOpen
title={i18n._(t`Warning: Unsaved Changes`)} title={i18n._(t`Warning: Unsaved Changes`)}
aria-label={i18n._(t`Unsaved changes modal`)}
onClose={() => dispatch({ type: 'TOGGLE_UNSAVED_CHANGES_MODAL' })} onClose={() => dispatch({ type: 'TOGGLE_UNSAVED_CHANGES_MODAL' })}
actions={[ actions={[
<Button <Button