[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]](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
This commit is contained in:
Anton Dosov 2024-10-18 14:59:44 +02:00 committed by GitHub
parent f86d1716b1
commit cf5d2e70da
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);
});
});