Add further accessibility support

* Ensure input elements have ids
* Add role attributes to appropriate elements
* Ensure input and button elements have aria-label

Author: Andrew Eisenberg

src/bootstrap/choices.tpl.html

@@ -1,10 +1,11 @@
 <ul class="ui-select-choices ui-select-choices-content dropdown-menu"
-    role="menu" aria-labelledby="dLabel"
+    role="listbox"
     ng-show="$select.items.length > 0">
-  <li class="ui-select-choices-group">
+  <li class="ui-select-choices-group" id="ui-select-choices-{{ $select.generatedId }}" >
     <div class="divider" ng-show="$select.isGrouped && $index > 0"></div>
     <div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header" ng-bind-html="$group.name"></div>
-    <div class="ui-select-choices-row" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}">
+    <div id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row" 
+    ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}" role="option">
       <a href="javascript:void(0)" class="ui-select-choices-row-inner"></a>
     </div>
   </li>

src/bootstrap/match.tpl.html

@@ -1,12 +1,12 @@
 <div class="btn-group ui-select-match btn-block" ng-hide="$select.open" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}">
-  <button type="button" class="btn btn-default" ng-class="{'col-sm-8 col-md-10': $select.allowClear && !$select.isEmpty(),'col-sm-10 col-md-11': !$select.allowClear || $select.isEmpty()}" tabindex="-1" ;="" ng-click="$select.activate()">
+  <button aria-label="{{ $select.baseTitle }} activate" type="button" class="btn btn-default" ng-class="{'col-sm-8 col-md-10': $select.allowClear && !$select.isEmpty(),'col-sm-10 col-md-11': !$select.allowClear || $select.isEmpty()}" tabindex="-1" ;="" ng-click="$select.activate()">
     <span ng-show="$select.isEmpty()" class="text-muted">{{$select.placeholder}}</span>
     <span ng-hide="$select.isEmpty()" ng-transclude=""></span>
   </button>
-  <button class="btn btn-default col-sm-2 col-md-1" ng-if="$select.allowClear && !$select.isEmpty()" ng-click="$select.select(undefined)">
+  <button aria-label="{{ $select.baseTitle }} clear" class="btn btn-default col-sm-2 col-md-1" ng-if="$select.allowClear && !$select.isEmpty()" ng-click="$select.select(undefined)">
     <span class="glyphicon glyphicon-remove ui-select-toggle"></span>
   </button>
-  <button class="btn btn-default col-sm-2 col-md-1" ng-click="$select.activate()">
+  <button aria-label="{{ $select.baseTitle }} select" class="btn btn-default col-sm-2 col-md-1" ng-click="$select.activate()">
     <span class="caret ui-select-toggle" ng-click="$select.toggle($event)"></span>
   </button>
 </div>

src/bootstrap/select-multiple.tpl.html

@@ -11,7 +11,9 @@
            ng-disabled="$select.disabled"
            ng-hide="$select.disabled"
            ng-click="$select.activate()"
-           ng-model="$select.search">
+           ng-model="$select.search"
+           role="combobox"
+           aria-label="{{ $select.baseTitle }}">
   </div>
   <div class="ui-select-choices"></div>
 </div>

src/bootstrap/select.tpl.html

@@ -1,6 +1,10 @@
 <div class="ui-select-container ui-select-bootstrap dropdown" ng-class="{open: $select.open}">
   <div class="ui-select-match"></div>
   <input type="text" autocomplete="off" tabindex="-1"
+         aria-expanded="true"
+         aria-label="{{ $select.baseTitle }}"
+         aria-owns="ui-select-choices-{{ $select.generatedId }}"
+         aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}"
          class="form-control ui-select-search"
          placeholder="{{$select.placeholder}}"
          ng-model="$select.search"

src/select.js

@@ -897,7 +897,10 @@
         var searchInput = element.querySelectorAll('input.ui-select-search');
 
         $select.generatedId = uiSelectConfig.generateId();
