Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-23 03:22:50 +02:00
Code Issues Projects Releases Wiki Activity

[CL-439] Improve keyboard and visual a11y for chip select (#11112)

Browse Source
This commit is contained in:
Victoria League 2024-09-19 13:49:00 -04:00 committed by GitHub
parent 4327fa21f6
commit eec84d893d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
libs/components/src/chip-select/chip-select.component.html
View File

@ -52,10 +52,10 @@
type="button"
bitMenuItem
(click)="viewOption(parent, $event)"
[title]="parent.label ? ('backTo' | i18n: parent.label) : ('back' | i18n)"
[title]="'backTo' | i18n: parent.label ?? placeholderText"
>
<i slot="start" class="bwi bwi-angle-left" aria-hidden="true"></i>
{{ parent.label ? ("backTo" | i18n: parent.label) : ("back" | i18n) }}
{{ "backTo" | i18n: parent.label ?? placeholderText }}
</button>
<button
@ -76,6 +76,7 @@
(click)="option.children?.length ? viewOption(option, $event) : selectOption(option, $event)"
[disabled]="option.disabled"
[title]="option.label"
[attr.aria-haspopup]="option.children?.length ? 'menu' : null"
>
<i
*ngIf="option.icon"

34
libs/components/src/chip-select/chip-select.component.ts
View File

@ -1,10 +1,23 @@
import { Component, HostListener, Input, booleanAttribute, signal } from "@angular/core";
import {
AfterViewInit,
Component,
DestroyRef,
HostListener,
Input,
QueryList,
ViewChild,
ViewChildren,
booleanAttribute,
inject,
signal,
} from "@angular/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
import { compareValues } from "../../../common/src/platform/misc/compare-values";
import { ButtonModule } from "../button";
import { IconButtonModule } from "../icon-button";
import { MenuModule } from "../menu";
import { MenuComponent, MenuItemDirective, MenuModule } from "../menu";
import { Option } from "../select/option";
import { SharedModule } from "../shared";
import { TypographyModule } from "../typography";
@ -28,7 +41,10 @@ export type ChipSelectOption<T> = Option<T> & {
},
],
})
export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, AfterViewInit {
@ViewChild(MenuComponent) menu: MenuComponent;
@ViewChildren(MenuItemDirective) menuItems: QueryList<MenuItemDirective>;
/** Text to show when there is no selected option */
@Input({ required: true }) placeholderText: string;
@ -62,6 +78,8 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
this.focusVisibleWithin.set(false);
}
private destroyRef = inject(DestroyRef);
/** Tree constructed from `this.options` */
private rootTree: ChipSelectOption<T>;
@ -148,6 +166,16 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
this.renderedOptions = this.rootTree;
}
ngAfterViewInit() {
/**
* menuItems will change when the user navigates into or out of a submenu. when that happens, we want to
* direct their focus to the first item in the new menu
*/
this.menuItems.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
this.menu.keyManager.setFirstItemActive();
});
}
/** Control Value Accessor */
private notifyOnChange?: (value: T) => void;