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"
@@ -263,49 +263,21 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
<div <div
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
aria-label="Toggle notification start"
id="notification-9000-started-toggle"
isChecked={false}
isDisabled={false}
label="Start"
labelOff="Start"
onChange={[Function]}
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "Toggle notification start",
"id": "notification-9000-started-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Start",
"labelOff": "Start",
"onChange": [Function],
}
}
consumerContext={null}
> >
<Switch <Switch
aria-label="Toggle notification start" aria-label="Toggle notification start"
className=""
id="notification-9000-started-toggle" id="notification-9000-started-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
label="Start" label="Start"
labelOff="Start" labelOff="Start"
onChange={[Function]} onChange={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
> >
<label <label
className="pf-c-switch" className="pf-c-switch"
data-ouia-component-id={0}
data-ouia-component-type="PF4/Switch"
data-ouia-safe={true}
htmlFor="notification-9000-started-toggle" htmlFor="notification-9000-started-toggle"
> >
<input <input
@@ -337,50 +309,20 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</span> </span>
</label> </label>
</Switch> </Switch>
</ComponentWithOuia>
</Component>
<Component
aria-label="Toggle notification success"
id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Success"
labelOff="Success"
onChange={[Function]}
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "Toggle notification success",
"id": "notification-9000-success-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Success",
"labelOff": "Success",
"onChange": [Function],
}
}
consumerContext={null}
>
<Switch <Switch
aria-label="Toggle notification success" aria-label="Toggle notification success"
className=""
id="notification-9000-success-toggle" id="notification-9000-success-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
label="Success" label="Success"
labelOff="Success" labelOff="Success"
onChange={[Function]} onChange={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
> >
<label <label
className="pf-c-switch" className="pf-c-switch"
data-ouia-component-id={1}
data-ouia-component-type="PF4/Switch"
data-ouia-safe={true}
htmlFor="notification-9000-success-toggle" htmlFor="notification-9000-success-toggle"
> >
<input <input
@@ -412,50 +354,20 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</span> </span>
</label> </label>
</Switch> </Switch>
</ComponentWithOuia>
</Component>
<Component
aria-label="Toggle notification failure"
id="notification-9000-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
labelOff="Failure"
onChange={[Function]}
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "Toggle notification failure",
"id": "notification-9000-error-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Failure",
"labelOff": "Failure",
"onChange": [Function],
}
}
consumerContext={null}
>
<Switch <Switch
aria-label="Toggle notification failure" aria-label="Toggle notification failure"
className=""
id="notification-9000-error-toggle" id="notification-9000-error-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
label="Failure" label="Failure"
labelOff="Failure" labelOff="Failure"
onChange={[Function]} onChange={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
> >
<label <label
className="pf-c-switch" className="pf-c-switch"
data-ouia-component-id={2}
data-ouia-component-type="PF4/Switch"
data-ouia-safe={true}
htmlFor="notification-9000-error-toggle" htmlFor="notification-9000-error-toggle"
> >
<input <input
@@ -487,15 +399,13 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</span> </span>
</label> </label>
</Switch> </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={
@@ -102,36 +102,14 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
isDisabled={true} isDisabled={true}
onClick={[Function]} onClick={[Function]}
variant="danger" variant="danger"
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "Delete",
"children": "Delete",
"isDisabled": true,
"onClick": [Function],
"variant": "danger",
}
}
consumerContext={null}
>
<Button
aria-label="Delete"
isDisabled={true}
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
variant="danger"
> >
<button <button
aria-disabled={null} aria-disabled={null}
aria-label="Delete" aria-label="Delete"
className="pf-c-button pf-m-danger" className="pf-c-button pf-m-danger"
data-ouia-component-id={null}
data-ouia-component-type="PF4/Button"
data-ouia-safe={true}
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
tabIndex={null} tabIndex={null}
@@ -139,8 +117,6 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
> >
Delete Delete
</button> </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

