Fix a11y issues with cross cluster replication flyouts (#149069)

Fixes https://github.com/elastic/kibana/issues/135503, fixes
https://github.com/elastic/kibana/issues/135506

## Summary

This PR fixes the a11y issues in the Follower index flyout and the Auto
follower index flyout from the Cross cluster replication plugin.

Screenshots:
<img height="500" alt="Screenshot 2023-01-17 at 17 46 08"
src="https://user-images.githubusercontent.com/59341489/212985332-794a2b7e-3e12-4303-bcbd-ad63552f211c.png">
<img height="500" alt="Screenshot 2023-01-17 at 13 26 51"
src="https://user-images.githubusercontent.com/59341489/212987803-40062d53-3b34-4286-98fc-736264491b08.png">


Followed [these
instructions](https://www.elastic.co/guide/en/elasticsearch/reference/current/ccr-getting-started-tutorial.html#ccr-getting-started-tutorial)
to set up the cross cluster replication and the follower and
auto-follower indices.


### 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 2023-01-18 18:32:57 +00:00 committed by GitHub
parent dc80574a89
commit b0deb036e6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 176 additions and 147 deletions

View file

@ -269,7 +269,10 @@ describe('<AutoFollowPatternList />', () => {
test('should have a "settings" section', () => {
actions.clickAutoFollowPatternAt(0);
expect(find('settingsSection').find('h3').text()).toEqual('Settings');
expect(exists('settingsValues')).toBe(true);
// The number of different settings of an auto-follower pattern
const AVAILABLE_SETTINGS = 4;
expect(find('settingsValues').length).toBe(AVAILABLE_SETTINGS);
});
test('should set the correct auto-follow pattern settings values', () => {

View file

@ -102,9 +102,9 @@ export class DetailPanel extends Component {
<EuiSpacer size="s" />
<EuiDescriptionList data-test-subj="settingsValues">
<EuiFlexGroup>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionList data-test-subj="settingsValues">
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -117,9 +117,11 @@ export class DetailPanel extends Component {
<EuiDescriptionListDescription data-test-subj="remoteCluster">
{remoteCluster}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiDescriptionList>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionList data-test-subj="settingsValues">
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -132,13 +134,15 @@ export class DetailPanel extends Component {
<EuiDescriptionListDescription data-test-subj="leaderIndexPatterns">
{leaderIndexPatterns.join(', ')}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
</EuiDescriptionList>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiSpacer size="s" />
<EuiFlexGroup>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionList data-test-subj="settingsValues">
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -158,9 +162,11 @@ export class DetailPanel extends Component {
</em>
)}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiDescriptionList>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionList data-test-subj="settingsValues">
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -180,9 +186,9 @@ export class DetailPanel extends Component {
</em>
)}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
</EuiDescriptionList>
</EuiDescriptionList>
</EuiFlexItem>
</EuiFlexGroup>
</section>
</>
);

View file

@ -70,9 +70,9 @@ export class DetailPanel extends Component {
<Fragment>
<EuiFlyoutBody>
<section>
<EuiDescriptionList>
<EuiFlexGroup>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionList>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -99,13 +99,15 @@ export class DetailPanel extends Component {
</EuiHealth>
)}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
</EuiDescriptionList>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiSpacer size="s" />
<EuiFlexGroup>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionList>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -118,9 +120,11 @@ export class DetailPanel extends Component {
<EuiDescriptionListDescription data-test-subj="remoteCluster">
{remoteCluster}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiDescriptionList>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionList>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -133,9 +137,9 @@ export class DetailPanel extends Component {
<EuiDescriptionListDescription data-test-subj="leaderIndex">
{leaderIndex}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
</EuiDescriptionList>
</EuiDescriptionList>
</EuiFlexItem>
</EuiFlexGroup>
</section>
<EuiSpacer size="l" />
@ -166,36 +170,40 @@ export class DetailPanel extends Component {
}
/>
) : (
<EuiDescriptionList data-test-subj="settingsValues">
<>
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxReadRequestOperationCountTitle"
defaultMessage="Max read request operation count"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionList data-test-subj="settingsValues">
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxReadRequestOperationCountTitle"
defaultMessage="Max read request operation count"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="maxReadReqOpCount">
{maxReadRequestOperationCount}
</EuiDescriptionListDescription>
<EuiDescriptionListDescription data-test-subj="maxReadReqOpCount">
{maxReadRequestOperationCount}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxOutstandingReadRequestsTitle"
defaultMessage="Max outstanding read requests"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionList data-test-subj="settingsValues">
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxOutstandingReadRequestsTitle"
defaultMessage="Max outstanding read requests"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="maxOutstandingReadReq">
{maxOutstandingReadRequests}
</EuiDescriptionListDescription>
<EuiDescriptionListDescription data-test-subj="maxOutstandingReadReq">
{maxOutstandingReadRequests}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
</EuiFlexGroup>
@ -203,33 +211,37 @@ export class DetailPanel extends Component {
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxReadRequestSizeTitle"
defaultMessage="Max read request size"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionList data-test-subj="settingsValues">
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxReadRequestSizeTitle"
defaultMessage="Max read request size"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="maxReadReqSize">
{maxReadRequestSize}
</EuiDescriptionListDescription>
<EuiDescriptionListDescription data-test-subj="maxReadReqSize">
{maxReadRequestSize}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxWriteRequestOperationCountTitle"
defaultMessage="Max write request operation count"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionList data-test-subj="settingsValues">
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxWriteRequestOperationCountTitle"
defaultMessage="Max write request operation count"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="maxWriteReqOpCount">
{maxWriteRequestOperationCount}
</EuiDescriptionListDescription>
<EuiDescriptionListDescription data-test-subj="maxWriteReqOpCount">
{maxWriteRequestOperationCount}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
</EuiFlexGroup>
@ -237,33 +249,37 @@ export class DetailPanel extends Component {
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxWriteRequestSizeTitle"
defaultMessage="Max write request size"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionList data-test-subj="settingsValues">
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxWriteRequestSizeTitle"
defaultMessage="Max write request size"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="maxWriteReqSize">
{maxWriteRequestSize}
</EuiDescriptionListDescription>
<EuiDescriptionListDescription data-test-subj="maxWriteReqSize">
{maxWriteRequestSize}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxOutstandingWriteRequestsTitle"
defaultMessage="Max outstanding write requests"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionList data-test-subj="settingsValues">
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxOutstandingWriteRequestsTitle"
defaultMessage="Max outstanding write requests"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="maxOutstandingWriteReq">
{maxOutstandingWriteRequests}
</EuiDescriptionListDescription>
<EuiDescriptionListDescription data-test-subj="maxOutstandingWriteReq">
{maxOutstandingWriteRequests}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
</EuiFlexGroup>
@ -271,33 +287,37 @@ export class DetailPanel extends Component {
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxWriteBufferCountTitle"
defaultMessage="Max write buffer count"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionList data-test-subj="settingsValues">
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxWriteBufferCountTitle"
defaultMessage="Max write buffer count"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="maxWriteBufferCount">
{maxWriteBufferCount}
</EuiDescriptionListDescription>
<EuiDescriptionListDescription data-test-subj="maxWriteBufferCount">
{maxWriteBufferCount}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxWriteBufferSizeTitle"
defaultMessage="Max write buffer size"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionList data-test-subj="settingsValues">
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxWriteBufferSizeTitle"
defaultMessage="Max write buffer size"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="maxWriteBufferSize">
{maxWriteBufferSize}
</EuiDescriptionListDescription>
<EuiDescriptionListDescription data-test-subj="maxWriteBufferSize">
{maxWriteBufferSize}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
</EuiFlexGroup>
@ -305,36 +325,40 @@ export class DetailPanel extends Component {
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxRetryDelayTitle"
defaultMessage="Max retry delay"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionList data-test-subj="settingsValues">
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxRetryDelayTitle"
defaultMessage="Max retry delay"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="maxRetryDelay">
{maxRetryDelay}
</EuiDescriptionListDescription>
<EuiDescriptionListDescription data-test-subj="maxRetryDelay">
{maxRetryDelay}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.readPollTimeoutTitle"
defaultMessage="Read poll timeout"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionList data-test-subj="settingsValues">
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.crossClusterReplication.followerIndexForm.advancedSettings.readPollTimeoutTitle"
defaultMessage="Read poll timeout"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="readPollTimeout">
{readPollTimeout}
</EuiDescriptionListDescription>
<EuiDescriptionListDescription data-test-subj="readPollTimeout">
{readPollTimeout}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
</EuiFlexGroup>
</EuiDescriptionList>
</>
)}
</section>

View file

@ -53,9 +53,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
);
});
it('follower index flyout', async () => {
// https://github.com/elastic/kibana/issues/135503
// Skipping this snapshot because there is an existing a11y violation.
// await a11y.testAppSnapshot();
await a11y.testAppSnapshot();
await testSubjects.click('closeFlyoutButton');
await retry.waitFor('follower index table to be visible', async () => {
return await (await find.byCssSelector('table')).isDisplayed();
@ -86,9 +84,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
);
});
it('auto follower index flyout', async () => {
// https://github.com/elastic/kibana/issues/135506
// Skipping this snapshot because there is an existing a11y violation.
// await a11y.testAppSnapshot();
await a11y.testAppSnapshot();
await testSubjects.click('closeFlyoutButton');
await retry.waitFor('auto follower index table to be visible', async () => {
return await (await find.byCssSelector('table')).isDisplayed();