Add acessibility

examples/demo-bind-to-single-property-async.html

@@ -65,7 +65,7 @@
   <h3>Select2 theme</h3>
   <h4>Single property binding with async data</h4>
   <p>Selected: {{personAsync.selected}}</p>
-  <ui-select ng-model="personAsync.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="personAsync.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Single property binding with async data">
     <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name || $select.selected}}</ui-select-match>
     <ui-select-choices repeat="person.email as person in peopleAsync | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>

examples/demo-bind-to-single-property.html

@@ -64,7 +64,7 @@
 
   <h3>Select2 theme</h3>
   <p>Selected: {{person.selected}}</p>
-  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
     <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
     <ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>

examples/demo-disable-search.html

@@ -65,7 +65,7 @@
 
   <h3>Bootstrap theme</h3>
   <p>Selected: {{person.selected}}</p>
-  <ui-select ng-model="person.selected" theme="bootstrap" search-enabled="searchEnabled" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="person.selected" theme="bootstrap" search-enabled="searchEnabled" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
     <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
     <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>

examples/demo-event-on-select.html

@@ -64,7 +64,7 @@
 
   <h3>Select2 theme</h3>
   <p>Selected: {{person.selected}}</p>
-  <ui-select ng-model="person.selected" theme="select2" on-select="someFunction($item, $model)" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="person.selected" theme="select2" on-select="someFunction($item, $model)" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
     <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
     <ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -79,7 +79,7 @@ <h3>Select2 theme</h3>
   <br>
   <br>
   <h1>Event Result</h1>
-  Called <b>{{counter+0}}</b> times selected
+  Called <strong>{{counter+0}}</strong> times selected
   <div>item = {{eventResult.item}}</div>
   <div>model = {{eventResult.model}}</div>
 </body>

examples/demo-groupby.html

@@ -66,7 +66,7 @@ <h3>Select2 theme</h3>
   <p>Selected: {{person.selected}}</p>
 
   <h2>Grouped using a string (group-by="'country'")</h2>
-  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
     <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
     <ui-select-choices group-by="'country'" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -78,7 +78,7 @@ <h2>Grouped using a string (group-by="'country'")</h2>
     </ui-select>
 
   <h2>Grouped using a function (group-by="someGroupFn")</h2>
-  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
     <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
     <ui-select-choices group-by="someGroupFn" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -90,7 +90,7 @@ <h2>Grouped using a function (group-by="someGroupFn")</h2>
     </ui-select>
 
   <h2>Simple (no groupBy)</h2>
-  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
     <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
     <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>

examples/demo-multi-select.html

@@ -113,7 +113,7 @@ <h3>Multi select</h3>
   <h1>Multi Selection Demos</h1>
 
   <h3>Array of strings</h3>
-  <ui-select multiple ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 300px;">
+  <ui-select multiple ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 300px;" title="Choose a color">
     <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
     <ui-select-choices repeat="color in availableColors | filter:$select.search">
       {{color}}
@@ -136,7 +136,7 @@ <h3>Array of objects</h3>
 
   <hr>
   <h3>Deselect callback with single property binding</h3>
-  <ui-select multiple ng-model="multipleDemo.deSelectedPeople" on-remove="removed($item, $model)" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;">
+  <ui-select multiple ng-model="multipleDemo.deSelectedPeople" on-remove="removed($item, $model)" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;" title="Choose a person">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
     <ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -151,7 +151,7 @@ <h3>Deselect callback with single property binding</h3>
 
   <hr>
   <h3>Array of objects with single property binding</h3>
-  <ui-select multiple ng-model="multipleDemo.selectedPeopleSimple" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;">
+  <ui-select multiple ng-model="multipleDemo.selectedPeopleSimple" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;" title="Choose a person">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
     <ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -165,7 +165,7 @@ <h3>Array of objects with single property binding</h3>
 
   <hr>
   <h3>Array of objects (with groupBy)</h3>
