fix(chips): improve screen reader support (#11422)

make static chips accessible
add support for specifying input-aria-labelledby
add support for specifying input-aria-describedby
add a container-empty-hint API for use when there are no chips
add support for screen readers announcing chip removal and addition
add a md-removed-message API to customize the chip removal announcement
add a md-added-message API to customize the chip creation announcement
move chips-container-hint and delete-button-label to aria-labels
fixed use of aria-posinset which is 1 indexed, not 0 indexed
when a chip is removable, the label will include the delete-hint
add the same screen reader support to md-contact-chips as well
change autocomplete's aria-described by to input-aria-describedby
- fixes a conflict with duplicating messages in screen readers
fix a11y issues with demos

Fixes #2618

Author: Splaktar

src/components/autocomplete/js/autocompleteController.js

@@ -93,8 +93,8 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
       if ($scope.autofocus) {
         $element.on('focus', focusInputElement);
       }
-      if ($scope.ariaDescribedBy) {
-        elements.input.setAttribute('aria-describedby', $scope.ariaDescribedBy);
+      if ($scope.inputAriaDescribedBy) {
+        elements.input.setAttribute('aria-describedby', $scope.inputAriaDescribedBy);
       }
     });
   }
@@ -491,7 +491,7 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
           ctrl.matches = [];
 
           setLoading(false);
