Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(dropdown): add WAI-ARIA attributes
Browse files Browse the repository at this point in the history
 * Add `aria-haspopup` and `and aria-expanded` attributes to dropdown toggle.
 * Dynamically change `aria-expanded` when the dropdown closes or opens.

Closes #1733
  • Loading branch information
bekos authored and pkozlowski-opensource committed Feb 7, 2014
1 parent 794954a commit 22ebd23
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 2 deletions.
4 changes: 2 additions & 2 deletions src/dropdown/docs/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
<div ng-controller="DropdownCtrl">
<!-- Simple dropdown -->
<span class="dropdown" on-toggle="toggled(open)">
<a class="dropdown-toggle">
<a href class="dropdown-toggle">
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<a>{{choice}}</a>
<a href>{{choice}}</a>
</li>
</ul>
</span>
Expand Down
11 changes: 11 additions & 0 deletions src/dropdown/dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,11 @@ angular.module('ui.bootstrap.dropdown', [])
return $scope.isOpen = arguments.length ? !!open : !$scope.isOpen;
};

// Allow other directives to watch status
this.isOpen = function() {
return $scope.isOpen;
};

$scope.$watch('isOpen', function( value ) {
self.$element.toggleClass( openClass, value );

Expand Down Expand Up @@ -103,6 +108,12 @@ angular.module('ui.bootstrap.dropdown', [])
});
}
});

// WAI-ARIA
element.attr({ 'aria-haspopup': true, 'aria-expanded': false });
scope.$watch(dropdownCtrl.isOpen, function( isOpen ) {
element.attr('aria-expanded', !!isOpen);
});
}
};
});
12 changes: 12 additions & 0 deletions src/dropdown/test/dropdown.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,18 @@ describe('dropdownToggle', function() {
checkboxEl.click();
expect($rootScope.clicked).toBeTruthy();
});

// WAI-ARIA
it('should aria markup to the `dropdown-toggle`', function() {
var toggleEl = element.find('a');
expect(toggleEl.attr('aria-haspopup')).toBe('true');
expect(toggleEl.attr('aria-expanded')).toBe('false');

clickDropdownToggle();
expect(toggleEl.attr('aria-expanded')).toBe('true');
clickDropdownToggle();
expect(toggleEl.attr('aria-expanded')).toBe('false');
});
});

describe('without trigger', function() {
Expand Down

0 comments on commit 22ebd23

Please sign in to comment.