fix(select): expose and preserve aria-label

Closes #1893

src/components/select/select.js

@@ -162,6 +162,7 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $interpolate, $compile,
  ngModel.$render = function() {
  originalRender();
  syncLabelText();
+ setAriaLabel();
  };
 
  var lineHeight;
@@ -199,6 +200,10 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $interpolate, $compile,
 
  scope.$$postDigest(syncLabelText);
 
+ function setAriaLabel() {
+ element.attr('aria-label', labelEl.text());
+ }
+
  function syncLabelText() {
  if (selectContainer) {
  selectMenuCtrl = selectMenuCtrl || selectContainer.find('md-select-menu').controller('mdSelectMenu');
@@ -258,8 +263,7 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $interpolate, $compile,
  element.attr({
  'role': 'combobox',
  'id': 'select_' + $mdUtil.nextUid(),
- 'aria-expanded': 'false',
- 'aria-labelledby': labelEl.attr('id')
+ 'aria-expanded': 'false'
  });
 
  scope.$on('$destroy', function() {
@@ -760,7 +764,6 @@ function SelectProvider($$interimElementProvider) {
  return $mdUtil.transitionEndPromise(opts.selectEl, {timeout: 350});
 
  function configureAria() {
- opts.selectEl.attr('aria-labelledby', opts.target.attr('id'));
  opts.target.attr('aria-expanded', 'true');
  }
 

src/components/select/select.spec.js

@@ -586,13 +586,34 @@ describe('<md-select-menu>', function() {
  selectMenus.remove();
  }));
 
- it('sets up the aria-labeledby attribute', inject(function($document) {
- openSelect(el);
- var selectId = el.attr('id');
- var selectMenu = $document.find('md-select-menu');
- expect(selectId.length).toBeTruthy();
- expect(selectMenu.attr('aria-labelledby')).toBe(selectId);
+ it('adds an aria-label from placeholder', function() {
+ var select = setupSelect('ng-model="someVal", placeholder="Hello world"');
+ expect(select.attr('aria-label')).toBe('Hello world');
+ });
+
+ it('adds an aria-label from label element', inject(function($rootScope, $compile) {
+ var select = $compile('<md-select ng-model="val">' +
+ '<md-select-label>Pick</md-select-label>' +
+ '<md-option value="1">One</md-option>' +
+ '<md-option value="2">Two</md-option>' +
+ '<md-option value="3">Three</md-option>' +
+ '</md-select>')($rootScope);
+ $rootScope.$digest();
+ expect(select.attr('aria-label')).toBe('Pick');
+ }));
+
+ it('preserves aria-label on value change', inject(function($rootScope) {
+ $rootScope.$apply('model = "b"');
+
+ var select = setupSelect('placeholder="Pick" ng-model="$root.model"', ['a','b','c']);
+ select.triggerHandler({
+ type: 'click',
+ target: select.find('md-option')[2]
+ });
+
+ expect(select.attr('aria-label')).toBe('Pick');
  }));
+
  it('sets up the aria-expanded attribute', inject(function($document) {
  expect(el.attr('aria-expanded')).toBe('false');
  openSelect(el);