Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 459c03c

Browse files
Splaktarjelbourn
Splaktar
authored and
jelbourn
committed
fix(slider): aria attrs are not announced when tabbing in screen readers (#11688)
revert changes from #10731 move a number of aria attributes from md-slider to md-slider-wrapper fix inconsistencies, typos, and mistakes in the demos Fixes #11685
1 parent 7674959 commit 459c03c

File tree

6 files changed

+64
-63
lines changed

6 files changed

+64
-63
lines changed

‎src/components/slider/demoBasicUsage/index.html

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -44,23 +44,23 @@ <h3>Rating: {{rating1}}/5 - demo of theming classes</h3>
4444
<div flex="10" layout layout-align="center center">
4545
<span class="md-body-1">default</span>
4646
</div>
47-
<md-slider flex md-discrete ng-model="rating1" step="1" min="1" max="5" aria-label="rating">
48-
</md-slider>
47+
<md-slider flex md-discrete ng-model="rating1" step="1" min="1" max="5"
48+
aria-label="default"></md-slider>
4949
</div>
5050
<div layout>
5151
<div flex="10" layout layout-align="center center">
5252
<span class="md-body-1">md-warn</span>
5353
</div>
5454
<md-slider flex class="md-warn" md-discrete ng-model="rating2" step="1" min="1" max="5"
55-
aria-label="rating">
55+
aria-label="md-warn">
5656
</md-slider>
5757
</div>
5858
<div layout>
5959
<div flex="10" layout layout-align="center center">
6060
<span class="md-body-1">md-primary</span>
6161
</div>
6262
<md-slider flex class="md-primary" md-discrete ng-model="rating3" step="1" min="1" max="5"
63-
aria-label="rating">
63+
aria-label="md-primary">
6464
</md-slider>
6565
</div>
6666

@@ -69,10 +69,12 @@ <h3>Rating: {{rating1}}/5 - demo of theming classes</h3>
6969
<h3>Disabled</h3>
7070
<md-slider-container ng-disabled="isDisabled">
7171
<md-icon md-svg-icon="device:brightness-low"></md-icon>
72-
<md-slider ng-model="disabled1" aria-label="Disabled 1" md-discrete ng-readonly="readonly">
72+
<md-slider ng-model="disabled1" aria-label="Disabled 1" md-discrete ng-readonly="readonly"
73+
id="disabled1-slider">
7374
</md-slider>
7475
<md-input-container>
75-
<input type="number" ng-model="disabled1" aria-label="green" aria-controls="green-slider">
76+
<input type="number" ng-model="disabled1" aria-label="Disabled 1"
77+
aria-controls="disabled1-slider">
7678
</md-input-container>
7779
</md-slider-container>
7880
<md-checkbox ng-model="isDisabled">Is disabled</md-checkbox>
@@ -93,20 +95,23 @@ <h3>Invert</h3>
9395
<div flex="10" layout layout-align="center center">
9496
<span class="md-body-1">Regular</span>
9597
</div>
96-
<md-slider ng-model="invert" min="0" max="100" aria-label="regular slider"></md-slider>
98+
<md-slider ng-model="invert" min="0" max="100" aria-label="regular" id="regular-slider">
99+
</md-slider>
97100

98101
<md-input-container>
99-
<input type="number" ng-model="invert" aria-label="regular-slider">
102+
<input type="number" ng-model="invert" aria-label="regular" aria-controls="regular-slider">
100103
</md-input-container>
101104
</md-slider-container>
102105
<md-slider-container>
103106
<div flex="10" layout layout-align="center center">
104-
<span class="md-body-1">Invert</span>
107+
<span class="md-body-1">Inverted</span>
105108
</div>
106-
<md-slider md-invert ng-model="invert" min="0" max="100" aria-label="invertd slider"></md-slider>
109+
<md-slider md-invert ng-model="invert" min="0" max="100" aria-label="inverted"
110+
id="inverted-slider"></md-slider>
107111

108112
<md-input-container>
109-
<input type="number" ng-model="invert" aria-label="invert-slider">
113+
<input type="number" ng-model="invert" aria-label="inverted"
114+
aria-controls="inverted-slider">
110115
</md-input-container>
111116
</md-slider-container>
112117

‎src/components/slider/demoBasicUsage/script.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
angular.module('sliderDemo1', ['ngMaterial'])
1+
angular.module('sliderDemoBasic', ['ngMaterial'])
22
.config(function ($mdIconProvider) {
33
$mdIconProvider.iconSet('device', 'img/icons/sets/device-icons.svg', 24);
44
})
55
.controller('AppCtrl', function ($scope) {
6-
76
$scope.color = {
87
red: Math.floor(Math.random() * 255),
98
green: Math.floor(Math.random() * 255),

‎src/components/slider/demoVertical/index.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,27 @@
44
<md-input-container>
55
<input flex type="number" ng-model="vol" aria-label="volume" aria-controls="volume-slider">
66
</md-input-container>
7-
<md-slider ng-model="vol" min="0" max="100" aria-label="volume" id="volume-slider" class="md-accent"
8-
md-vertical></md-slider>
9-
</md-slider>
7+
<md-slider ng-model="vol" min="0" max="100" aria-label="volume" id="volume-slider"
8+
class="md-accent" md-vertical></md-slider>
109
<h5>Volume</h5>
1110
</md-slider-container>
1211
<md-slider-container flex>
1312
<md-input-container>
14-
<input flex type="number" ng-model="bass" aria-label="bass" aria-controls="bass-slider">
13+
<input flex type="number" ng-model="bass" aria-label="bass" aria-controls="bass-slider"
14+
step="10">
1515
</md-input-container>
16-
<md-slider md-discrete ng-model="bass" min="0" max="100" step="10" aria-label="bass" class="md-primary"
17-
md-vertical></md-slider>
18-
</md-slider>
16+
<md-slider md-discrete ng-model="bass" min="0" max="100" step="10" aria-label="bass"
17+
class="md-primary" md-vertical id="bass-slider"></md-slider>
1918
<h5>Bass</h5>
2019
</md-slider-container>
2120
<div flex layout="column" layout-align="center center">
2221
<md-slider-container ng-disabled="readonly">
2322
<md-input-container>
24-
<input flex type="number" ng-model="master" aria-label="master" aria-controls="master-slider">
23+
<input flex type="number" ng-model="master" aria-label="Master" step="10"
24+
aria-controls="master-slider">
2525
</md-input-container>
2626
<md-slider flex ng-model="master" md-discrete aria-label="Master" md-vertical step="10"
27-
ng-readonly="readonly"></md-slider>
27+
ng-readonly="readonly" id="master-slider"></md-slider>
2828
<h5>Master</h5>
2929
</md-slider-container>
3030
<md-checkbox ng-model="readonly">Read only</md-checkbox>

‎src/components/slider/demoVertical/script.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
2-
angular.module('sliderDemo2', ['ngMaterial'])
3-
1+
angular.module('sliderDemoVertical', ['ngMaterial'])
42
.controller('AppCtrl', function($scope) {
5-
63
$scope.vol = Math.floor(Math.random() * 100);
7-
$scope.bass = Math.floor(Math.random() * 100);
8-
$scope.master = Math.floor(Math.random() * 100);
4+
$scope.bass = 40;
5+
$scope.master = 80;
96
});

‎src/components/slider/slider.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
213213

214214
if (tAttrs.disabled || tAttrs.ngDisabled) wrapper.attr('tabindex', -1);
215215

216-
tElement.attr('role', 'slider');
216+
wrapper.attr('role', 'slider');
217217

218218
$mdAria.expect(tElement, 'aria-label');
219219

@@ -312,13 +312,13 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
312312
function updateMin(value) {
313313
min = parseFloat(value);
314314
ngModelCtrl.$viewValue = minMaxValidator(ngModelCtrl.$modelValue, min, max);
315-
element.attr('aria-valuemin', value);
315+
wrapper.attr('aria-valuemin', value);
316316
updateAll();
317317
}
318318
function updateMax(value) {
319319
max = parseFloat(value);
320320
ngModelCtrl.$viewValue = minMaxValidator(ngModelCtrl.$modelValue, min, max);
321-
element.attr('aria-valuemax', value);
321+
wrapper.attr('aria-valuemax', value);
322322
updateAll();
323323
}
324324
function updateStep(value) {
@@ -496,7 +496,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
496496

497497
var percent = valueToPercent(ngModelCtrl.$viewValue);
498498
scope.modelValue = ngModelCtrl.$viewValue;
499-
element.attr('aria-valuenow', ngModelCtrl.$viewValue);
499+
wrapper.attr('aria-valuenow', ngModelCtrl.$viewValue);
500500
setSliderPercent(percent);
501501
thumbText.text(ngModelCtrl.$viewValue);
502502
}

‎src/components/slider/slider.spec.js

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,13 @@ describe('md-slider', function() {
4848
it('should not set model below the min', function() {
4949
var slider = setup('ng-model="value" min="0" max="100"');
5050
pageScope.$apply('value = -50');
51-
expect(slider.attr('aria-valuenow')).toEqual('0');
51+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('0');
5252
});
5353

5454
it('should not set model above the max', function() {
5555
var slider = setup('ng-model="value" min="0" max="100"');
5656
pageScope.$apply('value = 150');
57-
expect(slider.attr('aria-valuenow')).toEqual('100');
57+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('100');
5858
});
5959

6060
it('should set model on press', function() {
@@ -145,19 +145,19 @@ describe('md-slider', function() {
145145
pageScope.max = 5;
146146
pageScope.model = 5;
147147
pageScope.$apply();
148-
expect(slider.attr('aria-valuenow')).toEqual('5');
149-
expect(slider.attr('aria-valuemax')).toEqual('5');
148+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('5');
149+
expect(getWrapper(slider).attr('aria-valuemax')).toEqual('5');
150150
pageScope.model = 6;
151151
pageScope.max = 6;
152152
pageScope.$apply();
153153
});
154154

155155
it('should have updated max correctly', function () {
156-
expect(slider.attr('aria-valuemax')).toEqual('6');
156+
expect(getWrapper(slider).attr('aria-valuemax')).toEqual('6');
157157
});
158158

159159
it('should have updated value correctly', function () {
160-
expect(slider.attr('aria-valuenow')).toEqual('6');
160+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('6');
161161
});
162162

163163
});
@@ -171,19 +171,19 @@ describe('md-slider', function() {
171171
pageScope.max = 4;
172172
pageScope.model = 3;
173173
pageScope.$apply();
174-
expect(slider.attr('aria-valuenow')).toEqual('3');
175-
expect(slider.attr('aria-valuemax')).toEqual('4');
174+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('3');
175+
expect(getWrapper(slider).attr('aria-valuemax')).toEqual('4');
176176
pageScope.model = 6;
177177
pageScope.max = 7;
178178
pageScope.$apply();
179179
});
180180

181181
it('should have updated max correctly', function () {
182-
expect(slider.attr('aria-valuemax')).toEqual('7');
182+
expect(getWrapper(slider).attr('aria-valuemax')).toEqual('7');
183183
});
184184

185185
it('should have updated value correctly', function () {
186-
expect(slider.attr('aria-valuenow')).toEqual('6');
186+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('6');
187187
});
188188

189189
});
@@ -197,19 +197,19 @@ describe('md-slider', function() {
197197
pageScope.max = 4;
198198
pageScope.model = 2;
199199
pageScope.$apply();
200-
expect(slider.attr('aria-valuenow')).toEqual('2');
201-
expect(slider.attr('aria-valuemax')).toEqual('4');
200+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('2');
201+
expect(getWrapper(slider).attr('aria-valuemax')).toEqual('4');
202202
pageScope.model = 3;
203203
pageScope.max = 5;
204204
pageScope.$apply();
205205
});
206206

207207
it('should have updated max correctly', function () {
208-
expect(slider.attr('aria-valuemax')).toEqual('5');
208+
expect(getWrapper(slider).attr('aria-valuemax')).toEqual('5');
209209
});
210210

211211
it('should have updated value correctly', function () {
212-
expect(slider.attr('aria-valuenow')).toEqual('3');
212+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('3');
213213
});
214214

215215
});
@@ -223,19 +223,19 @@ describe('md-slider', function() {
223223
pageScope.min = 5;
224224
pageScope.model = 5;
225225
pageScope.$apply();
226-
expect(slider.attr('aria-valuenow')).toEqual('5');
227-
expect(slider.attr('aria-valuemin')).toEqual('5');
226+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('5');
227+
expect(getWrapper(slider).attr('aria-valuemin')).toEqual('5');
228228
pageScope.model = 2;
229229
pageScope.min = 2;
230230
pageScope.$apply();
231231
});
232232

233233
it('should have updated min correctly', function () {
234-
expect(slider.attr('aria-valuemin')).toEqual('2');
234+
expect(getWrapper(slider).attr('aria-valuemin')).toEqual('2');
235235
});
236236

237237
it('should have updated value correctly', function () {
238-
expect(slider.attr('aria-valuenow')).toEqual('2');
238+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('2');
239239
});
240240

241241
});
@@ -249,19 +249,19 @@ describe('md-slider', function() {
249249
pageScope.min = 5;
250250
pageScope.model = 6;
251251
pageScope.$apply();
252-
expect(slider.attr('aria-valuenow')).toEqual('6');
253-
expect(slider.attr('aria-valuemin')).toEqual('5');
252+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('6');
253+
expect(getWrapper(slider).attr('aria-valuemin')).toEqual('5');
254254
pageScope.model = 3;
255255
pageScope.min = 2;
256256
pageScope.$apply();
257257
});
258258