@@ -16,6 +16,33 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
} }
} }
username="jane" username="jane"
>
<WithI18n
actions={
Array [
<Unknown
aria-label="Confirm delete"
onClick={[Function]}
variant="danger"
>
Delete
</Unknown>,
<Unknown
onClick={[Function]}
variant="secondary"
>
Cancel
</Unknown>,
]
}
isOpen={true}
onClose={[Function]}
title="Remove Team Access"
variant="danger"
>
<I18n
update={true}
withHash={true}
> >
<AlertModal <AlertModal
actions={ actions={
@@ -35,6 +62,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
</Unknown>, </Unknown>,
] ]
} }
i18n={"/i18n/"}
isOpen={true} isOpen={true}
onClose={[Function]} onClose={[Function]}
title="Remove Team Access" title="Remove Team Access"
@@ -70,15 +98,19 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
class="pf-l-bullseye" class="pf-l-bullseye"
> >
<div <div
aria-describedby="pf-modal-0" aria-describedby="pf-modal-part-2"
aria-label="Remove Team Access" aria-label="Alert modal"
aria-labelledby="pf-modal-part-0 alert-modal-header-label pf-modal-part-1"
aria-modal="true" aria-modal="true"
class="pf-c-modal-box pf-m-sm" class="pf-c-modal-box pf-m-sm"
id="pf-modal-part-0"
role="dialog" role="dialog"
> >
<button <button
aria-label="Close" aria-label="Close"
class="pf-c-button pf-m-plain" class="pf-c-button pf-m-plain"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button" type="button"
> >
<svg <svg
@@ -96,8 +128,8 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
/> />
</svg> </svg>
</button> </button>
<div <header
class="pf-c-title" class="pf-c-modal-box__header"
> >
<div <div
class="AlertModal__Header-l9z1bu-0 hQFWHX" class="AlertModal__Header-l9z1bu-0 hQFWHX"
@@ -117,67 +149,74 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
transform="" transform=""
/> />
</svg> </svg>
<h1 <h2
class="pf-c-title pf-m-2xl" class="pf-c-title pf-m-2xl"
id="alert-modal-header-label"
> >
Remove Team Access Remove Team Access
</h1> </h2>
</div>
</div> </div>
</header>
<div <div
class="pf-c-modal-box__body" class="pf-c-modal-box__body"
id="pf-modal-0" id="pf-modal-part-2"
> >
Are you sure you want to remove Member access from The Team? Doing so affects all members of the team. Are you sure you want to remove Member access from The Team? Doing so affects all members of the team.
<br /> <br />
<br /> <br />
If you only want to remove access for this particular user, please remove them from the team. If you only want to remove access for this particular user, please remove them from the team.
</div> </div>
<div <footer
class="pf-c-modal-box__footer pf-m-align-left" class="pf-c-modal-box__footer"
> >
<button <button
aria-label="Confirm delete" aria-label="Confirm delete"
class="pf-c-button pf-m-danger" class="pf-c-button pf-m-danger"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button" type="button"
> >
Delete Delete
</button> </button>
<button <button
class="pf-c-button pf-m-secondary" class="pf-c-button pf-m-secondary"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button" type="button"
> >
Cancel Cancel
</button> </button>
</div> </footer>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
} }
ariaDescribedById="" aria-describedby=""
aria-label="Alert modal"
aria-labelledby="alert-modal-header-label"
className="" className=""
hasNoBodyWrapper={false}
header={ header={
<ForwardRef(AlertModal__Header)> <ForwardRef(AlertModal__Header)>
<ForwardRef(AlertModal___StyledExclamationCircleIcon) <ForwardRef(AlertModal___StyledExclamationCircleIcon)
size="lg" size="lg"
/> />
<Title <Unknown
headingLevel="h2"
id="alert-modal-header-label"
size="2xl" size="2xl"
> >
Remove Team Access Remove Team Access
</Title> </Unknown>
</ForwardRef(AlertModal__Header)> </ForwardRef(AlertModal__Header)>
} }
hideTitle={false}
isFooterLeftAligned={true}
isLarge={false}
isOpen={true} isOpen={true}
isSmall={true}
onClose={[Function]} onClose={[Function]}
showClose={true} showClose={true}
title="Remove Team Access" title="Remove Team Access"
variant="small"
> >
<Portal <Portal
containerInfo={ containerInfo={
@@ -189,15 +228,19 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
class="pf-l-bullseye" class="pf-l-bullseye"
> >
<div <div
aria-describedby="pf-modal-0" aria-describedby="pf-modal-part-2"
aria-label="Remove Team Access" aria-label="Alert modal"
aria-labelledby="pf-modal-part-0 alert-modal-header-label pf-modal-part-1"
aria-modal="true" aria-modal="true"
class="pf-c-modal-box pf-m-sm" class="pf-c-modal-box pf-m-sm"
id="pf-modal-part-0"
role="dialog" role="dialog"
> >
<button <button
aria-label="Close" aria-label="Close"
class="pf-c-button pf-m-plain" class="pf-c-button pf-m-plain"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button" type="button"
> >
<svg <svg
@@ -215,8 +258,8 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
/> />
</svg> </svg>
</button> </button>
<div <header
class="pf-c-title" class="pf-c-modal-box__header"
> >
<div <div
class="AlertModal__Header-l9z1bu-0 hQFWHX" class="AlertModal__Header-l9z1bu-0 hQFWHX"
@@ -236,46 +279,51 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
transform="" transform=""
/> />
</svg> </svg>
<h1 <h2
class="pf-c-title pf-m-2xl" class="pf-c-title pf-m-2xl"
id="alert-modal-header-label"
> >
Remove Team Access Remove Team Access
</h1> </h2>
</div>
</div> </div>
</header>
<div <div
class="pf-c-modal-box__body" class="pf-c-modal-box__body"
id="pf-modal-0" id="pf-modal-part-2"
> >
Are you sure you want to remove Member access from The Team? Doing so affects all members of the team. Are you sure you want to remove Member access from The Team? Doing so affects all members of the team.
<br /> <br />
<br /> <br />
If you only want to remove access for this particular user, please remove them from the team. If you only want to remove access for this particular user, please remove them from the team.
</div> </div>
<div <footer
class="pf-c-modal-box__footer pf-m-align-left" class="pf-c-modal-box__footer"
> >
<button <button
aria-label="Confirm delete" aria-label="Confirm delete"
class="pf-c-button pf-m-danger" class="pf-c-button pf-m-danger"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button" type="button"
> >
Delete Delete
</button> </button>
<button <button
class="pf-c-button pf-m-secondary" class="pf-c-button pf-m-secondary"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button" type="button"
> >
Cancel Cancel
</button> </button>
</div> </footer>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
} }
> >
<ModalContent <Component
actions={ actions={
Array [ Array [
<Unknown <Unknown
@@ -293,31 +341,35 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
</Unknown>, </Unknown>,
] ]
} }
ariaDescribedById="" aria-describedby=""
aria-label="Alert modal"
aria-labelledby="alert-modal-header-label"
boxId="pf-modal-part-0"
className="" className=""
descriptorId="pf-modal-part-2"
hasNoBodyWrapper={false}
header={ header={
<ForwardRef(AlertModal__Header)> <ForwardRef(AlertModal__Header)>
<ForwardRef(AlertModal___StyledExclamationCircleIcon) <ForwardRef(AlertModal___StyledExclamationCircleIcon)
size="lg" size="lg"
/> />
<Title <Unknown
headingLevel="h2"
id="alert-modal-header-label"
size="2xl" size="2xl"
> >
Remove Team Access Remove Team Access
</Title> </Unknown>
</ForwardRef(AlertModal__Header)> </ForwardRef(AlertModal__Header)>
} }
hideTitle={false}
id="pf-modal-0"
isFooterLeftAligned={true}
isLarge={false}
isOpen={true} isOpen={true}
isSmall={true} labelId="pf-modal-part-1"
onClose={[Function]} onClose={[Function]}
showClose={true} showClose={true}
title="Remove Team Access" title="Remove Team Access"
variant="small"
> >
<Backdrop> <Component>
<div <div
className="pf-c-backdrop" className="pf-c-backdrop"
> >
@@ -334,23 +386,26 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
<div <div
className="pf-l-bullseye" className="pf-l-bullseye"
> >
<ModalBox <Component
aria-describedby="pf-modal-part-2"
aria-label="Alert modal"
aria-labelledby="pf-modal-part-0 alert-modal-header-label pf-modal-part-1"
className="" className=""
id="pf-modal-0" id="pf-modal-part-0"
isLarge={false}
isSmall={true}
style={Object {}} style={Object {}}
title="Remove Team Access" variant="small"
> >
<div <div
aria-describedby="pf-modal-0" aria-describedby="pf-modal-part-2"
aria-label="Remove Team Access" aria-label="Alert modal"
aria-labelledby="pf-modal-part-0 alert-modal-header-label pf-modal-part-1"
aria-modal="true" aria-modal="true"
className="pf-c-modal-box pf-m-sm" className="pf-c-modal-box pf-m-sm"
id="pf-modal-part-0"
role="dialog" role="dialog"
style={Object {}} style={Object {}}
> >
<ModalBoxCloseButton <Component
onClose={[Function]} onClose={[Function]}
> >
<Component <Component
@@ -358,41 +413,14 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
className="" className=""
onClick={[Function]} onClick={[Function]}
variant="plain" variant="plain"
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "Close",
"children": <TimesIcon
color="currentColor"
noVerticalAlign={false}
size="sm"
title={null}
/>,
"className": "",
"onClick": [Function],
"variant": "plain",
}
}
consumerContext={null}
>
<Button
aria-label="Close"
className=""
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
variant="plain"
> >
<button <button
aria-disabled={null} aria-disabled={null}
aria-label="Close" aria-label="Close"
className="pf-c-button pf-m-plain" className="pf-c-button pf-m-plain"
data-ouia-component-id={null}
data-ouia-component-type="PF4/Button"
data-ouia-safe={true}
disabled={false} disabled={false}
onClick={[Function]} onClick={[Function]}
tabIndex={null} tabIndex={null}
@@ -402,7 +430,6 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
color="currentColor" color="currentColor"
noVerticalAlign={false} noVerticalAlign={false}
size="sm" size="sm"
title={null}
> >
<svg <svg
aria-hidden={true} aria-hidden={true}
@@ -425,12 +452,11 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
</svg> </svg>
</TimesIcon> </TimesIcon>
</button> </button>
</Button>
</ComponentWithOuia>
</Component> </Component>
</ModalBoxCloseButton> </Component>
<div <Component>
className="pf-c-title" <header
className="pf-c-modal-box__header"
> >
<AlertModal__Header> <AlertModal__Header>
<StyledComponent <StyledComponent
@@ -495,7 +521,6 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
color="currentColor" color="currentColor"
noVerticalAlign={false} noVerticalAlign={false}
size="lg" size="lg"
title={null}
> >
<svg <svg
aria-hidden={true} aria-hidden={true}
@@ -520,71 +545,53 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
</ExclamationCircleIcon> </ExclamationCircleIcon>
</StyledComponent> </StyledComponent>
</AlertModal___StyledExclamationCircleIcon> </AlertModal___StyledExclamationCircleIcon>
<Title <Component
headingLevel="h2"
id="alert-modal-header-label"
size="2xl" size="2xl"
> >
<h1 <h2
className="pf-c-title pf-m-2xl" className="pf-c-title pf-m-2xl"
id="alert-modal-header-label"
> >
Remove Team Access Remove Team Access
</h1> </h2>
</Title> </Component>
</div> </div>
</StyledComponent> </StyledComponent>
</AlertModal__Header> </AlertModal__Header>
</div> </header>
<ModalBoxBody </Component>
id="pf-modal-0" <Component
id="pf-modal-part-2"
> >
<div <div
className="pf-c-modal-box__body" className="pf-c-modal-box__body"
id="pf-modal-0" id="pf-modal-part-2"
> >
Are you sure you want to remove Member access from The Team? Doing so affects all members of the team. Are you sure you want to remove Member access from The Team? Doing so affects all members of the team.
<br /> <br />
<br /> <br />
If you only want to remove access for this particular user, please remove them from the team. If you only want to remove access for this particular user, please remove them from the team.
</div> </div>
</ModalBoxBody> </Component>
<ModalBoxFooter <Component>
isLeftAligned={true} <footer
> className="pf-c-modal-box__footer"
<div
className="pf-c-modal-box__footer pf-m-align-left"
> >
<Component <Component
aria-label="Confirm delete" aria-label="Confirm delete"
key="delete" key="delete"
onClick={[Function]} onClick={[Function]}
variant="danger" variant="danger"
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "Confirm delete",
"children": "Delete",
"onClick": [Function],
"variant": "danger",
}
}
consumerContext={null}
>
<Button
aria-label="Confirm delete"
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
variant="danger"
> >
<button <button
aria-disabled={null} aria-disabled={null}
aria-label="Confirm delete" aria-label="Confirm delete"
className="pf-c-button pf-m-danger" className="pf-c-button pf-m-danger"
data-ouia-component-id={null}
data-ouia-component-type="PF4/Button"
data-ouia-safe={true}
disabled={false} disabled={false}
onClick={[Function]} onClick={[Function]}
tabIndex={null} tabIndex={null}
@@ -592,39 +599,19 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
> >
Delete Delete
</button> </button>
</Button>
</ComponentWithOuia>
</Component> </Component>
<Component <Component
key="cancel" key="cancel"
onClick={[Function]} onClick={[Function]}
variant="secondary" variant="secondary"
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"children": "Cancel",
"onClick": [Function],
"variant": "secondary",
}
}
consumerContext={null}
>
<Button
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
variant="secondary"
> >
<button <button
aria-disabled={null} aria-disabled={null}
aria-label={null} aria-label={null}
className="pf-c-button pf-m-secondary" className="pf-c-button pf-m-secondary"
data-ouia-component-id={null}
data-ouia-component-type="PF4/Button"
data-ouia-safe={true}
disabled={false} disabled={false}
onClick={[Function]} onClick={[Function]}
tabIndex={null} tabIndex={null}
@@ -632,20 +619,20 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
> >
Cancel Cancel
</button> </button>
</Button> </Component>
</ComponentWithOuia> </footer>
</Component> </Component>
</div> </div>
</ModalBoxFooter> </Component>
</div>
</ModalBox>
</div> </div>
</FocusTrap> </FocusTrap>
</div> </div>
</Backdrop> </Component>
</ModalContent> </Component>
</Portal> </Portal>
</Modal> </Modal>
</AlertModal> </AlertModal>
</I18n>
</WithI18n>
</DeleteRoleConfirmationModal> </DeleteRoleConfirmationModal>
`; `;

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,142 +821,83 @@ 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}
>
<ul
className="pf-c-chip-group"
>
<InnerChipGroup
className=""
collapsedText="-4 more"
defaultIsOpen={false}
expandedText="Show less"
isOpen={false}
numChips={5}
onToggleCollapse={[Function]}
withToolbar={false}
>
<Component
component="li"
isReadOnly={false}
key=".$3"
onClick={[Function]} onClick={[Function]}
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"children": "Member",
"component": "li",
"isReadOnly": false,
"onClick": [Function],
}
}
consumerContext={null}
>
<Chip
className=""
closeBtnAriaLabel="close"
component="li"
isOverflowChip={false}
isReadOnly={false}
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
tooltipPosition="top" tooltipPosition="top"
> >
<GenerateId <GenerateId
prefix="pf-random-id-" prefix="pf-random-id-"
>
<div
className="pf-c-chip-group"
>
<ul
aria-label="Chip group category"
className="pf-c-chip-group__list"
role="list"
> >
<li <li
className="pf-c-chip-group__list-item"
key="0"
>
<Chip
className=""
closeBtnAriaLabel="close"
component="div"
isOverflowChip={false}
isReadOnly={false}
key=".$3"
onClick={[Function]}
tooltipPosition="top"
>
<GenerateId
prefix="pf-random-id-"
>
<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
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
ariaLabel="close"
id="remove_pf-random-id-0"
onClick={[Function]}
>
<Component <Component
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="" id="remove_pf-random-id-1"
id="remove_pf-random-id-0"
onClick={[Function]} onClick={[Function]}
variant="plain" variant="plain"
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "close",
"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
aria-label="close"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
className=""
id="remove_pf-random-id-0"
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
variant="plain"
> >
<button <button
aria-disabled={null} 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="pf-c-button pf-m-plain" className="pf-c-button pf-m-plain"
data-ouia-component-id={null}
data-ouia-component-type="PF4/Button"
data-ouia-safe={true}
disabled={false} disabled={false}
id="remove_pf-random-id-0" id="remove_pf-random-id-1"
onClick={[Function]} onClick={[Function]}
tabIndex={null} tabIndex={null}
type="button" type="button"
> >
<TimesCircleIcon <TimesIcon
aria-hidden="true" aria-hidden="true"
color="currentColor" color="currentColor"
noVerticalAlign={false} noVerticalAlign={false}
size="sm" size="sm"
title={null}
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@@ -949,39 +910,36 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
"verticalAlign": "-0.125em", "verticalAlign": "-0.125em",
} }
} }
viewBox="0 0 512 512" viewBox="0 0 352 512"
width="1em" width="1em"
> >
<path <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" 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"
transform="" transform=""
/> />
</svg> </svg>
</TimesCircleIcon> </TimesIcon>
</button> </button>
</Button>
</ComponentWithOuia>
</Component> </Component>
</ChipButton> </div>
</li>
</GenerateId> </GenerateId>
</Chip> </Chip>
</ComponentWithOuia> </li>
</Component>
</InnerChipGroup>
</ul> </ul>
</div>
</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