mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
Fix a11y for snapshot policy flyout (#148972)
## Summary This PR fixes the a11y issue with the snapshot policy flyout described in https://github.com/elastic/kibana/issues/134514. Screenshot: <img width="300" alt="Screenshot 2023-01-16 at 12 13 01" src="https://user-images.githubusercontent.com/59341489/212687990-c601932c-26b4-484a-88c9-0cce968633f2.png"> ### Checklist - [X] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [X] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [X] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [X] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Elena Stoeva
GitHub
parent
deebef5614
commit
0ce1452bb0
2 changed files with 62 additions and 40 deletions
|
|
@ -146,9 +146,9 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
|
|||
</EuiTitle>
|
||||
<EuiSpacer size="s" />
|
||||
|
||||
<EuiDescriptionList textStyle="reverse">
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem data-test-subj="version">
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem data-test-subj="version">
|
||||
<EuiDescriptionList textStyle="reverse">
|
||||
<EuiDescriptionListTitle data-test-subj="title">
|
||||
<FormattedMessage
|
||||
id="xpack.snapshotRestore.policyDetails.versionLabel"
|
||||
|
|
@ -159,9 +159,11 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
|
|||
<EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
|
||||
{version}
|
||||
</EuiDescriptionListDescription>
|
||||
</EuiFlexItem>
|
||||
</EuiDescriptionList>
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem data-test-subj="modified">
|
||||
<EuiFlexItem data-test-subj="modified">
|
||||
<EuiDescriptionList textStyle="reverse">
|
||||
<EuiDescriptionListTitle data-test-subj="title">
|
||||
<FormattedMessage
|
||||
id="xpack.snapshotRestore.policyDetails.modifiedDateLabel"
|
||||
|
|
@ -172,11 +174,14 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
|
|||
<EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
|
||||
<FormattedDateTime epochMs={modifiedDateMillis} />
|
||||
</EuiDescriptionListDescription>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiDescriptionList>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size="s" />
|
||||
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem data-test-subj="name">
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem data-test-subj="name">
|
||||
<EuiDescriptionList textStyle="reverse">
|
||||
<EuiDescriptionListTitle data-test-subj="title">
|
||||
<FormattedMessage
|
||||
id="xpack.snapshotRestore.policyDetails.snapshotNameLabel"
|
||||
|
|
@ -189,9 +194,11 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
|
|||
{snapshotName}
|
||||
</EuiLink>
|
||||
</EuiDescriptionListDescription>
|
||||
</EuiFlexItem>
|
||||
</EuiDescriptionList>
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem data-test-subj="repository">
|
||||
<EuiFlexItem data-test-subj="repository">
|
||||
<EuiDescriptionList textStyle="reverse">
|
||||
<EuiDescriptionListTitle data-test-subj="title">
|
||||
<FormattedMessage
|
||||
id="xpack.snapshotRestore.policyDetails.repositoryLabel"
|
||||
|
|
@ -204,11 +211,14 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
|
|||
{repository}
|
||||
</EuiLink>
|
||||
</EuiDescriptionListDescription>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiDescriptionList>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size="s" />
|
||||
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem data-test-subj="schedule">
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem data-test-subj="schedule">
|
||||
<EuiDescriptionList textStyle="reverse">
|
||||
<EuiDescriptionListTitle data-test-subj="title">
|
||||
<FormattedMessage
|
||||
id="xpack.snapshotRestore.policyDetails.scheduleLabel"
|
||||
|
|
@ -219,9 +229,11 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
|
|||
<EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
|
||||
{schedule}
|
||||
</EuiDescriptionListDescription>
|
||||
</EuiFlexItem>
|
||||
</EuiDescriptionList>
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem data-test-subj="execution">
|
||||
<EuiFlexItem data-test-subj="execution">
|
||||
<EuiDescriptionList textStyle="reverse">
|
||||
<EuiDescriptionListTitle data-test-subj="title">
|
||||
<FormattedMessage
|
||||
id="xpack.snapshotRestore.policyDetails.nextExecutionLabel"
|
||||
|
|
@ -232,11 +244,14 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
|
|||
<EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
|
||||
<FormattedDateTime epochMs={nextExecutionMillis} />
|
||||
</EuiDescriptionListDescription>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiDescriptionList>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size="s" />
|
||||
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem data-test-subj="indices">
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem data-test-subj="indices">
|
||||
<EuiDescriptionList textStyle="reverse">
|
||||
<EuiDescriptionListTitle data-test-subj="title">
|
||||
<FormattedMessage
|
||||
id="xpack.snapshotRestore.policyDetails.dataStreamsAndIndicesLabel"
|
||||
|
|
@ -247,9 +262,11 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
|
|||
<EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
|
||||
<CollapsibleIndicesList indices={indices} />
|
||||
</EuiDescriptionListDescription>
|
||||
</EuiFlexItem>
|
||||
</EuiDescriptionList>
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem data-test-subj="ignoreUnavailable">
|
||||
<EuiFlexItem data-test-subj="ignoreUnavailable">
|
||||
<EuiDescriptionList textStyle="reverse">
|
||||
<EuiDescriptionListTitle data-test-subj="title">
|
||||
<FormattedMessage
|
||||
id="xpack.snapshotRestore.policyDetails.ignoreUnavailableLabel"
|
||||
|
|
@ -270,11 +287,14 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
|
|||
/>
|
||||
)}
|
||||
</EuiDescriptionListDescription>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiDescriptionList>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size="s" />
|
||||
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem data-test-subj="includeGlobalState">
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem data-test-subj="includeGlobalState">
|
||||
<EuiDescriptionList textStyle="reverse">
|
||||
<EuiDescriptionListTitle data-test-subj="title">
|
||||
<FormattedMessage
|
||||
id="xpack.snapshotRestore.policyDetails.includeGlobalStateLabel"
|
||||
|
|
@ -297,16 +317,19 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
|
|||
/>
|
||||
)}
|
||||
</EuiDescriptionListDescription>
|
||||
</EuiFlexItem>
|
||||
</EuiDescriptionList>
|
||||
</EuiFlexItem>
|
||||
|
||||
<PolicyFeatureStatesSummary
|
||||
includeGlobalState={includeGlobalState}
|
||||
featureStates={featureStates}
|
||||
/>
|
||||
</EuiFlexGroup>
|
||||
<PolicyFeatureStatesSummary
|
||||
includeGlobalState={includeGlobalState}
|
||||
featureStates={featureStates}
|
||||
/>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size="s" />
|
||||
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem data-test-subj="partial">
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem data-test-subj="partial">
|
||||
<EuiDescriptionList textStyle="reverse">
|
||||
<EuiDescriptionListTitle data-test-subj="title">
|
||||
<FormattedMessage
|
||||
id="xpack.snapshotRestore.policyDetails.partialLabel"
|
||||
|
|
@ -327,9 +350,9 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
|
|||
/>
|
||||
)}
|
||||
</EuiDescriptionListDescription>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiDescriptionList>
|
||||
</EuiDescriptionList>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
|
||||
{retention && (
|
||||
<Fragment>
|
||||
|
|
|
|||
|
|
@ -106,9 +106,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
|
|||
await a11y.testAppSnapshot();
|
||||
});
|
||||
it('submit page four and flyout', async () => {
|
||||
// Commenting out this snapshot as this is reported. https://github.com/elastic/kibana/issues/134514
|
||||
await PageObjects.snapshotRestore.submitNewPolicy();
|
||||
// await a11y.testAppSnapshot();
|
||||
await a11y.testAppSnapshot();
|
||||
});
|
||||
it('policy table with data', async () => {
|
||||
await PageObjects.snapshotRestore.closeFlyout();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue