Skip to content

Commit

Permalink
feat: improve accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
f-necas committed Jul 27, 2023
1 parent 4c855d4 commit f9ad862
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 14 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -59,16 +59,18 @@
#overlayContainer
>
<div
class="border border-gray-300 rounded mb-2 mx-2 p-2 min-h-[44px] flex flex-row flex-wrap gap-2"
class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
>
<button
type="button"
*ngFor="let selected of selectedChoices"
[title]="selected.label"
class="max-w-full bg-main text-white rounded pr-[7px] pl-2.5 flex gap-2 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity"
class="max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1"
(click)="select(selected, false)"
>
<div class="text-sm truncate leading-[26px]">{{ selected.label }}</div>
<div class="text-sm truncate leading-[26px] px-2">
{{ selected.label }}
</div>
<div
class="flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0"
>
Expand All @@ -78,16 +80,14 @@

<div *ngIf="allowSearch" class="w-[50%] relative grow shrink">
<input
class="w-full px-1 truncate text-[14px] outline-0 overlaySearchInput"
cdkTrapFocus
[cdkTrapFocusAutoCapture]="true"
(focus)="scrollToTopOfModal()"
#searchFieldInput
class="w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none"
[(ngModel)]="searchInputValue"
[placeholder]="'multiselect.filter.placeholder' | translate"
/>
<button
*ngIf="!!searchInputValue"
class="absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input"
class="absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2"
(click)="clearSearchInputValue($event)"
>
<mat-icon class="!h-[10px] !w-[12px] text-[12px]"> close </mat-icon>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ export class DropdownMultiselectComponent {
@ViewChild(CdkConnectedOverlay) overlay: CdkConnectedOverlay
@ViewChild('overlayContainer', { read: ElementRef })
overlayContainer: ElementRef
@ViewChild('searchFieldInput')
searchFieldInput: ElementRef<HTMLInputElement>
@ViewChildren('checkBox', { read: ElementRef })
checkboxes: QueryList<ElementRef>
overlayPositions: ConnectedPosition[] = [
Expand Down Expand Up @@ -86,6 +88,12 @@ export class DropdownMultiselectComponent {

constructor(private scrollStrategies: ScrollStrategyOptions) {}

private setFocus() {
setTimeout(() => {
this.searchFieldInput.nativeElement.focus()
}, 0)
}

openOverlay() {
this.overlayWidth =
this.overlayOrigin.elementRef.nativeElement.getBoundingClientRect()
Expand All @@ -94,6 +102,8 @@ export class DropdownMultiselectComponent {
? `${this.maxRows * 29 + 60}px`
: 'none'
this.overlayOpen = true
this.setFocus()

// this will wait for the checkboxes to be referenced and the overlay to be attached
return Promise.all([
this.overlay.attach.pipe(take(1)).toPromise(),
Expand Down Expand Up @@ -182,9 +192,6 @@ export class DropdownMultiselectComponent {
clearSearchInputValue(event: Event) {
this.searchInputValue = ''
event.stopPropagation()
}

scrollToTopOfModal() {
this.overlayContainer.nativeElement.scroll(0, -40)
this.setFocus()
}
}
2 changes: 0 additions & 2 deletions libs/ui/inputs/src/lib/ui-inputs.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ import {
import { CheckToggleComponent } from './check-toggle/check-toggle.component'
import { CopyTextButtonComponent } from './copy-text-button/copy-text-button.component'
import { MatTooltipModule } from '@angular/material/tooltip'
import { A11yModule } from '@angular/cdk/a11y'

@NgModule({
declarations: [
Expand Down Expand Up @@ -76,7 +75,6 @@ import { A11yModule } from '@angular/cdk/a11y'
OverlayModule,
MatCheckboxModule,
MatTooltipModule,
A11yModule,
],
exports: [
DropdownSelectorComponent,
Expand Down

0 comments on commit f9ad862

Please sign in to comment.