-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merged in A11y/SHIBUI-352 (pull request #30)
SHIBUI-352: Adding A11y keyboard and screenreader accessibility to search filter modal Approved-by: Ryan Mathis <rmathis@unicon.net>
- Loading branch information
Showing
1 changed file
with
42 additions
and
38 deletions.
There are no files selected for viewing
80 changes: 42 additions & 38 deletions
80
ui/src/app/metadata-filter/component/search-dialog.component.html
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,41 +1,45 @@ | ||
| <div class="modal-header"> | ||
| <h4 class="modal-title"> | ||
| <ng-container i18n="@@label--search-entity-id">Search Entity Id ({{ source }})</ng-container> | ||
|
|
||
| </h4> | ||
| <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="activeModal.dismiss()"> | ||
| <span aria-hidden="true">×</span> | ||
| </button> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <form [formGroup]="form"> | ||
| <div class="form-row"> | ||
| <div class="form-group col-9"> | ||
| <input type="text" | ||
| formControlName="search" | ||
| class="form-control" | ||
| /> | ||
| </div> | ||
| <div class="form-group col-3"> | ||
| <button class="btn btn-primary btn-block"> | ||
| <i class="fa fa-search"></i> | ||
| <ng-container i18n="@@action--search">Search</ng-container> | ||
| </button> | ||
| <section role="dialog" aria-label="Search filter modal" tabindex="0"> | ||
| <div class="modal-header"> | ||
| <h4 class="modal-title"> | ||
| <ng-container i18n="@@label--search-entity-id">Search Entity Id ({{ source }})</ng-container> | ||
|
|
||
| </h4> | ||
| <button type="button" class="close" data-dismiss="modal" aria-label="Close modal" (click)="activeModal.dismiss()"> | ||
| <span aria-hidden="true">×</span> | ||
| </button> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <form [formGroup]="form"> | ||
| <div class="form-row"> | ||
| <div class="form-group col-9"> | ||
| <input type="text" | ||
| formControlName="search" | ||
| class="form-control" | ||
| aria-label="Entity ID search text box" | ||
| /> | ||
| </div> | ||
| <div class="form-group col-3"> | ||
| <button class="btn btn-primary btn-block" aria-label="Search Entity ID"> | ||
| <i class="fa fa-search"></i> | ||
| <ng-container i18n="@@action--search">Search</ng-container> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| <div class="list-group list-group-flush scrolled my-2" id="list-tab" role="tablist" tabindex="0"> | ||
| <a href="" | ||
| *ngFor="let item of matches$ | async" | ||
| class="list-group-item list-group-item-action p-1" | ||
| [class.active]="item === selected" | ||
| (click)="select($event, item)" | ||
| role="menuitem">{{ item }}</a> | ||
| </div> | ||
| </form> | ||
| <div class="list-group list-group-flush scrolled my-2" id="list-tab" role="tablist"> | ||
| <a href="" | ||
| *ngFor="let item of matches$ | async" | ||
| class="list-group-item list-group-item-action p-1" | ||
| [class.active]="item === selected" | ||
| (click)="select($event, item)">{{ item }}</a> | ||
| </div> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| <button type="button" class="btn btn-primary" (click)="activeModal.close(selected)"> | ||
| <i class="fa fa-save"></i> | ||
| <ng-container i18n="@@action--select-id">Select ID</ng-container> | ||
| </button> | ||
| <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()" i18n="@@action--cancel">Cancel</button> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| <button type="button" class="btn btn-primary" (click)="activeModal.close(selected)"> | ||
| <i class="fa fa-save"></i> | ||
| <ng-container i18n="@@action--select-id">Select ID</ng-container> | ||
| </button> | ||
| <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()" i18n="@@action--cancel">Cancel</button> | ||
| </div> | ||
| </section> |