-        $select.ariaLabel = attrs.title;
+        $select.baseTitle = attrs.title || 'Select box';
+        $select.focusserTitle = $select.baseTitle + ' focus';
+        $select.focusserId = 'focusser-' + $select.generatedId;
+
         $select.multiple = angular.isDefined(attrs.multiple) && (
             attrs.multiple === '' ||
             attrs.multiple.toLowerCase() === 'multiple' ||
@@ -989,7 +992,7 @@
         };
 
         //Idea from: https://github.com/ivaynberg/select2/blob/79b5bf6db918d7560bdd959109b7bcfb47edaf43/select2.js#L1954
-        var focusser = angular.element("<input ng-disabled='$select.disabled' class='ui-select-focusser ui-select-offscreen' type='text' aria-haspopup='true' role='button' />");
+        var focusser = angular.element("<input ng-disabled='$select.disabled' class='ui-select-focusser ui-select-offscreen' type='text' id='{{ $select.focusserId }}' aria-label='{{ $select.focusserTitle }}' aria-haspopup='true' role='button' />");
 
         if(attrs.tabindex){
           //tabindex might be an expression, wait until it contains the actual value before we set the focusser tabindex

src/select2/match.tpl.html

@@ -5,7 +5,7 @@
 -->
 <a class="select2-choice ui-select-match"
    ng-class="{'select2-default': $select.isEmpty()}"
-   ng-click="$select.activate()">
+   ng-click="$select.activate()" aria-label="{{ $select.baseTitle }} select">
   <span ng-show="$select.isEmpty()" class="select2-chosen">{{$select.placeholder}}</span>
   <span ng-hide="$select.isEmpty()" class="select2-chosen" ng-transclude></span>
   <abbr ng-if="$select.allowClear && !$select.isEmpty()" class="select2-search-choice-close" ng-click="$select.select(undefined)"></abbr>

src/select2/select-multiple.tpl.html

@@ -13,7 +13,7 @@
         role="combobox"
         aria-expanded="true"
         aria-owns="ui-select-choices-{{ $select.generatedId }}"
-        aria-label="{{ $select.ariaLabel }}"
+        aria-label="{{ $select.baseTitle }}"
         aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}"
         class="select2-input ui-select-search"
         placeholder="{{$select.getPlaceholder()}}"

src/select2/select.tpl.html

@@ -11,7 +11,7 @@
        role="combobox"
        aria-expanded="true"
        aria-owns="ui-select-choices-{{ $select.generatedId }}"
-       aria-label="{{ $select.ariaLabel }}"
+       aria-label="{{ $select.baseTitle }}"
        aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}"
              class="ui-select-search select2-input"
              ng-model="$select.search">

src/selectize/choices.tpl.html

@@ -1,8 +1,8 @@
 <div ng-show="$select.open" class="ui-select-choices selectize-dropdown single">
   <div class="ui-select-choices-content selectize-dropdown-content">
-    <div class="ui-select-choices-group optgroup">
+    <div class="ui-select-choices-group optgroup" role="listbox">
       <div ng-show="$select.isGrouped" class="ui-select-choices-group-label optgroup-header" ng-bind-html="$group.name"></div>
-      <div class="ui-select-choices-row" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}">
+      <div role="option" class="ui-select-choices-row" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}">
         <div class="option ui-select-choices-row-inner" data-selectable></div>
       </div>
     </div>

src/selectize/select.tpl.html

@@ -9,7 +9,8 @@
            placeholder="{{$select.placeholder}}"
            ng-model="$select.search"
            ng-hide="!$select.searchEnabled || ($select.selected && !$select.open)"
-           ng-disabled="$select.disabled">
+           ng-disabled="$select.disabled"
+           aria-label="{{ $select.baseTitle }}">
   </div>
   <div class="ui-select-choices"></div>
 </div>