Adding input for 508 screen reader support

bithost-gmbh · Apr 29, 2019 · 808f5af · 808f5af
1 parent cd4a41f
commit 808f5af
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -122,6 +122,9 @@ Furthermore, it provides the following inputs:
 
   /** Disables scrolling to active options when option list changes. Useful for server-side search */
   @Input() disableScrollToActiveOnOptionsChanged = false;
+
+  /** Adds 508 screen reader support for search box */
+  @Input() ariaLabel = 'dropdown search';
 ```
 
 #### Customize clear icon

diff --git a/src/app/mat-select-search/mat-select-search.component.html b/src/app/mat-select-search/mat-select-search.component.html
@@ -15,7 +15,7 @@
          (input)="onInputChange($event.target.value)"
          (blur)="onBlur($event.target.value)"
          [placeholder]="placeholderLabel"
-         aria-label="dropdown search"
+         [attr.aria-label]="ariaLabel"
   />
   <mat-spinner *ngIf="searching"
           [@enterAnimation]

diff --git a/src/app/mat-select-search/mat-select-search.component.ts b/src/app/mat-select-search/mat-select-search.component.ts
@@ -163,6 +163,9 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
   /** Disables scrolling to active options when option list changes. Useful for server-side search */
   @Input() disableScrollToActiveOnOptionsChanged = false;
 
+  /** Adds 508 screen reader support for search box */
+  @Input() ariaLabel = 'dropdown search';
+
   /** Reference to the search input field */
   @ViewChild('searchSelectInput', {read: ElementRef}) searchSelectInput: ElementRef;