TimeRangePicker: Accessiblity improvements (#36912)

* Add low hanging aria markup

* Add a list of radio buttons

* Add ref to put focus

* Add landmark markup

* Add labels to icon buttons

* Add radio button groupings

* Add keyboard focus styles

* Improve markup

* Update test selector

* Remove testid in favor of text

* Fiddle around with test labels

* Get correct testid selector

* Add aria-expanded to button

* Change order of quick select for keyboard nav

* Create headings for easier heading navigation

* Add another h3

* Add testid

* Use selectors in e2e test

* Add dataid selector for narrow absolute button

* Update e2e test with proper selectors

* Add more verbose aria-label

* Change editor to picker

packages/grafana-e2e/src/flows/setTimeRange.ts

@@ -8,7 +8,7 @@ export interface TimeRangeConfig {
 }
 
 export const setTimeRange = ({ from, to, zone }: TimeRangeConfig) => {
-  e2e().get('[aria-label="TimePicker Open Button"]').click();
+  e2e.components.TimePicker.openButton().click();
 
   if (zone) {
     e2e().contains('button', 'Change time zone').click();
@@ -21,9 +21,10 @@ export const setTimeRange = ({ from, to, zone }: TimeRangeConfig) => {
   }
 
   // For smaller screens
-  e2e().get('[aria-label="TimePicker absolute time range"]').click();
+  e2e.components.TimePicker.absoluteTimeRangeTitle().click();
 
-  e2e().get('[aria-label="TimePicker from field"]').clear().type(from);
-  e2e().get('[aria-label="TimePicker to field"]').clear().type(to);
-  e2e().get('[aria-label="TimePicker submit button"]').click();
+  e2e.components.TimePicker.fromField().clear().type(from);
+  e2e.components.TimePicker.toField().clear().type(to);
+
+  e2e.components.TimePicker.applyTimeRange().click();
 };