-          reportMessages(false, ReportType.Count);
+          reportMessages(true, ReportType.Count);
 
         } else {
           handleQuery();

src/components/autocomplete/js/autocompleteDirective.js

@@ -130,10 +130,11 @@ angular
  *     as much as possible.
  * @param {string=} md-dropdown-position Overrides the default dropdown position. Options: `top`,
  *    `bottom`.
- * @param {string=} aria-describedby A space-separated list of element IDs. This should contain the
- *     IDs of any elements that describe this autocomplete. Screen readers will read the content of
- *     these elements at the end of announcing that the autocomplete has been selected and
- *     describing its current state. The descriptive elements do not need to be visible on the page.
+ * @param {string=} input-aria-describedby A space-separated list of element IDs. This should
+ *     contain the IDs of any elements that describe this autocomplete. Screen readers will read the
+ *     content of these elements at the end of announcing that the autocomplete has been selected
+ *     and describing its current state. The descriptive elements do not need to be visible on the
+ *     page.
  * @param {string=} md-selected-message Attribute to specify the text that the screen reader will
  *    announce after a value is selected. Default is: "selected". If `Alaska` is selected in the
  *    options panel, it will read "Alaska selected". You will want to override this when your app
@@ -263,7 +264,7 @@ function MdAutocomplete ($$mdSvgRegistry) {
       itemsExpr:          '@mdItems',
       itemText:           '&mdItemText',
       placeholder:        '@placeholder',
-      ariaDescribedBy:    '@?ariaDescribedby',
+      inputAriaDescribedBy: '@?inputAriaDescribedby',
       noCache:            '=?mdNoCache',
       requireMatch:       '=?mdRequireMatch',
       selectOnMatch:      '=?mdSelectOnMatch',

src/components/chips/demoBasicUsage/index.html

@@ -5,7 +5,8 @@ <h2 class="md-title">Use a custom chip template.</h2>
 
     <form name="fruitForm">
       <md-chips ng-model="ctrl.roFruitNames" name="fruitName" readonly="ctrl.readonly"
-                md-removable="ctrl.removable" md-max-chips="5" placeholder="Enter a fruit...">
+                md-removable="ctrl.removable" md-max-chips="5" placeholder="Enter a fruit..."
+                input-aria-label="Fruit names">
         <md-chip-template>
           <strong>{{$chip}}</strong>
           <em>(fruit)</em>
@@ -26,15 +27,16 @@ <h2 class="md-title">Use the default chip template.</h2>
     <br/>
     <h2 class="md-title">Use ng-change and add-on-blur</h2>
 
-    <md-chips ng-model="ctrl.ngChangeFruitNames" md-add-on-blur="true"
-              ng-change="ctrl.onModelChange(ctrl.ngChangeFruitNames)"
+    <md-chips ng-model="ctrl.ngChangeFruitNames" md-add-on-blur="true" readonly="ctrl.readonly"
+              ng-change="ctrl.onModelChange(ctrl.ngChangeFruitNames)" input-aria-label="Fruit names"
               md-removable="ctrl.removable"></md-chips>
 
     <br/>
     <h2 class="md-title">Make chips editable.</h2>
 
     <md-chips ng-model="ctrl.editableFruitNames" readonly="ctrl.readonly"
-              md-removable="ctrl.removable" md-enable-chip-edit="true"></md-chips>
+              md-removable="ctrl.removable" md-enable-chip-edit="true"
+              input-aria-label="Fruit names"></md-chips>
 
     <br/>
     <h2 class="md-title">Use Placeholders and override hint texts.</h2>
@@ -46,14 +48,21 @@ <h2 class="md-title">Use Placeholders and override hint texts.</h2>
         placeholder="Enter a tag"
         delete-button-label="Remove Tag"
         delete-hint="Press delete to remove tag"
-        secondary-placeholder="+Tag"></md-chips>
+        md-added-message="was created"
+        md-removed-message="was deleted"
+        secondary-placeholder="+Tag"
+        input-aria-label="Tags"
+        container-hint="Chips container. Press the right and left arrow keys to change tag selection."
+        container-empty-hint="Chips container. Enter the text area, start typing, and then press enter when done to add a tag.">
+    </md-chips>
 
     <br/>
     <h2 class="md-title">Display an ordered set of objects as chips (with custom template).</h2>
     <p>Note: the variables <code>$chip</code> and <code>$index</code> are available in custom chip templates.</p>
 
     <md-chips class="custom-chips" ng-model="ctrl.vegObjs" readonly="ctrl.readonly"
-        md-transform-chip="ctrl.newVeg($chip)" md-removable="ctrl.removable">
+        md-transform-chip="ctrl.newVeg($chip)" md-removable="ctrl.removable"
+        input-aria-label="Vegetables">
       <md-chip-template>
         <span>
           <strong>[{{$index}}] {{$chip.name}}</strong>

src/components/chips/demoContactChips/index.html

@@ -1,6 +1,7 @@
 <div ng-controller="ContactChipDemoCtrl as ctrl" layout="column" ng-cloak>
 
   <md-content class="md-padding autocomplete" layout="column">
+    <label id="toLabel">To:</label>
     <md-contact-chips
         ng-model="ctrl.contacts"
         ng-change="ctrl.onModelChange(ctrl.contacts)"
@@ -11,7 +12,9 @@
         md-require-match="true"
         md-separator-keys="ctrl.keys"
         md-highlight-flags="i"
-        placeholder="To">
+        placeholder="Type name to see matches"
+        secondary-placeholder="Add another contact"
+        input-aria-label="Intended Recipients">
     </md-contact-chips>
 
     <md-list class="fixedRows">
@@ -24,7 +27,8 @@ <h3>{{contact.name}}</h3>
           <p>{{contact.email}}</p>
         </div>
       </md-list-item>
-      <md-list-item class="md-2-line contact-item selected" ng-repeat="(index, contact) in ctrl.contacts">
+      <md-list-item class="md-2-line contact-item selected"
+                    ng-repeat="(index, contact) in ctrl.contacts">
         <img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
         <div class="md-list-item-text compact">
           <h3>{{contact.name}}</h3>
@@ -35,6 +39,7 @@ <h3>{{contact.name}}</h3>
 
     <br>
     <h2 class="md-title">Searching asynchronously.</h2>
+    <label id="fromLabel">From:</label>
     <md-contact-chips
         ng-model="ctrl.asyncContacts"
         md-contacts="ctrl.delayedQuerySearch($query)"
@@ -43,7 +48,9 @@ <h2 class="md-title">Searching asynchronously.</h2>
         md-contact-email="email"
         md-require-match="true"
         md-highlight-flags="i"
-        placeholder="To">
+        placeholder="Type name to see matches"
+        secondary-placeholder="Add another contact"
+        input-aria-label="Senders">
     </md-contact-chips>
   </md-content>
 </div>

src/components/chips/demoContactChips/style.scss

@@ -14,9 +14,10 @@ md-content.autocomplete {
 .contact-item {
   box-sizing: border-box;
   &.selected {
-    opacity: 0.5;
-    h3 {
-      opacity: 0.5;
+    background-color: #E3ECF5;
+    p {
+      color: rgba(0,0,0,0.87);
+      font-weight: 400;
     }
   }
   .md-list-item-text {

src/components/chips/demoCustomInputs/index.html

@@ -1,28 +1,40 @@
 <div ng-controller="CustomInputDemoCtrl as ctrl" layout="column" ng-cloak>
 
   <md-content class="md-padding" layout="column">
-    <h2 class="md-title">Use an <code>input</code> element with no model to build an ordered set of chips.</h2>
-    <md-chips ng-model="ctrl.numberChips">
-      <input type="number" placeholder="Enter a number">
+    <h2 id="chipsNoModelTitle" class="md-title">
+      Use an <code>input</code> element with no model to build an ordered set of chips.
+    </h2>
+    <md-chips ng-model="ctrl.numberChips" input-aria-label="Numbers with no model"
+              input-aria-describedby="chipsNoModelTitle"
+              container-empty-hint="Chips container. Enter the text area, type a number, and then press enter to add a chip.">
+      <input type="number" placeholder="Enter a number" aria-label="Number chips with no model">
     </md-chips>
 
     <br/>
-    <h2 class="md-title">Use an <code>input</code>  element to build an ordered set of chips.</h2>
-    <md-chips ng-model="ctrl.numberChips2">
-      <input type="number" ng-model="ctrl.numberBuffer" placeholder="Enter a number">
+    <h2 id="chipsWithModelTitle" class="md-title">
+      Use an <code>input</code> element to build an ordered set of chips.
+    </h2>
+    <md-chips ng-model="ctrl.numberChips2" input-aria-label="Numbers with a model"
+              input-aria-describedby="chipsWithModelTitle"
+              container-empty-hint="Chips container. Enter the text area, type a number, and then press enter to add a chip.">
+      <input type="number" ng-model="ctrl.numberBuffer" placeholder="Enter a number"
+             aria-label="Number chips">
     </md-chips>
 
     <br/>
-    <h2 class="md-title">Use <code>md-autocomplete</code>  to build an ordered set of chips.</h2>
-
+    <h2 id="autocompleteTitle" class="md-title">
+      Use <code>md-autocomplete</code> to build an ordered set of chips.
+    </h2>
     <md-chips ng-model="ctrl.selectedVegetables" md-autocomplete-snap
               md-transform-chip="ctrl.transformChip($chip)"
-              md-require-match="ctrl.autocompleteDemoRequireMatch">
+              md-require-match="ctrl.autocompleteDemoRequireMatch"
+              input-aria-label="Favorite Vegetables">
       <md-autocomplete
           md-selected-item="ctrl.selectedItem"
           md-search-text="ctrl.searchText"
           md-items="item in ctrl.querySearch(ctrl.searchText)"
           md-item-text="item.name"
+          input-aria-describedby="autocompleteTitle"
           placeholder="Search for a vegetable">
         <span md-highlight-text="ctrl.searchText">{{item.name}} :: {{item.type}}</span>
       </md-autocomplete>

src/components/chips/demoCustomSeparatorKeys/index.html

@@ -1,18 +1,31 @@
 <div ng-controller="CustomSeparatorCtrl as ctrl" layout="column" ng-cloak>
   <md-content class="md-padding" layout="column">
 
-    <h2 class="md-title">Use <code>md-separator-keys</code> to customize the key codes which trigger chip creation.</h2>
+    <h2 class="md-title">
+      Use <code>md-separator-keys</code> to customize the key codes which trigger chip creation.
+    </h2>
+    <md-subheader id="commaSeparatorKeyDescription">
+      You can use either the Enter or Comma keys to trigger chip creation.
+    </md-subheader>
     <md-chips
-      ng-model="ctrl.tags"
+      ng-model="ctrl.tags" input-aria-label="Tags"
       md-separator-keys="ctrl.keys"
-      placeholder="Enter a tag"
-      secondary-placeholder="Comma separated tags"></md-chips>
+      placeholder="Ex. angularjs-material"
+      secondary-placeholder="Add another tag"
+      input-aria-describedby="commaSeparatorKeyDescription">
+    </md-chips>
     <br/>
 
     <h2 class="md-title">Add custom separator key codes such as semicolon for e-mails.</h2>
+    <md-subheader id="customSeparatorKeyDescription">
+      You can use the Semicolon, Enter, or Comma keys to trigger chip creation.
+    </md-subheader>
     <md-chips
-      ng-model="ctrl.contacts"
-      md-separator-keys="ctrl.customKeys"></md-chips>
+      ng-model="ctrl.contacts" input-aria-label="Emails"
+      md-separator-keys="ctrl.customKeys" placeholder="Ex. myemail@example.com"
+      secondary-placeholder="Add another email address"
+      input-aria-describedby="customSeparatorKeyDescription">
+    </md-chips>
 
   </md-content>
 </div>

src/components/chips/demoCustomSeparatorKeys/style.scss

@@ -0,0 +1,3 @@
+h2 {
+  margin-bottom: 0;
+}

src/components/chips/demoStaticChips/index.html

@@ -1,17 +1,15 @@
 <div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
-
   <md-content class="md-padding" layout="column">
-    <h2 class="md-title">Display a set of items as chips.</h2>
+    <h2 id="staticChipsTitle" class="md-title">Display a set of items as chips.</h2>
 
-    <md-chips>
+    <md-chips input-aria-label="Favorite Sports" input-aria-describedby="staticChipsNote">
+      <md-chip>Baseball</md-chip>
       <md-chip>Hockey</md-chip>
       <md-chip>Lacrosse</md-chip>
-      <md-chip>Baseball</md-chip>
-
       <!-- Static chips are transcluded -->
       <md-chip>{{ctrl.chipText}}</md-chip>
     </md-chips>
-    <p class="note">
+    <p id="staticChipsNote" class="note">
       Static chips cannot be selected, removed or edited, and are not part of any model.<br/>
       If no <code>ng-model</code> is provided, there are no input elements in <code>md-chips</code>.
     </p>

src/components/chips/demoValidation/index.html

@@ -1,37 +1,43 @@
 <div ng-controller="ChipsValidationCtrl as ctrl" layout="column" ng-cloak>
   <md-content class="md-padding" layout="column">
 
-    <h2 class="md-title">Required</h2>
-    <form name="fruitForm">
-      <md-chips name="fruits"
+    <h2 class="md-title">Example: Required</h2>
+    <form name="form">
+      <label id="fruitLabel">Favorite Fruits</label>
+      <md-chips name="fruits" input-aria-labelledby="fruitLabel"
                 ng-model="ctrl.selectedFruit"
                 ng-required="true"
-                placeholder="Add a fruit">
+                placeholder="Ex. Apple"
+                secondary-placeholder="Add another fruit">
       </md-chips>
       <div class="md-chips-messages"
-           ng-show="fruitForm.fruits.$dirty || fruitForm.$submitted"
-           ng-messages="fruitForm.fruits.$error">
+           ng-show="form.fruits.$touched || form.$submitted"
+           ng-messages="form.fruits.$error">
         <div ng-message="required">At least one fruit is required</div>
       </div>
-    </form>
-
 
-    <h2 class="md-title">Max Chips</h2>
-    <form name="vegetableForm">
-      <md-chips name="vegetables"
+      <h2 class="md-title">Example: Max Chips</h2>
+      <label id="vegetableLabel">Favorite Vegetables</label>
+      <md-chips name="vegetables" input-aria-labelledby="vegetableLabel"
                 ng-model="ctrl.selectedVegetables"
-                placeholder="Add a vegetable"
-                md-max-chips="5">
+                md-max-chips="5"
+                placeholder="Ex. Carrot"
+                secondary-placeholder="Add another vegetable">
       </md-chips>
       <div class="md-chips-messages"
-           ng-show="vegetableForm.vegetables.$dirty || vegetableForm.$submitted"
-           ng-messages="vegetableForm.vegetables.$error">
+           ng-show="form.vegetables.$touched || form.$submitted"
+           ng-messages="form.vegetables.$error">
         <div ng-message="md-max-chips">You reached the maximum number of vegetables</div>
       </div>
+      <br>
+      <md-button class="md-primary" type="submit" ng-click="ctrl.onSubmit(form)">
+        Submit Form
+      </md-button>
     </form>
 
     <p class="note">
-      Be aware that error messages for chips are not styled by default since they are not part of <code>md-input-container</code>.
+      Be aware that error messages for chips are not styled by default since they are not part of
+      <code>md-input-container</code>.
     </p>
 
   </md-content>