forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Dashboard Navigation] Fix a11y concerns (elastic#174772)
## Summary This PR addresses the a11y issues that were brought up as part of the [a11y review](elastic#163802) via the following: - **Added `aria-current` attribute to the current dashboard link** | Before | After | |--------|--------| |  |  | - **Returned focus to the create flyout after adding/editing a link** | Before | After | |--------|--------| |  |  | - **Added `aria-label` attribute to `Technical preview` badge** | Before | After | |--------|--------| |  |  | - **Added more context to the `aria-label`s for the edit/delete link buttons** | Before | After | |--------|--------| |  |  | ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [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] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed ([Link](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/4856))  - [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 was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- Loading branch information
1 parent
99098a5
commit 98ab6b8
Showing
14 changed files
with
130 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import { FtrProviderContext } from '../../ftr_provider_context'; | ||
|
|
||
| export default function ({ getService, getPageObjects }: FtrProviderContext) { | ||
| const a11y = getService('a11y'); | ||
| const deployment = getService('deployment'); | ||
| const testSubjects = getService('testSubjects'); | ||
| const kibanaServer = getService('kibanaServer'); | ||
| const dashboardAddPanel = getService('dashboardAddPanel'); | ||
| const { common, dashboard, home, dashboardLinks } = getPageObjects([ | ||
| 'common', | ||
| 'dashboard', | ||
| 'home', | ||
| 'dashboardLinks', | ||
| ]); | ||
|
|
||
| const DASHBOARD_NAME = 'Test Links Panel A11y'; | ||
|
|
||
| describe('Dashboard links a11y tests', () => { | ||
| before(async () => { | ||
| await kibanaServer.savedObjects.cleanStandardList(); | ||
| await common.navigateToUrl('home', '/tutorial_directory/sampleData', { | ||
| useActualUrl: true, | ||
| }); | ||
| await home.addSampleDataSet('flights'); | ||
| await common.navigateToApp('dashboard'); | ||
| await dashboard.gotoDashboardLandingPage(); | ||
| await dashboard.clickNewDashboard(); | ||
| await dashboard.saveDashboard(DASHBOARD_NAME, { exitFromEditMode: false }); | ||
| }); | ||
|
|
||
| after(async () => { | ||
| await dashboard.clickQuickSave(); | ||
| await common.navigateToUrl('home', '/tutorial_directory/sampleData', { | ||
| useActualUrl: true, | ||
| }); | ||
| await home.removeSampleDataSet('flights'); | ||
| await kibanaServer.savedObjects.cleanStandardList(); | ||
| }); | ||
|
|
||
| it('Empty links editor flyout', async () => { | ||
| await dashboardAddPanel.clickEditorMenuButton(); | ||
| await dashboardAddPanel.clickAddNewEmbeddableLink('links'); | ||
| await a11y.testAppSnapshot(); | ||
| }); | ||
|
|
||
| it('Add dashboard link flyout', async () => { | ||
| await testSubjects.click('links--panelEditor--addLinkBtn'); | ||
| await testSubjects.exists('links--linkEditor--flyout'); | ||
| await a11y.testAppSnapshot(); | ||
| }); | ||
|
|
||
| it('Add external link flyout', async () => { | ||
| const radioOption = await testSubjects.find('links--linkEditor--externalLink--radioBtn'); | ||
| const label = await radioOption.findByCssSelector('label[for="externalLink"]'); | ||
| await label.click(); | ||
| await a11y.testAppSnapshot(); | ||
| await dashboardLinks.clickLinkEditorCloseButton(); | ||
| }); | ||
|
|
||
| it('Non-empty links editor flyout', async () => { | ||
| await dashboardLinks.addDashboardLink('[Flights] Global Flight Dashboard'); | ||
| await dashboardLinks.addDashboardLink(DASHBOARD_NAME); | ||
| await dashboardLinks.addExternalLink(`${deployment.getHostPort()}/app/bar`); | ||
| await a11y.testAppSnapshot(); | ||
| }); | ||
|
|
||
| it('Links panel', async () => { | ||
| await dashboardLinks.toggleSaveByReference(false); | ||
| await dashboardLinks.clickPanelEditorSaveButton(); | ||
| await testSubjects.existOrFail('links--component'); | ||
| await a11y.testAppSnapshot(); | ||
| }); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters