github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Discover] Fix page up and down navigation in classic table (#122742)

Browse source 
* Fix page up and down navigation in classic table
* Change focus element of Back to top button to "Go to end of the table"
This commit is contained in:
Matthias Wilhelm 2022-01-13 18:13:58 +01:00 • committed by GitHub
parent efc07eed86
commit 8f37f88b47
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/plugins/discover/public/application/main/components/layout/discover_documents.tsx
View file

@ -121,7 +121,7 @@ function DiscoverDocumentsComponent({
}
return (
<EuiFlexItem className="dscTable" tabIndex={-1} aria-labelledby="documentsAriaLabel">
<EuiFlexItem className="dscTable" aria-labelledby="documentsAriaLabel">
<EuiScreenReaderOnly>
<h2 id="documentsAriaLabel">
<FormattedMessage id="discover.documentsAriaLabel" defaultMessage="Documents" />

2
src/plugins/discover/public/components/doc_table/doc_table_infinite.tsx
View file

@ -118,7 +118,7 @@ export const DocTableInfinite = (props: DocTableProps) => {
const onBackToTop = useCallback(() => {
const isMobileView = document.getElementsByClassName('dscSidebar__mobile').length > 0;
const focusElem = document.querySelector('.dscTable') as HTMLElement;
const focusElem = document.querySelector('.dscSkipButton') as HTMLElement;
focusElem.focus();
// Only the desktop one needs to target a specific container

9
test/functional/apps/discover/_doc_table.ts
View file

@ -120,14 +120,19 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.discover.backToTop();
});
it('should go the end of the table when using the accessible Skip button', async function () {
it('should go the end and back to top of the classic table when using the accessible buttons', async function () {
// click the Skip to the end of the table
await PageObjects.discover.skipToEndOfDocTable();
// now check the footer text content
const footer = await PageObjects.discover.getDocTableFooter();
log.debug(await footer.getVisibleText());
expect(await footer.getVisibleText()).to.have.string(rowsHardLimit);
await PageObjects.discover.backToTop();
// check that the skip to end of the table button now has focus
const skipButton = await testSubjects.find('discoverSkipTableButton');
const activeElement = await find.activeElement();
const activeElementText = await activeElement.getVisibleText();
const skipButtonText = await skipButton.getVisibleText();
expect(skipButtonText === activeElementText).to.be(true);
});
describe('expand a document row', function () {