RefreshPicker: make widget accessible (#40570)

* adds better aria-label for run and interval buttons

* enable refreshPicker to be keyboard navigable

* adds support for closing menu using esc key

* Fix: weird behaviour when navigating menu items

* adds focus trapping to refresh picker

* WIP: sanitize time interval values for screen readers to pronounce correctly

* WIP: improve sanitizeLabel function to work for all use cases

* Chore: move label sanitization to refreshPicker component instead

* Chore: add fallback label when ariaLabel prop is not set

* Chore: fix some type errors

* code cleanup

* update tests

* rename function to be more descriptive

* remove unnecessary type casting

* WIP: use cleaner solution

* WIP: use parseDuration util instead

* use more descriptive aria label

* fix: modify parseDuration util to output correct interval unit format

* fix: move interval unit format logic to refreshPicker

* Chore: add back old refreshPicker e2e selectors for backward compatibility

* Fix: improve refresh picker to voice out selected interval option

* Fix: use appropriate aria roles and states to aid screen reader a11y

* Fix: support dropdown expansion using down arrow key

* Chore: use better type construct

* Fix: add support for tab to close menu

* add more context to the deprecation warning message

* Chore: use formatDuration util instead to format interval labels

* Chore: small syntax fix

* chore: syntax fix

* syntax fix

* Chore: add back lockfile
This commit is contained in:
Uchechukwu Obasi
2021-11-10 11:01:06 +01:00
committed by GitHub
parent 2139a3dfa8
commit e7fd41d779
11 changed files with 146 additions and 76 deletions
+1 -1
View File
@@ -9,7 +9,7 @@ e2e.scenario({
scenario: () => {
e2e.pages.Explore.visit();
e2e.pages.Explore.General.container().should('have.length', 1);
e2e.components.RefreshPicker.runButton().should('have.length', 1);
e2e.components.RefreshPicker.runButtonV2().should('have.length', 1);
e2e.components.DataSource.TestData.QueryTab.scenarioSelectContainer()
.should('be.visible')
@@ -19,7 +19,7 @@ describe('Trace view', () => {
e2e().wait(500);
e2e.components.RefreshPicker.runButton().should('be.visible').click();
e2e.components.RefreshPicker.runButtonV2().should('be.visible').click();
e2e().wait('@longTrace');