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

…38396) * Replace <span> with a <label for=''> used as a label for a dropdown <select> * Change CSS selector for functional test
elastic · Jun 12, 2019 · 7225591 · 7225591
1 parent f877c78
commit 7225591
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/legacy/core_plugins/kibana/public/discover/index.html b/src/legacy/core_plugins/kibana/public/discover/index.html
@@ -129,16 +129,18 @@ <h1 id="kui_local_breadcrumb" class="kuiLocalBreadcrumb" ng-if="opts.savedSearch
             >
               <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"

diff --git a/test/functional/page_objects/discover_page.js b/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();
     }