Skip to content

Commit 67032ca

Browse files
devversiontinayuangao
authored andcommitted
fix(toolbar): add toolbar role to host element (#2914)
* Add the toolbar `role` attribute to the host element to have proper accessibility support. Fixes #2909
1 parent 46edc23 commit 67032ca

File tree

2 files changed

+19
-5
lines changed

2 files changed

+19
-5
lines changed

src/lib/toolbar/toolbar.spec.ts

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import {Component} from '@angular/core';
2-
import {TestBed, async} from '@angular/core/testing';
2+
import {TestBed, async, ComponentFixture} from '@angular/core/testing';
33
import {By} from '@angular/platform-browser';
44
import {MdToolbarModule} from './toolbar';
55

66

77
describe('MdToolbar', () => {
88

9+
let fixture: ComponentFixture<TestApp>;
10+
let testComponent: TestApp;
11+
let toolbarElement: HTMLElement;
12+
913
beforeEach(async(() => {
1014
TestBed.configureTestingModule({
1115
imports: [MdToolbarModule.forRoot()],
@@ -15,11 +19,13 @@ describe('MdToolbar', () => {
1519
TestBed.compileComponents();
1620
}));
1721

18-
it('should apply class based on color attribute', () => {
19-
let fixture = TestBed.createComponent(TestApp);
20-
let testComponent = fixture.debugElement.componentInstance;
21-
let toolbarElement = fixture.debugElement.query(By.css('md-toolbar')).nativeElement;
22+
beforeEach(() => {
23+
fixture = TestBed.createComponent(TestApp);
24+
testComponent = fixture.debugElement.componentInstance;
25+
toolbarElement = fixture.debugElement.query(By.css('md-toolbar')).nativeElement;
26+
});
2227

28+
it('should apply class based on color attribute', () => {
2329
testComponent.toolbarColor = 'primary';
2430
fixture.detectChanges();
2531

@@ -37,6 +43,11 @@ describe('MdToolbar', () => {
3743
expect(toolbarElement.classList.contains('md-accent')).toBe(false);
3844
expect(toolbarElement.classList.contains('md-warn')).toBe(true);
3945
});
46+
47+
it('should set the toolbar role on the host', () => {
48+
expect(toolbarElement.getAttribute('role')).toBe('toolbar');
49+
});
50+
4051
});
4152

4253

src/lib/toolbar/toolbar.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ export class MdToolbarRow {}
2222
selector: 'md-toolbar, mat-toolbar',
2323
templateUrl: 'toolbar.html',
2424
styleUrls: ['toolbar.css'],
25+
host: {
26+
role: 'toolbar'
27+
},
2528
changeDetection: ChangeDetectionStrategy.OnPush,
2629
encapsulation: ViewEncapsulation.None
2730
})

0 commit comments

Comments
 (0)