259259
it('should have updated min correctly', function () {
260-
expect(slider.attr('aria-valuemin')).toEqual('2');
260+
expect(getWrapper(slider).attr('aria-valuemin')).toEqual('2');
261261
});
262262

263263
it('should have updated value correctly', function () {
264-
expect(slider.attr('aria-valuenow')).toEqual('3');
264+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('3');
265265
});
266266

267267
});
@@ -275,19 +275,19 @@ describe('md-slider', function() {
275275
pageScope.min = 5;
276276
pageScope.model = 7;
277277
pageScope.$apply();
278-
expect(slider.attr('aria-valuenow')).toEqual('7');
279-
expect(slider.attr('aria-valuemin')).toEqual('5');
278+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('7');
279+
expect(getWrapper(slider).attr('aria-valuemin')).toEqual('5');
280280
pageScope.model = 6;
281281
pageScope.min = 2;
282282
pageScope.$apply();
283283
});
284284

285285
it('should have updated min correctly', function () {
286-
expect(slider.attr('aria-valuemin')).toEqual('2');
286+
expect(getWrapper(slider).attr('aria-valuemin')).toEqual('2');
287287
});
288288

289289
it('should have updated value correctly', function () {
290-
expect(slider.attr('aria-valuenow')).toEqual('6');
290+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('6');
291291
});
292292

293293
});
@@ -346,17 +346,17 @@ describe('md-slider', function() {
346346

347347
pageScope.$apply('model = 102');
348348

349-
expect(slider.attr('role')).toEqual('slider');
350-
expect(slider.attr('aria-valuemin')).toEqual('100');
351-
expect(slider.attr('aria-valuemax')).toEqual('104');
352-
expect(slider.attr('aria-valuenow')).toEqual('102');
349+
expect(wrapper.attr('role')).toEqual('slider');
350+
expect(getWrapper(slider).attr('aria-valuemin')).toEqual('100');
351+
expect(getWrapper(slider).attr('aria-valuemax')).toEqual('104');
352+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('102');
353353

354354
wrapper.triggerHandler({
355355
type: 'keydown',
356356
keyCode: $mdConstant.KEY_CODE.LEFT_ARROW
357357
});
358358
$timeout.flush();
359-
expect(slider.attr('aria-valuenow')).toEqual('100');
359+
expect(getWrapper(slider).attr('aria-valuenow')).toEqual('100');
360360
});
361361

362362
it('should ignore pressdown events when disabled', function() {

0 commit comments

Comments
 (0)