[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
This commit is contained in:
Philipp B 2019-06-12 22:49:18 +03:00 committed by GitHub
parent 72bde68ad2
commit fe4b0b9856
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 3 deletions

View file

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

View file

@ -41,7 +41,7 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
} }
async getChartTimespan() { 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(); return await el.getVisibleText();
} }