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

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -137,8 +137,16 @@ export const Components = {
     active: () => '[class*="-activeTabStyle"]',
   },
   RefreshPicker: {
+    /**
+     * @deprecated use runButtonV2 from Grafana 8.3 instead
+     */
     runButton: 'RefreshPicker run button',
+    /**
+     * @deprecated use intervalButtonV2 from Grafana 8.3 instead
+     */
     intervalButton: 'RefreshPicker interval button',
+    runButtonV2: 'data-testid RefreshPicker run button',
+    intervalButtonV2: 'data-testid RefreshPicker interval button',
   },
   QueryTab: {
     content: 'Query editor tab content',