From cf5d2e70da3af649bd97931c4e95eee954aa0bb3 Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Fri, 18 Oct 2024 14:59:44 +0200 Subject: [PATCH] [React@18 failing test] fix discover/group3 discover doc viewer flyout accessibility should use expected a11y attributes (#196844) ## Summary We're working on upgrading Kibana to React@18 (in Legacy Mode). There are a couple failing tests when running React@18 in Legacy mode and this is one of them [[job]](https://buildkite.com/elastic/kibana-pull-request/builds/243743#01929ee7-11b8-41c3-af79-1437561a6ef0) [[logs]](https://buildkite.com/organizations/elastic/pipelines/kibana-pull-request/builds/243743/jobs/01929ee7-11b8-41c3-af79-1437561a6ef0/artifacts/01929f0a-dc7a-42ff-9a01-809c31e1dc71) FTR Configs #58 / discover/group3 discover doc viewer flyout accessibility should use expected a11y attributes This one is simple. Native to react `useId` implementation produces ids like this: `:r3:` and when you attempt to use such ids with id selector they're invalid . e.g. `document.querySelector('#:r3:')` throws an error. A workaround is to use attribute selector `document.querySelector('[id=":r3:"]')`. This is the same problem as we've seen before https://github.com/elastic/kibana/pull/191632 --- test/functional/apps/discover/group3/_doc_viewer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/functional/apps/discover/group3/_doc_viewer.ts b/test/functional/apps/discover/group3/_doc_viewer.ts index 542cdab9543ec..6d922e6b2a889 100644 --- a/test/functional/apps/discover/group3/_doc_viewer.ts +++ b/test/functional/apps/discover/group3/_doc_viewer.ts @@ -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); }); });