();
+ @ViewChild('actionButton', { read: ElementRef, static: true })
+ private actionButtonRef: ElementRef | undefined;
+
+ public isFocused = false;
public tokenActive = false;
public closeActive = false;
public tabIndex = 0;
- #ariaLabelOrDefault: string;
#elementRef: ElementRef;
- #resourcesSvc: SkyLibResourcesService;
#_disabled = false;
#_dismissible = true;
- constructor(elementRef: ElementRef, resourcesSvc: SkyLibResourcesService) {
+ constructor(elementRef: ElementRef) {
this.#elementRef = elementRef;
- this.#resourcesSvc = resourcesSvc;
+ }
+
+ protected onFocusIn(): void {
+ if (!this.isFocused) {
+ this.tokenFocus.emit();
+ this.isFocused = true;
+ }
+ }
- this.#ariaLabelOrDefault = this.#getDefaultAriaLabel();
+ protected onFocusOut(event: FocusEvent): void {
+ this.isFocused = this.#elementRef.nativeElement.contains(
+ event.relatedTarget
+ );
}
public dismissToken(event: Event): void {
@@ -103,7 +116,7 @@ export class SkyTokenComponent {
}
public focusElement(): void {
- this.#elementRef.nativeElement.querySelector('.sky-token').focus();
+ this.actionButtonRef?.nativeElement.focus();
}
public setTokenActive(tokenActive: boolean): void {
@@ -113,12 +126,4 @@ export class SkyTokenComponent {
public setCloseActive(closeActive: boolean): void {
this.closeActive = closeActive;
}
-
- #getDefaultAriaLabel(): string {
- // TODO: Need to implement the async `getString` method in a breaking change.
- return this.#resourcesSvc.getStringForLocale(
- { locale: 'en-US' },
- 'skyux_tokens_dismiss_button_title'
- );
- }
}
diff --git a/libs/components/indicators/src/lib/modules/tokens/tokens.component.html b/libs/components/indicators/src/lib/modules/tokens/tokens.component.html
index ba00ed63c3..d532a6360f 100644
--- a/libs/components/indicators/src/lib/modules/tokens/tokens.component.html
+++ b/libs/components/indicators/src/lib/modules/tokens/tokens.component.html
@@ -1,11 +1,11 @@
{
fixture.detectChanges();
expect(component.tokensComponent?.activeIndex).toEqual(1);
expect(document.activeElement).toEqual(
- tokenElements.item(1).querySelector('.sky-token')
+ tokenElements.item(1).querySelector('.sky-token-btn-action')
);
SkyAppTestUtility.fireDomEvent(tokenElements.item(1), 'keydown', {
@@ -47,7 +48,7 @@ describe('Tokens component', () => {
expect(component.tokensComponent?.activeIndex).toEqual(0);
expect(document.activeElement).toEqual(
- tokenElements.item(0).querySelector('.sky-token')
+ tokenElements.item(0).querySelector('.sky-token-btn-action')
);
}
@@ -58,7 +59,9 @@ describe('Tokens component', () => {
component.messageStream?.next({ type });
fixture.detectChanges();
- const tokenElements = fixture.nativeElement.querySelectorAll('.sky-token');
+ const tokenElements = fixture.nativeElement.querySelectorAll(
+ '.sky-token-btn-action'
+ );
const focusedToken = tokenElements[index] as HTMLElement;
expect(component.tokensComponent?.activeIndex).toEqual(index);
@@ -318,8 +321,9 @@ describe('Tokens component', () => {
fixture.detectChanges();
- const tokenElements =
- fixture.nativeElement.querySelectorAll('.sky-token');
+ const tokenElements = fixture.nativeElement.querySelectorAll(
+ '.sky-token-btn-action'
+ );
const lastToken = tokenElements[tokenElements.length - 1] as HTMLElement;
expect(component.tokensComponent?.activeIndex).toEqual(
@@ -464,22 +468,40 @@ describe('Tokens component', () => {
component.publishTokens();
fixture.detectChanges();
- let tokenDivs: NodeListOf =
+ let tokenButtons: NodeListOf =
component.tokensElementRef?.nativeElement.querySelectorAll(
- '.sky-token'
+ '.sky-token-btn-action'
);
- expect(tokenDivs.item(0).tabIndex).toEqual(0);
+ expect(tokenButtons.item(0).tabIndex).toEqual(0);
component.focusable = false;
fixture.detectChanges();
- tokenDivs =
+ tokenButtons =
component.tokensElementRef?.nativeElement.querySelectorAll(
'.sky-token'
);
- expect(tokenDivs.item(0).tabIndex).toEqual(-1);
+ expect(tokenButtons.item(0).tabIndex).toEqual(-1);
await expectAsync(fixture.nativeElement).toBeAccessible();
});
});
+
+ it('should be accessible', async () => {
+ const a11yFixture = TestBed.createComponent(SkyTokenA11yTestComponent);
+
+ a11yFixture.detectChanges();
+
+ await expectAsync(
+ a11yFixture.nativeElement.querySelector(
+ '[data-sky-id="non-dismissible-tokens"]'
+ )
+ ).toBeAccessible();
+
+ await expectAsync(
+ a11yFixture.nativeElement.querySelector(
+ '[data-sky-id="dismissible-tokens"]'
+ )
+ ).toBeAccessible();
+ });
});
diff --git a/libs/components/indicators/src/lib/modules/tokens/tokens.component.ts b/libs/components/indicators/src/lib/modules/tokens/tokens.component.ts
index 7c4cf9811d..cf925e2761 100644
--- a/libs/components/indicators/src/lib/modules/tokens/tokens.component.ts
+++ b/libs/components/indicators/src/lib/modules/tokens/tokens.component.ts
@@ -221,11 +221,12 @@ export class SkyTokensComponent implements OnDestroy {
constructor(changeDetector: ChangeDetectorRef) {
this.#changeDetector = changeDetector;
+ this.#initMessageStream();
// Angular calls the trackBy function without applying the component instance's scope.
// Use a fat-arrow function so the current component instance's trackWith property can
// be referenced.
- this.trackTokenFn = (_index, item) => {
+ this.trackTokenFn = (_index, item): unknown => {
if (this.trackWith) {
return item.value[this.trackWith];
}
diff --git a/libs/components/indicators/testing/src/tokens/token-harness.ts b/libs/components/indicators/testing/src/tokens/token-harness.ts
index 000c0fae9c..997f053d33 100644
--- a/libs/components/indicators/testing/src/tokens/token-harness.ts
+++ b/libs/components/indicators/testing/src/tokens/token-harness.ts
@@ -11,6 +11,8 @@ export class SkyTokenHarness extends ComponentHarness {
*/
public static hostSelector = 'sky-token';
+ #getActionButton = this.locatorFor('button.sky-token-btn-action');
+
#getDismissButton = this.locatorFor('button.sky-token-btn-close');
#getWrapper = this.locatorFor('.sky-token');
@@ -50,7 +52,7 @@ export class SkyTokenHarness extends ComponentHarness {
public async dismiss(): Promise {
if (!(await this.isDismissible())) {
throw new Error(
- 'Could not dismiss the token because it is not dismissable.'
+ 'Could not dismiss the token because it is not dismissible.'
);
}
@@ -68,20 +70,20 @@ export class SkyTokenHarness extends ComponentHarness {
* Whether the token is disabled.
*/
public async isDisabled(): Promise {
- return (await this.#getWrapper()).hasClass('sky-btn-disabled');
+ return (await this.#getWrapper()).hasClass('sky-token-disabled');
}
/**
* Whether the token is dismissible.
*/
public async isDismissible(): Promise {
- return (await this.#getWrapper()).hasClass('sky-token-dismissable');
+ return (await this.#getWrapper()).hasClass('sky-token-dismissible');
}
/**
* Whether the token is focused.
*/
public async isFocused(): Promise {
- return (await this.#getWrapper()).isFocused();
+ return (await this.#getActionButton()).isFocused();
}
}
diff --git a/libs/components/indicators/testing/src/tokens/tokens-harness.spec.ts b/libs/components/indicators/testing/src/tokens/tokens-harness.spec.ts
index 852a236cc7..ce5d3c7ce7 100644
--- a/libs/components/indicators/testing/src/tokens/tokens-harness.spec.ts
+++ b/libs/components/indicators/testing/src/tokens/tokens-harness.spec.ts
@@ -89,7 +89,7 @@ describe('Tokens harness', () => {
await expectAsync(tokens[0].isDismissible()).toBeResolvedTo(false);
await expectAsync(tokens[0].dismiss()).toBeRejectedWithError(
- 'Could not dismiss the token because it is not dismissable.'
+ 'Could not dismiss the token because it is not dismissible.'
);
});
@@ -147,7 +147,9 @@ describe('Tokens harness', () => {
await expectAsync(firstToken.isFocused()).toBeResolvedTo(false);
- fixture.nativeElement.querySelectorAll('sky-token .sky-btn')[0].focus();
+ fixture.nativeElement
+ .querySelectorAll('sky-token .sky-token-btn')[0]
+ .focus();
await expectAsync(firstToken.isFocused()).toBeResolvedTo(true);
});
diff --git a/libs/components/lookup/src/lib/modules/lookup/lookup.component.spec.ts b/libs/components/lookup/src/lib/modules/lookup/lookup.component.spec.ts
index e1e7cb9dac..5734bd9e2b 100644
--- a/libs/components/lookup/src/lib/modules/lookup/lookup.component.spec.ts
+++ b/libs/components/lookup/src/lib/modules/lookup/lookup.component.spec.ts
@@ -106,14 +106,14 @@ describe('Lookup component', function () {
if (async) {
(
document.querySelectorAll(
- '#my-async-lookup .sky-lookup-tokens .sky-token'
+ '#my-async-lookup .sky-lookup-tokens .sky-token-btn-action'
)[index] as HTMLElement
).click();
} else {
(
- document.querySelectorAll('#my-lookup .sky-lookup-tokens .sky-token')[
- index
- ] as HTMLElement
+ document.querySelectorAll(
+ '#my-lookup .sky-lookup-tokens .sky-token-btn-action'
+ )[index] as HTMLElement
).click();
}
fixture.detectChanges();
@@ -301,9 +301,11 @@ describe('Lookup component', function () {
function getTokenElements(async: boolean = false): NodeListOf {
if (async) {
- return document.querySelectorAll('#my-async-lookup .sky-token');
+ return document.querySelectorAll(
+ '#my-async-lookup .sky-token-btn-action'
+ );
} else {
- return document.querySelectorAll('#my-lookup .sky-token');
+ return document.querySelectorAll('#my-lookup .sky-token-btn-action');
}
}
@@ -3486,10 +3488,9 @@ describe('Lookup component', function () {
performSearch('s', fixture);
selectSearchResult(0, fixture);
- const tokenElements = getTokenElements();
const input = getInputElement(lookupComponent);
- triggerClick(tokenElements.item(0), fixture, true);
+ clickToken(0, fixture, false);
expect(document.activeElement).not.toEqual(input);
}));
@@ -6446,10 +6447,9 @@ describe('Lookup component', function () {
performSearch('s', fixture);
selectSearchResult(0, fixture);
- const tokenElements = getTokenElements();
const input = getInputElement(lookupComponent);
- triggerClick(tokenElements.item(0), fixture, true);
+ clickToken(0, fixture, false);
expect(document.activeElement).not.toEqual(input);
}));
@@ -6537,10 +6537,9 @@ describe('Lookup component', function () {
performSearch('s', fixture);
selectSearchResult(0, fixture);
- const tokenElements = getTokenElements();
const input = getInputElement(lookupComponent);
- triggerClick(tokenElements.item(0), fixture, true);
+ clickToken(0, fixture, false);
expect(document.activeElement).not.toEqual(input);
}));
diff --git a/libs/components/select-field/src/lib/modules/select-field/select-field.component.spec.ts b/libs/components/select-field/src/lib/modules/select-field/select-field.component.spec.ts
index d3db3624f5..a584e5e591 100644
--- a/libs/components/select-field/src/lib/modules/select-field/select-field.component.spec.ts
+++ b/libs/components/select-field/src/lib/modules/select-field/select-field.component.spec.ts
@@ -97,7 +97,7 @@ describe('Select field component', () => {
function closeToken(index: number) {
const tokens = getTokens();
- tokens.item(index).querySelector('button').click();
+ tokens.item(index).querySelector('button.sky-token-btn-close').click();
tick();
fixture.detectChanges();
}