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

Commit 9159384

Browse files
SplaktarSplaktar
committed
fix(radio-button): when no value selected, first button not announced on focus
- when no value selected, set `aria-activedescendant` to first button's `id` - properly define labels and `aria-labelledby` in demos - improve some JSDoc and types - rename some variables to make them more readable - remove unused parameters - improvements to multi-column demo - remove unneeded or unused styles and elements - use `aria-describedby` to make first column available to screen reader users Fixes #11973. Fixes #11923. Fixes #11974.
1 parent 87bcb47 commit 9159384

File tree

9 files changed

+103
-137
lines changed

9 files changed

+103
-137
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ angular.module('dialogDemo1', ['ngMaterial'])
7979
templateUrl: 'tabDialog.tmpl.html',
8080
parent: angular.element(document.body),
8181
targetEvent: ev,
82-
clickOutsideToClose:true
82+
clickOutsideToClose: true
8383
})
8484
.then(function(answer) {
8585
$scope.status = 'You said the information was "' + answer + '".';

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

+13-17
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
<div>
22
<form ng-submit="submit()" ng-controller="AppCtrl" ng-cloak>
3-
<p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>
4-
5-
<md-radio-group ng-model="data.group1">
6-
3+
<p>
4+
<label id="favoriteFruit">Favorite Fruit:</label> <span class="radioValue">{{ data.group1 }}</span>
5+
</p>
6+
<md-radio-group ng-model="data.group1" aria-labelledby="favoriteFruit">
77
<md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
88
<md-radio-button value="Banana">Banana</md-radio-button>
99
<md-radio-button value="Mango">Mango</md-radio-button>
10-
1110
</md-radio-group>
12-
1311
<hr />
1412

15-
<p>Selected Value: <span class="radioValue">{{ data.group2 }}</span></p>
16-
17-
<md-radio-group ng-model="data.group2" class="md-primary">
18-
13+
<p>
14+
<label id="selectedValue">Selected Value:</label> <span class="radioValue">{{ data.group2 }}</span>
15+
</p>
16+
<md-radio-group ng-model="data.group2" class="md-primary" aria-labelledby="selectedValue">
1917
<md-radio-button ng-repeat="d in radioData"
2018
ng-value="d.value"
2119
ng-disabled=" d.isDisabled "
@@ -27,22 +25,20 @@
2725
Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
2826
sit amet dapibus tortor ligula non nibh.
2927
</span>
30-
3128
</md-radio-button>
32-
3329
</md-radio-group>
34-
3530
<p>
3631
<md-button class="md-raised" ng-click="addItem()" type="button">Add</md-button>
3732
<md-button class="md-raised" ng-click="removeItem()" type="button">Remove</md-button>
3833
</p>
39-
4034
<hr />
4135

42-
<p style="margin-bottom: 0;">Graphic radio buttons need to be labeled with the <code>aria-label</code> attribute.</p>
43-
<p style="margin-top: 0;">Selected Avatar: <span class="radioValue">{{ data.group3 }}</span></p>
36+
<p class="demo-description">Graphic radio buttons need to be labeled with the <code>aria-label</code> attribute.</p>
37+
<p>
38+
<label id="selectedAvatar">Selected Avatar:</label> <span class="radioValue">{{ data.group3 }}</span>
39+
</p>
4440

45-
<md-radio-group ng-model="data.group3">
41+
<md-radio-group ng-model="data.group3" aria-labelledby="selectedAvatar">
4642
<md-radio-button ng-repeat="it in avatarData"
4743
ng-value="it.value"
4844
aria-label="{{it.title}}">

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

-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
angular
32
.module('radioDemo1', ['ngMaterial'])
43
.controller('AppCtrl', function($scope) {
@@ -30,7 +29,6 @@ angular
3029
{ label: '4', value: '4' }
3130
];
3231

33-
3432
$scope.submit = function() {
3533
alert('submit');
3634
};

‎src/components/radioButton/demoBasicUsage/style.css

+4-13
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,33 @@
1-
21
body {
32
padding: 20px;
43
}
5-
64
hr {
75
margin-left: -20px;
86
opacity: 0.3;
97
}
10-
118
md-radio-group {
129
width: 150px;
1310
}
14-
1511
p:last-child {
1612
padding-bottom: 50px;
1713
}
18-
19-
20-
[ng-controller] {
14+
form {
2115
padding: 0 20px;
2216
}
23-
2417
.radioValue {
2518
margin-left: 5px;
2619
color: #0f9d58;
2720
font-weight: bold;
28-
padding:5px;
29-
3021
}
31-
3222
md-icon {
3323
margin: 0 20px 20px;
3424
width: 128px;
3525
height: 128px;
3626
}
37-
38-
3927
.ipsum {
4028
color: saddlebrown;
4129
font-size: 0.9em;
4230
}
31+
.demo-description {
32+
margin-bottom: 0;
33+
}

‎src/components/radioButton/demoMultiColumn/index.html

+16-33
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,23 @@
1-
<div ng-controller='ContactController as cc' class="radioDemo2 bidi">
1+
<div ng-controller="ContactController as ctrl" class="demo-bidi">
22
<h2>Contact List</h2>
3-
<md-divider></md-divider>
3+
<md-divider></md-divider>
44

5-
<md-radio-group ng-model="cc.selectedId" >
6-
<div ng-repeat='person in cc.contacts' class="row">
7-
<div flex layout='row' layout-padding layout-align="start center" >
8-
9-
<div flex style="max-width:200px;">
10-
{{person.title}}
11-
</div>
12-
<md-radio-button flex
13-
ng-value="person.id"
14-
class="md-primary" >
15-
16-
{{person.fullName}}
17-
18-
</md-radio-button>
5+
<md-radio-group ng-model="ctrl.selectedId" aria-labelledby="selectedUser">
6+
<div ng-repeat="person in ctrl.contacts" class="demo-row">
7+
<div flex layout="row" layout-padding layout-align="start center">
198

9+
<div id="{{'demoTitle-' + person.id}}" class="demo-title">
10+
{{person.title}}
2011
</div>
21-
</div>
22-
</md-radio-group>
23-
24-
<md-divider></md-divider>
25-
<div class="summary" flex layout="row" layout-align="space-between center">
26-
<div flex-initial>
27-
<span class="title">Selected User</span>: <span class="md-checked">{{cc.selectedUser()}}</span>
12+
<md-radio-button flex ng-value="person.id" class="md-primary" aria-describedby="{{'demoTitle-' + person.id}}">
13+
{{person.fullName}}
14+
</md-radio-button>
2815
</div>
2916
</div>
30-
</div>
31-
32-
<style>
33-
34-
html[dir="rtl"] .bidi {
35-
padding-right: 20px;
36-
padding-left:0;
37-
}
38-
39-
</style>
17+
</md-radio-group>
4018

19+
<md-divider></md-divider>
20+
<p class="md-padding md-margin">
21+
<label id="selectedUser">Selected User:</label> <span class="demo-checked">{{ctrl.selectedUser()}}</span>
22+
</p>
23+
</div>

‎src/components/radioButton/demoMultiColumn/script.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
angular
2-
.module('radioDemo2', ['ngMaterial'])
2+
.module('radioMultiColumnDemo', ['ngMaterial'])
33
.controller('ContactController', function($scope, $filter) {
44
var self = this;
55

‎src/components/radioButton/demoMultiColumn/style.css

+13-43
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,23 @@
1-
div.radioDemo2 {
2-
margin-bottom: 20px;
3-
}
4-
5-
61
h2 {
7-
margin-left : 15px;
8-
}
9-
p {
10-
width:400px;
11-
margin-top:10px;
12-
margin-left : 10px;
13-
padding-top:10px;
14-
border-top: 2px solid #ddd;
2+
margin: 16px;
153
}
16-
17-
.md-checked {
18-
background-color : #ECFAFB;
4+
.demo-checked {
5+
background-color: #ECFAFB;
196
border-radius: 2px;
207
}
21-
22-
md-button.md-raised, button.md-raised {
23-
width: 200px;
24-
}
25-
26-
.row {
27-
border-bottom: 1px dashed #ddd;
8+
.demo-row {
9+
border-bottom: 1px dashed #ddd;
2810
}
29-
30-
div.row:last-child {
11+
.demo-row:last-child {
3112
border-bottom: 0px dashed #ddd;
3213
}
33-
34-
35-
36-
.summary {
37-
width: 100%;
38-
padding-top:10px;
39-
margin-left: 25px;
40-
margin-top: 20px;
41-
margin-bottom:-5px
42-
}
43-
44-
45-
.title {
14+
label {
4615
font-weight: bolder;
4716
}
48-
49-
.selectedUser .md-checked {
50-
padding : 8px;
51-
width: 100px;
52-
17+
.demo-title {
18+
flex: 0 1 200px;
19+
}
20+
html[dir="rtl"] .demo-bidi {
21+
padding-right: 20px;
22+
padding-left: 0;
5323
}

0 commit comments

Comments
 (0)