[Accessibility] A <label> for time bucket size selector on discover (#38396) (#38819)

* Replace <span> with a <label for=''> used as a label for a dropdown <select>
* Change CSS selector for functional test

src/legacy/core_plugins/kibana/public/discover/index.html

@@ -129,16 +129,18 @@
             >
               <header class="dscTimechart__header">
                 <div class="small">
-                  <span
+                  <label
+                    for="dscResultsIntervalSelector"
                     tooltip="{{::'kbn.discover.howToChangeTheTimeTooltip' | i18n: {defaultMessage: 'To change the time, click the clock icon in the navigation bar'} }}"
                   >
                     {{toMoment(timeRange.from)}} - {{toMoment(timeRange.to)}}
-                  </span>
+                  </label>
 
                   &mdash;
 
                   <span class="form-inline">
                     <select
+                      id="dscResultsIntervalSelector"
                       class="dscResults__interval form-control"
                       ng-model="state.interval"
                       ng-options="interval.val as interval.display for interval in intervalOptions | filter: intervalEnabled"

test/functional/page_objects/discover_page.js

@@ -41,7 +41,7 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
     }
 
     async getChartTimespan() {
-      const el = await find.byCssSelector('.small > span:nth-child(1)');
+      const el = await find.byCssSelector('.small > label[for="dscResultsIntervalSelector"]');
       return await el.getVisibleText();
     }