-
Notifications
You must be signed in to change notification settings - Fork 80
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(stack-view): improve a11y of stackview component
• backport of #6733 • addresses vpat-592 Signed-off-by: Scott Mathis <[email protected]>
- Loading branch information
1 parent
f8006a1
commit 76463e3
Showing
7 changed files
with
209 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 54 additions & 0 deletions
54
projects/angular/src/data/stack-view/stack-view-custom-tags.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| /* | ||
| * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. | ||
| * This software is released under MIT license. | ||
| * The full license information can be found in LICENSE in the root directory of this project. | ||
| */ | ||
| import { Component } from '@angular/core'; | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { ClrStackViewModule } from './stack-view.module'; | ||
|
|
||
| @Component({ | ||
| template: ` | ||
| <clr-stack-label class="one">Title</clr-stack-label> | ||
| <clr-stack-label class="two" id="ohai">Title</clr-stack-label> | ||
| `, | ||
| }) | ||
| class TestComponent {} | ||
|
|
||
| export default function (): void { | ||
| 'use strict'; | ||
| describe('StackView Label', () => { | ||
| let fixture: ComponentFixture<any>; | ||
| let compiled: any; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| imports: [ClrStackViewModule], | ||
| declarations: [TestComponent], | ||
| }); | ||
| fixture = TestBed.createComponent(TestComponent); | ||
| fixture.detectChanges(); | ||
| compiled = fixture.nativeElement; | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| fixture.destroy(); | ||
| }); | ||
|
|
||
| it('projects content', () => { | ||
| expect(compiled.textContent).toMatch(/Title/); | ||
| }); | ||
|
|
||
| it('auto assigns an id if none is given', () => { | ||
| const testme = compiled.querySelector('clr-stack-label.one'); | ||
| expect(testme.hasAttribute('id')).toBe(true); | ||
| expect(testme.getAttribute('id').indexOf('clr-stack-label-clr-id-') > -1).toBe(true); | ||
| }); | ||
|
|
||
| it('keeps the id if the stack-view-label already has one', () => { | ||
| const testme = compiled.querySelector('clr-stack-label.two'); | ||
| expect(testme.hasAttribute('id')).toBe(true); | ||
| expect(testme.getAttribute('id')).toBe('ohai'); | ||
| }); | ||
| }); | ||
| } |
43 changes: 40 additions & 3 deletions
43
projects/angular/src/data/stack-view/stack-view-custom-tags.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,49 @@ | ||
| /* | ||
| * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved. | ||
| * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. | ||
| * This software is released under MIT license. | ||
| * The full license information can be found in LICENSE in the root directory of this project. | ||
| */ | ||
| import { Directive } from '@angular/core'; | ||
| import { Directive, Component, Inject, Input, OnInit } from '@angular/core'; | ||
| import { UNIQUE_ID, UNIQUE_ID_PROVIDER } from '../../utils/id-generator/id-generator.service'; | ||
|
|
||
| @Directive({ selector: 'clr-stack-label, clr-stack-content' }) | ||
| @Directive({ selector: 'clr-stack-content' }) | ||
| export class ClrStackViewCustomTags { | ||
| // No behavior | ||
| // The only purpose is to "declare" the tag in Angular | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'clr-stack-label', | ||
| template: '<ng-content></ng-content>', | ||
| providers: [UNIQUE_ID_PROVIDER], | ||
| host: { | ||
| '[attr.id]': 'id', | ||
| }, | ||
| }) | ||
| export class ClrStackViewLabel implements OnInit { | ||
| constructor(@Inject(UNIQUE_ID) private uniqueId: string) {} | ||
|
|
||
| private _generatedId: string = null; | ||
|
|
||
| private _id: string = null; | ||
|
|
||
| @Input() | ||
| set id(val: string) { | ||
| if (typeof val === 'string' && val !== '') { | ||
| this._id = val; | ||
| } else { | ||
| this._id = this._generatedId + ''; | ||
| } | ||
| } | ||
| get id() { | ||
| return this._id; | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| this._generatedId = 'clr-stack-label-' + this.uniqueId; | ||
|
|
||
| if (!this.id) { | ||
| this._id = this._generatedId + ''; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters