-
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
Signed-off-by: Scott Mathis <[email protected]>
- Loading branch information
1 parent
98b8f63
commit bdebf3e
Showing
7 changed files
with
215 additions
and
36 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 + ''; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.