chips: accessibility improvements

[marcysutton]

There are a few issues in mdChips that make them hard to use with a screen reader, including:

• The input needs a label enforced - right now it's empty if no placeholder
• When the input is focused, it should announce the label, not "Press delete to remove this chip"
• Chips need to be uniquely labeled along with the delete hint text. Ex: when a chip is focused, it should say: "Apple. Press delete to remove this chip".
• Need to verify chips can be removed from touch devices with screen readers running.

[marcysutton]

This is complicated by the fact that there are three different ways a Chips component can get a native <input>, which is the thing requiring a label:

1. Using an autocomplete, which has its own <input>.
2. Manually including an <input>.
3. Chips dynamically adds an <input>.

If there is a placeholder on the <md-chips> or <md-contact-chips>, we can copy that text to the child input IF it doesn't already have aria-label (likely when manually adding an input). If the parent has aria-label supplied, that should be moved to the input instead of the placeholder.

Bonus points for supporting aria-labelledby. But I can't even get a reliable aria-label in all three scenarios.

[marcysutton]

An accessible, rendered chips component would look like this (regardless of API used by the developer):

<md-chips ng-model="ctrl.roFruitNames" tabindex="-1">
    <md-chips-wrap ng-if="!$mdChipsCtrl.readonly || $mdChipsCtrl.items.length > 0" 
         ng-keydown="$mdChipsCtrl.chipKeydown($event)" 
         ng-class="{ 'md-focused': $mdChipsCtrl.hasFocus() }" class="md-chips">

        <md-chip ng-repeat="$chip in $mdChipsCtrl.items" index="0" 
            ng-class="{'md-focused': $mdChipsCtrl.selectedChip == $index}" 
            class="md-chip">
            <div class="md-chip-content" tabindex="-1" 
                ng-focus="!$mdChipsCtrl.readonly && $mdChipsCtrl.selectChip($index)">
                <md-chip-template>
                    <strong>Apple</strong>
                    <em>(fruit)</em>
                </md-chip-template>
          </div>          
          <div class="md-chip-remove-container"> 
              <button class="md-chip-remove" 
                    ng-click="$mdChipsCtrl.removeChipAndFocusInput($$replacedScope.$index)" 
                    type="button" 
                    aria-hidden="true" tabindex="-1"
                    id="uniqueButtonID">        
                    <md-icon md-svg-icon="md-close" aria-hidden="true"></md-icon>
             </button>
           </div>
        </md-chip>

        <div class="md-chip-input-container">        
               <input ng-model="$mdChipsCtrl.chipBuffer" 
                         ng-focus="$mdChipsCtrl.onInputFocus()" 
                         ng-blur="$mdChipsCtrl.onInputBlur()" 
                         ng-keydown="$mdChipsCtrl.inputKeydown($event)"
                         aria-label="Some label"
                         placeholder="Placeholder"
                         aria-describedby="deleteHintText_0">
               <div id="deleteHintText_0" style="display: none;">
                   Press delete to remove {{ lastChip.name }} 
               </div>
        </div>          
    </md-chips-wrap>
</md-chips>

The major differences are:

• The input has aria-label, different from the placeholder (it should support both but default to copying from placeholder).
• The input has aria-describedby pointing to a new hint text node telling a screen reader user that the delete key will remove the last chip added (with a unique name).
• md-chip-remove buttons don't need visually-hidden text with aria-hidden and tabindex="-1".

[marcysutton]

@ThomasBurleson aria-label isn't making its way to the input in the chips demo that uses autocomplete. The static chips demo also throws a warning. Can you take a look at those?