-  <ui-select multiple ng-model="multipleDemo.selectedPeopleWithGroupBy" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;">
+  <ui-select multiple ng-model="multipleDemo.selectedPeopleWithGroupBy" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;" title="Choose a person">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
     <ui-select-choices group-by="someGroupFn" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>

examples/demo-tagging.html

@@ -66,7 +66,7 @@ <h1>Tagging Demos</h1>
 
   <h3>Simple String Tags</h3>
   <h4>(With Custom Tag Label)</h4>
-  <ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
+  <ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" style="width: 300px;" title="Choose a color">
     <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
     <ui-select-choices repeat="color in availableColors | filter:$select.search">
       {{color}}
@@ -77,7 +77,7 @@ <h4>(With Custom Tag Label)</h4>
 
   <h3>Simple String Tags </h3>
   <h4>(Predictive Search Model / No Labels)</h4>
-  <ui-select multiple tagging tagging-label="false" ng-model="multipleDemo.colors2" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
+  <ui-select multiple tagging tagging-label="false" ng-model="multipleDemo.colors2" theme="bootstrap" ng-disabled="disabled" style="width: 300px;" title="Choose a color">
     <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
     <ui-select-choices repeat="color in availableColors | filter:$select.search">
       {{color}}
@@ -87,7 +87,7 @@ <h4>(Predictive Search Model / No Labels)</h4>
   <hr>
 
   <h3>Object Tags</h3>
-  <ui-select multiple tagging="tagTransform" ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" style="width: 800px;">
+  <ui-select multiple tagging="tagTransform" ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" style="width: 800px;" title="Choose a person">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
     <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-if="person.isTag" ng-bind-html="person.name +' <small>(new)</small>'| highlight: $select.search"></div>
@@ -103,7 +103,7 @@ <h3>Object Tags</h3>
 
   <h3>Object Tags with Tokenization (Space, Forward Slash, Comma)</h3>
   <strong>Note that the SPACE character can't be used literally, use the keyword SPACE</strong>
-  <ui-select multiple tagging="tagTransform" tagging-tokens="SPACE|,|/" ng-model="multipleDemo.selectedPeople2" theme="bootstrap" ng-disabled="disabled" style="width: 800px;">
+  <ui-select multiple tagging="tagTransform" tagging-tokens="SPACE|,|/" ng-model="multipleDemo.selectedPeople2" theme="bootstrap" ng-disabled="disabled" style="width: 800px;" title="Choose a person">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
     <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-if="person.isTag" ng-bind-html="person.name + ' ' + $select.taggingLabel | highlight: $select.search"></div>

examples/demo.html

@@ -68,7 +68,8 @@ <h3>Bootstrap theme</h3>
              theme="bootstrap"
              ng-disabled="disabled"
              reset-search-input="false"
-             style="width: 300px;">
+             style="width: 300px;"
+             title="Choose an address">
     <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
     <ui-select-choices repeat="address in addresses track by $index"
              refresh="refreshAddresses($select.search)"
@@ -79,7 +80,7 @@ <h3>Bootstrap theme</h3>
 
   <h3>Select2 theme</h3>
   <p>Selected: {{person.selected}}</p>
-  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
     <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
     <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -92,7 +93,7 @@ <h3>Select2 theme</h3>
 
   <h3>Selectize theme</h3>
   <p>Selected: {{country.selected}}</p>
-  <ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
+  <ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;" title="Choose a country">
     <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
     <ui-select-choices repeat="country in countries | filter: $select.search">
       <span ng-bind-html="country.name | highlight: $select.search"></span>

examples/select2-bootstrap3.html

@@ -53,7 +53,7 @@
         <label class="col-sm-3 control-label">Default</label>
         <div class="col-sm-6">
 
-          <ui-select ng-model="person.selected" theme="select2" class="form-control">
+          <ui-select ng-model="person.selected" theme="select2" class="form-control" title="Choose a person">
             <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
             <ui-select-choices repeat="item in people | filter: $select.search">
               <div ng-bind-html="item.name | highlight: $select.search"></div>
@@ -68,7 +68,7 @@
         <label class="col-sm-3 control-label">Grouped</label>
         <div class="col-sm-6">
 
