fix: only apply listbox role when open

This is a fix for a severe error found using the Google Accessibility Developer Tool audit:
Elements with ARIA roles must ensure required owned elements are present

Author: edclements

src/bootstrap/choices.tpl.html

@@ -1,5 +1,4 @@
 <ul class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu"
-    role="listbox"
     ng-show="$select.open && $select.items.length > 0">
   <li class="ui-select-choices-group" id="ui-select-choices-{{ $select.generatedId }}" >
     <div class="divider" ng-show="$select.isGrouped && $index > 0"></div>

src/select2/choices.tpl.html

@@ -1,7 +1,7 @@
 <ul tabindex="-1" 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="$group.name"></div>
-    <ul role="listbox"
+    <ul
       id="ui-select-choices-{{ $select.generatedId }}" ng-class="{'select2-result-sub': $select.choiceGrouped($group), 'select2-result-single': !$select.choiceGrouped($group) }">
       <li role="option" ng-attr-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>

src/selectize/choices.tpl.html

@@ -1,7 +1,7 @@
 <div ng-show="$select.open" class="ui-select-choices ui-select-dropdown selectize-dropdown"
      ng-class="{'single': !$select.multiple, 'multi': $select.multiple}">
   <div class="ui-select-choices-content selectize-dropdown-content">
-    <div class="ui-select-choices-group optgroup" role="listbox">
+    <div class="ui-select-choices-group optgroup">
       <div ng-show="$select.isGrouped" class="ui-select-choices-group-label optgroup-header" ng-bind="$group.name"></div>
       <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>

src/uiSelectChoicesDirective.js

@@ -80,6 +80,14 @@ uis.directive('uiSelectChoices',
           var refreshDelay = scope.$eval(attrs.refreshDelay);
           $select.refreshDelay = refreshDelay !== undefined ? refreshDelay : uiSelectConfig.refreshDelay;
         });
+
+        scope.$watch('$select.open', function(open) {
+          if (open) {
+            tElement.attr('role', 'listbox');
+          } else {
+            tElement.removeAttr('role');
+          }
+        });
       };
     }
   };