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

feat(accordion): use appropriate aria tags for accessibility #5338

Closed
wants to merge 3 commits into from
Closed
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(accordion): calculating panel id and heading id from scope.$id
Towne, Jeremy authored and Towne, Jeremy committed Jan 25, 2016
commit 94b1f17fc80b08b0790d08a489fecec4612c4ab2
16 changes: 3 additions & 13 deletions src/accordion/accordion.js
Original file line number Diff line number Diff line change
@@ -92,19 +92,9 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
}
};

if(attrs.id) {
scope.id = attrs.id;
} else {
var randNum = Math.floor(Math.random() * 100000);
if(scope.heading) {
// Strip whitespace, special chars, take first 3 and last 2 chars of heading, append 5 digit random number.
// This is a fallback to generate an id if user doesn't add an id to the uib-accordion-group
var formattedHeading = scope.heading.replace(/[^\w]/gi, '');
scope.id = formattedHeading.slice(0, 3) + formattedHeading.slice(-2) + randNum;
} else {
scope.id = '' + randNum;
}
}
var id = 'accordiongroup-' + scope.$id + '-' + Math.floor(Math.random() * 10000);
scope.headingId = id + '_tab';
scope.panelId = id + '_panel';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you switch these to - instead of _?

}
};
})
10 changes: 8 additions & 2 deletions src/accordion/test/accordion.spec.js
Original file line number Diff line number Diff line change
@@ -273,8 +273,14 @@ describe('uib-accordion', function() {
expect(group).not.toHaveClass('panel-open');
});

it('should create an ID from the heading', function() {
expect(findGroupBody(0).scope().id).toEqual('tite110000');
it('should generate an Id for the heading', function() {
var groupScope = findGroupBody(0).scope();
expect(groupScope.headingId).toEqual('accordiongroup-' + groupScope.$id + '-1000_tab');
});

it('should generate an Id for the panel', function() {
var groupScope = findGroupBody(0).scope();
expect(groupScope.panelId).toEqual('accordiongroup-' + groupScope.$id + '-1000_panel');
});
});

8 changes: 4 additions & 4 deletions template/accordion/accordion-group.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<div class="panel" ng-class="panelClass || 'panel-default'">
<div role="tab" id="{{id}}_tab" aria-selected="{{isOpen}}" class="panel-heading" ng-keypress="toggleOpen($event)">
<div role="tab" id="{{::headingId}}" aria-selected="{{isOpen}}" class="panel-heading" ng-keypress="toggleOpen($event)">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href aria-expanded="{{isOpen}}" aria-controls="{{id}}_panel" tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
<a role="button" data-toggle="collapse" href aria-expanded="{{isOpen}}" aria-controls="{{::panelId}}" tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
<div id="{{id}}_panel" aria-labelledby="{{id}}_tab" aria-hidden="{{!isOpen}}" role="tabpanel" class="panel-collapse collapse" uib-collapse="!isOpen">
<div id="{{::panelId}}" aria-labelledby="{{::headingId}}" aria-hidden="{{!isOpen}}" role="tabpanel" class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" ng-transclude></div>
</div>
</div>
</div>