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.
angular · Jul 30, 2020 · 9159384 · 9159384
1 parent 87bcb47
commit 9159384
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 137 deletions.
diff --git a/src/components/dialog/demoBasicUsage/script.js b/src/components/dialog/demoBasicUsage/script.js
@@ -79,7 +79,7 @@ angular.module('dialogDemo1', ['ngMaterial'])
       templateUrl: 'tabDialog.tmpl.html',
       parent: angular.element(document.body),
       targetEvent: ev,
-      clickOutsideToClose:true
+      clickOutsideToClose: true
     })
         .then(function(answer) {
           $scope.status = 'You said the information was "' + answer + '".';

diff --git a/src/components/radioButton/demoBasicUsage/index.html b/src/components/radioButton/demoBasicUsage/index.html
@@ -1,21 +1,19 @@
 <div>
   <form ng-submit="submit()" ng-controller="AppCtrl" ng-cloak>
-    <p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>
-
-    <md-radio-group ng-model="data.group1">
-
+    <p>
+      <label id="favoriteFruit">Favorite Fruit:</label> <span class="radioValue">{{ data.group1 }}</span>
+    </p>
+    <md-radio-group ng-model="data.group1" aria-labelledby="favoriteFruit">
       <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
       <md-radio-button value="Banana">Banana</md-radio-button>
       <md-radio-button value="Mango">Mango</md-radio-button>
-
     </md-radio-group>
-
     <hr />
 
-    <p>Selected Value: <span class="radioValue">{{ data.group2 }}</span></p>
-
-    <md-radio-group ng-model="data.group2" class="md-primary">
-
+    <p>
+      <label id="selectedValue">Selected Value:</label> <span class="radioValue">{{ data.group2 }}</span>
+    </p>
+    <md-radio-group ng-model="data.group2" class="md-primary" aria-labelledby="selectedValue">
         <md-radio-button ng-repeat="d in radioData"
                          ng-value="d.value"
                          ng-disabled=" d.isDisabled "
@@ -27,22 +25,20 @@
             Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
             sit amet dapibus tortor ligula non nibh.
           </span>
-
         </md-radio-button>
-
     </md-radio-group>
-
     <p>
       <md-button class="md-raised" ng-click="addItem()" type="button">Add</md-button>
       <md-button class="md-raised" ng-click="removeItem()" type="button">Remove</md-button>
     </p>
-
     <hr />
 
-    <p style="margin-bottom: 0;">Graphic radio buttons need to be labeled with the <code>aria-label</code> attribute.</p>
-    <p style="margin-top: 0;">Selected Avatar: <span class="radioValue">{{ data.group3 }}</span></p>
+    <p class="demo-description">Graphic radio buttons need to be labeled with the <code>aria-label</code> attribute.</p>
+    <p>
+      <label id="selectedAvatar">Selected Avatar:</label> <span class="radioValue">{{ data.group3 }}</span>
+    </p>
 
-    <md-radio-group ng-model="data.group3">
+    <md-radio-group ng-model="data.group3" aria-labelledby="selectedAvatar">
       <md-radio-button ng-repeat="it in avatarData"
                        ng-value="it.value"
                        aria-label="{{it.title}}">

diff --git a/src/components/radioButton/demoBasicUsage/script.js b/src/components/radioButton/demoBasicUsage/script.js
@@ -1,4 +1,3 @@
-
 angular
   .module('radioDemo1', ['ngMaterial'])
   .controller('AppCtrl', function($scope) {
@@ -30,7 +29,6 @@ angular
       { label: '4', value: '4' }
     ];
 
-
     $scope.submit = function() {
       alert('submit');
     };

diff --git a/src/components/radioButton/demoBasicUsage/style.css b/src/components/radioButton/demoBasicUsage/style.css
@@ -1,42 +1,33 @@
-
 body {
   padding: 20px;
 }
-
 hr {
   margin-left: -20px;
   opacity: 0.3;
 }
-
 md-radio-group {
   width: 150px;
 }
-
 p:last-child {
   padding-bottom: 50px;
 }
-
-
-[ng-controller] {
+form {
   padding: 0 20px;
 }
-
 .radioValue {
   margin-left: 5px;
   color: #0f9d58;
   font-weight: bold;
-  padding:5px;
-
 }
-
 md-icon {
   margin: 0 20px 20px;
   width: 128px;
   height: 128px;
 }
-
-
 .ipsum {
   color: saddlebrown;
   font-size: 0.9em;
 }
+.demo-description {
+  margin-bottom: 0;
+}
diff --git a/src/components/radioButton/demoMultiColumn/index.html b/src/components/radioButton/demoMultiColumn/index.html
@@ -1,40 +1,23 @@
-<div ng-controller='ContactController as cc' class="radioDemo2 bidi">
+<div ng-controller="ContactController as ctrl" class="demo-bidi">
   <h2>Contact List</h2>
-    <md-divider></md-divider>
+  <md-divider></md-divider>
 
-    <md-radio-group ng-model="cc.selectedId" >
-      <div ng-repeat='person in cc.contacts' class="row">
-        <div flex layout='row' layout-padding layout-align="start center" >
-
-          <div flex style="max-width:200px;">
-            {{person.title}}
-          </div>
-          <md-radio-button flex
-              ng-value="person.id"
-              class="md-primary" >
-
-            {{person.fullName}}
-
-          </md-radio-button>
+  <md-radio-group ng-model="ctrl.selectedId" aria-labelledby="selectedUser">
+    <div ng-repeat="person in ctrl.contacts" class="demo-row">
+      <div flex layout="row" layout-padding layout-align="start center">
 
+        <div id="{{'demoTitle-' + person.id}}" class="demo-title">
+          {{person.title}}
         </div>
-      </div>
-    </md-radio-group>
-
-    <md-divider></md-divider>
-    <div class="summary" flex layout="row" layout-align="space-between center">
-      <div flex-initial>
-        <span class="title">Selected User</span>: <span class="md-checked">{{cc.selectedUser()}}</span>
+        <md-radio-button flex ng-value="person.id" class="md-primary" aria-describedby="{{'demoTitle-' + person.id}}">
+          {{person.fullName}}
+        </md-radio-button>
       </div>
     </div>
-</div>
-
-<style>
-
-  html[dir="rtl"] .bidi {
-    padding-right: 20px;
-    padding-left:0;
-  }
-
-</style>
+  </md-radio-group>
 
+  <md-divider></md-divider>
+  <p class="md-padding md-margin">
+    <label id="selectedUser">Selected User:</label> <span class="demo-checked">{{ctrl.selectedUser()}}</span>
+  </p>
+</div>
diff --git a/src/components/radioButton/demoMultiColumn/script.js b/src/components/radioButton/demoMultiColumn/script.js
@@ -1,5 +1,5 @@
 angular
-  .module('radioDemo2', ['ngMaterial'])
+  .module('radioMultiColumnDemo', ['ngMaterial'])
   .controller('ContactController', function($scope, $filter) {
     var self = this;
 

diff --git a/src/components/radioButton/demoMultiColumn/style.css b/src/components/radioButton/demoMultiColumn/style.css
@@ -1,53 +1,23 @@
-div.radioDemo2 {
-    margin-bottom: 20px;
-}
-
-
 h2 {
-  margin-left : 15px;
-}
-p {
-  width:400px;
-  margin-top:10px;
-  margin-left : 10px;
-  padding-top:10px;
-  border-top: 2px solid #ddd;
+  margin: 16px;
 }
-
-.md-checked {
-  background-color : #ECFAFB;
+.demo-checked {
+  background-color: #ECFAFB;
   border-radius: 2px;
 }
-
-md-button.md-raised, button.md-raised {
-  width: 200px;
-}
-
-.row {
-    border-bottom: 1px dashed #ddd;
+.demo-row {
+  border-bottom: 1px dashed #ddd;
 }
-
-div.row:last-child {
+.demo-row:last-child {
   border-bottom: 0px dashed #ddd;
 }
-
-
-
-.summary {
-  width: 100%;
-  padding-top:10px;
-  margin-left: 25px;
-  margin-top: 20px;
-  margin-bottom:-5px
-}
-
-
-.title {
+label {
   font-weight: bolder;
 }
-
-.selectedUser .md-checked {
-  padding : 8px;
-  width: 100px;
-
+.demo-title {
+  flex: 0 1 200px;
+}
+html[dir="rtl"] .demo-bidi {
+  padding-right: 20px;
+  padding-left: 0;
 }