fix(select): add attribute "selected" for select[multiple]

This helps screen readers identify the selected options,
see angular#14419

Author: Narretz

src/ng/directive/select.js

@@ -4,6 +4,11 @@
 
 var noopNgModelController = { $setViewValue: noop, $render: noop };
 
+function setOptionAsSelected(optionEl) {
+  optionEl.prop('selected', true); // needed for IE
+  optionEl.attr('selected', true);
+}
+
 /**
  * @ngdoc type
  * @name  select.SelectController
@@ -292,11 +297,6 @@ var SelectController =
       }
     });
   };
-
-  function setOptionAsSelected(optionEl) {
-    optionEl.prop('selected', true); // needed for IE
-    optionEl.attr('selected', true);
-  }
 }];
 
 /**
@@ -611,11 +611,18 @@ var selectDirective = function() {
                                                includes(value, selectCtrl.selectValueMap[option.value]));
             var currentlySelected = option.selected;
 
-            // IE and Edge will de-select selected options when you set the selected property again, e.g.
-            // when you add to the selection via shift+click/UP/DOWN
-            // Therefore, only set it if necessary
-            if ((shouldBeSelected && !currentlySelected) || (!shouldBeSelected && currentlySelected)) {
-              option.selected = shouldBeSelected;
+            // IE and Edge, adding options to the selection via shift+click/UP/DOWN,
+            // will de-select already selected options if "selected" on those options was set
+            // more than once (i.e. when the options were already selected)
+            // So we only modify the selected property if neccessary.
+            // Note: this behavior cannot be replicated via unit tests because it only shows in the
+            // actual user interface.
+            if ((shouldBeSelected && !currentlySelected)) {
+              setOptionAsSelected(jqLite(option));
+            } else if ((!shouldBeSelected && currentlySelected)) {
+              option.selected  = shouldBeSelected;
+              // Remove attribute to not confuse screen readers
+              option.removeAttribute('selected');
             }
 
           });

test/ng/directive/selectSpec.js

@@ -1098,13 +1098,21 @@ describe('select', function() {
         scope.selection = ['A'];
       });
 
+      var optionElements = element.find('option');
+
       expect(element).toEqualSelect(['A'], 'B');
+      expect(optionElements[0]).toBeMarkedAsSelected();
+      expect(optionElements[1]).not.toBeMarkedAsSelected();
 
       scope.$apply(function() {
         scope.selection.push('B');
       });
 
+      optionElements = element.find('option');
+
       expect(element).toEqualSelect(['A'], ['B']);
+      expect(optionElements[0]).toBeMarkedAsSelected();
+      expect(optionElements[1]).toBeMarkedAsSelected();
     });
 
     it('should work with optgroups', function() {