[8.x] [React@18 failing test] fix discover/group3 discover doc viewer flyout accessibility should use expected a11y attributes (#196844) (#196872)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[React@18 failing test] fix discover/group3 discover doc viewer
flyout accessibility should use expected a11y attributes
(#196844)](https://github.com/elastic/kibana/pull/196844)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Anton
Dosov","email":"anton.dosov@elastic.co"},"sourceCommit":{"committedDate":"2024-10-18T12:59:44Z","message":"[React@18
failing test] fix discover/group3 discover doc viewer flyout
accessibility should use expected a11y attributes (#196844)\n\n##
Summary\r\n\r\nWe're working on upgrading Kibana to React@18 (in Legacy
Mode). There\r\nare a couple failing tests when running React@18 in
Legacy mode and this\r\nis one of
them\r\n\r\n\r\n[[job]](01929f0a-dc7a-42ff-9a01-809c31e1dc71)\r\nFTR
Configs #58 / discover/group3 discover doc viewer
flyout\r\naccessibility should use expected a11y attributes\r\n\r\nThis
one is simple. Native to react `useId` implementation produces
ids\r\nlike this: `:r3:` and when you attempt to use such ids with id
selector\r\nthey're invalid . e.g. `document.querySelector('#:r3:')`
throws an\r\nerror. A workaround is to use attribute
selector\r\n`document.querySelector('[id=\":r3:\"]')`. This is the same
problem as\r\nwe've seen before
https://github.com/elastic/kibana/pull/191632","sha":"cf5d2e70da3af649bd97931c4e95eee954aa0bb3","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:SharedUX","backport:prev-minor"],"title":"[React@18
failing test] fix discover/group3 discover doc viewer flyout
accessibility should use expected a11y
attributes","number":196844,"url":"https://github.com/elastic/kibana/pull/196844","mergeCommit":{"message":"[React@18
failing test] fix discover/group3 discover doc viewer flyout
accessibility should use expected a11y attributes (#196844)\n\n##
Summary\r\n\r\nWe're working on upgrading Kibana to React@18 (in Legacy
Mode). There\r\nare a couple failing tests when running React@18 in
Legacy mode and this\r\nis one of
them\r\n\r\n\r\n[[job]](01929f0a-dc7a-42ff-9a01-809c31e1dc71)\r\nFTR
Configs #58 / discover/group3 discover doc viewer
flyout\r\naccessibility should use expected a11y attributes\r\n\r\nThis
one is simple. Native to react `useId` implementation produces
ids\r\nlike this: `:r3:` and when you attempt to use such ids with id
selector\r\nthey're invalid . e.g. `document.querySelector('#:r3:')`
throws an\r\nerror. A workaround is to use attribute
selector\r\n`document.querySelector('[id=\":r3:\"]')`. This is the same
problem as\r\nwe've seen before
https://github.com/elastic/kibana/pull/191632","sha":"cf5d2e70da3af649bd97931c4e95eee954aa0bb3"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196844","number":196844,"mergeCommit":{"message":"[React@18
failing test] fix discover/group3 discover doc viewer flyout
accessibility should use expected a11y attributes (#196844)\n\n##
Summary\r\n\r\nWe're working on upgrading Kibana to React@18 (in Legacy
Mode). There\r\nare a couple failing tests when running React@18 in
Legacy mode and this\r\nis one of
them\r\n\r\n\r\n[[job]](01929f0a-dc7a-42ff-9a01-809c31e1dc71)\r\nFTR
Configs #58 / discover/group3 discover doc viewer
flyout\r\naccessibility should use expected a11y attributes\r\n\r\nThis
one is simple. Native to react `useId` implementation produces
ids\r\nlike this: `:r3:` and when you attempt to use such ids with id
selector\r\nthey're invalid . e.g. `document.querySelector('#:r3:')`
throws an\r\nerror. A workaround is to use attribute
selector\r\n`document.querySelector('[id=\":r3:\"]')`. This is the same
problem as\r\nwe've seen before
https://github.com/elastic/kibana/pull/191632","sha":"cf5d2e70da3af649bd97931c4e95eee954aa0bb3"}}]}]
BACKPORT-->

Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
This commit is contained in:
Kibana Machine 2024-10-19 01:57:00 +11:00 committed by GitHub
parent bab90841b5
commit e39678fae6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -625,7 +625,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
);
expect(role).to.be('dialog');
expect(tabindex).to.be('0');
expect(await find.existsByCssSelector(`#${describedBy}`)).to.be(true);
expect(await find.existsByCssSelector(`[id="${describedBy}"]`)).to.be(true);
expect(noFocusLock).to.be('true');
// overlay flyout
await reduceScreenWidth();
@ -635,7 +635,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
noFocusLock = await testSubjects.getAttribute('docViewerFlyout', 'data-no-focus-lock');
expect(role).to.be('dialog');
expect(tabindex).to.be('0');
expect(await find.existsByCssSelector(`#${describedBy}`)).to.be(true);
expect(await find.existsByCssSelector(`[id="${describedBy}"]`)).to.be(true);
expect(noFocusLock).to.be(null);
});
});