add combobox support

Author: 0xF013

src/select.js

@@ -84,14 +84,18 @@
     };
   }
 
+  var latestId = 0;
   angular.module('ui.select', [])
 
   .constant('uiSelectConfig', {
     theme: 'bootstrap',
     searchEnabled: true,
     placeholder: '', // Empty by default, like HTML tag <select>
     refreshDelay: 1000, // In milliseconds
-    closeOnSelect: true
+    closeOnSelect: true,
+    generateId: function() {
+      return latestId++;
+    }
   })
 
   // See Rename minErr and make it accessible from outside https://github.com/angular/angular.js/issues/6913
@@ -892,6 +896,8 @@
 
         var searchInput = element.querySelectorAll('input.ui-select-search');
 
+        $select.generatedId = uiSelectConfig.generateId();
+        $select.ariaLabel = attrs.title;
         $select.multiple = angular.isDefined(attrs.multiple) && (
             attrs.multiple === '' ||
             attrs.multiple.toLowerCase() === 'multiple' ||

src/select2/choices.tpl.html

@@ -1,8 +1,9 @@
 <ul class="ui-select-choices ui-select-choices-content select2-results">
   <li class="ui-select-choices-group" ng-class="{'select2-result-with-children': $select.choiceGrouped($group) }">
     <div ng-show="$select.choiceGrouped($group)" class="ui-select-choices-group-label select2-result-label" ng-bind-html="$group.name"></div>
-    <ul ng-class="{'select2-result-sub': $select.choiceGrouped($group), 'select2-result-single': !$select.choiceGrouped($group) }">
-      <li class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.isActive(this), 'select2-disabled': $select.isDisabled(this)}">
+    <ul role="listbox"
+      id="ui-select-choices-{{ $select.generatedId }}" ng-class="{'select2-result-sub': $select.choiceGrouped($group), 'select2-result-single': !$select.choiceGrouped($group) }">
+      <li role="option" id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.isActive(this), 'select2-disabled': $select.isDisabled(this)}">
         <div class="select2-result-label ui-select-choices-row-inner"></div>
       </li>
     </ul>

src/select2/select-multiple.tpl.html

@@ -4,13 +4,18 @@
   <ul class="select2-choices">
     <span class="ui-select-match"></span>
     <li class="select2-search-field">
-      <input 
-        type="text" 
-        autocomplete="off" 
-        autocorrect="off" 
-        autocapitalize="off" 
-        spellcheck="false" 
-        class="select2-input ui-select-search" 
+      <input
+        type="text"
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+        role="combobox"
+        aria-expanded="true"
+        aria-owns="ui-select-choices-{{ $select.generatedId }}"
+        aria-label="{{ $select.ariaLabel }}"
+        aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}"
+        class="select2-input ui-select-search"
         placeholder="{{$select.getPlaceholder()}}"
         ng-disabled="$select.disabled"
         ng-hide="$select.disabled"

src/select2/select.tpl.html

@@ -1,13 +1,18 @@
 <div class="ui-select-container select2 select2-container"
      ng-class="{'select2-container-active select2-dropdown-open open': $select.open,
                 'select2-container-disabled': $select.disabled,
-                'select2-container-active': $select.focus, 
+                'select2-container-active': $select.focus,
                 'select2-allowclear': $select.allowClear && !$select.isEmpty()}">
   <div class="ui-select-match"></div>
   <div class="select2-drop select2-with-searchbox select2-drop-active"
        ng-class="{'select2-display-none': !$select.open}">
     <div class="select2-search" ng-show="$select.searchEnabled">
       <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+       role="combobox"
+       aria-expanded="true"
+       aria-owns="ui-select-choices-{{ $select.generatedId }}"
+       aria-label="{{ $select.ariaLabel }}"
+       aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}"
              class="ui-select-search select2-input"
              ng-model="$select.search">
     </div>