-          <ui-select ng-model="person.selected" theme="select2" class="form-control">
+          <ui-select ng-model="person.selected" theme="select2" class="form-control" title="Choose a person">
             <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
             <ui-select-choices group-by="'group'" repeat="item in people | filter: $select.search">
               <span ng-bind-html="item.name | highlight: $select.search"></span>
@@ -84,7 +84,7 @@
         <div class="col-sm-6">
           <div class="input-group select2-bootstrap-append">
 
-            <ui-select ng-model="person.selected" theme="select2" class="form-control">
+            <ui-select ng-model="person.selected" theme="select2" class="form-control" title="Choose a person">
               <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
               <ui-select-choices repeat="item in people | filter: $select.search">
                 <span ng-bind-html="item.name | highlight: $select.search"></span>
@@ -106,7 +106,7 @@
         <label class="col-sm-3 control-label">Disabled</label>
         <div class="col-sm-6">
 
-          <ui-select ng-model="person.selected" theme="select2" class="form-control" ng-disabled="true">
+          <ui-select ng-model="person.selected" theme="select2" class="form-control" ng-disabled="true" title="Choose a person">
             <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
             <ui-select-choices repeat="item in people | filter: $select.search">
               <div ng-bind-html="item.name | highlight: $select.search"></div>

examples/selectize-bootstrap3.html

@@ -68,7 +68,7 @@
         <label class="col-sm-3 control-label">Default</label>
         <div class="col-sm-6">
 
-          <ui-select ng-model="person.selected" theme="selectize">
+          <ui-select ng-model="person.selected" theme="selectize" title="Choose a person">
             <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
             <ui-select-choices repeat="item in people | filter: $select.search">
               <div ng-bind-html="item.name | highlight: $select.search"></div>
@@ -83,7 +83,7 @@
         <label class="col-sm-3 control-label">Grouped</label>
         <div class="col-sm-6">
 
-          <ui-select ng-model="person.selected" theme="selectize">
+          <ui-select ng-model="person.selected" theme="selectize" title="Choose a person">
             <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
             <ui-select-choices group-by="'group'" repeat="item in people | filter: $select.search">
               <span ng-bind-html="item.name | highlight: $select.search"></span>
@@ -121,7 +121,7 @@
         <label class="col-sm-3 control-label">Disabled</label>
         <div class="col-sm-6">
 
-          <ui-select ng-model="person.selected" theme="selectize" class="form-control" ng-disabled="true">
+          <ui-select ng-model="person.selected" theme="selectize" class="form-control" ng-disabled="true" title="Choose a person">
             <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
             <ui-select-choices repeat="item in people | filter: $select.search">
               <div ng-bind-html="item.name | highlight: $select.search"></div>

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,10 +1,9 @@
 <div class="ui-select-match" ng-hide="$select.open" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}">
-  <button type="button" class="btn btn-default btn-block ui-select-toggle" tabindex="-1" ;="" ng-disabled="$select.disabled" ng-click="$select.activate()">
+  <button aria-label="{{ $select.baseTitle }} activate" type="button" class="btn btn-default btn-block ui-select-toggle" tabindex="-1" ;="" ng-disabled="$select.disabled" ng-click="$select.activate()">
     <span ng-show="$select.isEmpty()" class="ui-select-placeholder text-muted">{{$select.placeholder}}</span>
     <span ng-hide="$select.isEmpty()" class="ui-select-match-text" ng-class="{'ui-select-allow-clear': $select.allowClear && !$select.isEmpty()}" ng-transclude=""></span>
     <i class="caret pull-right" ng-click="$select.toggle($event)"></i>
-  </button>
-  <button type="button" class="ui-select-clear" ng-if="$select.allowClear && !$select.isEmpty()" ng-click="$select.select(undefined)">
+  <button aria-label="{{ $select.baseTitle }} clear" type="button" class="ui-select-clear" ng-if="$select.allowClear && !$select.isEmpty()" ng-click="$select.select(undefined)">
     <i class="glyphicon glyphicon-remove"></i>
   </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>