diff options
| author | Dixsie Wolmers <dixsiew@gmail.com> | 2019-09-09 13:21:12 -0500 |
|---|---|---|
| committer | Gunnar Mills <gmills@us.ibm.com> | 2019-09-11 21:03:50 +0000 |
| commit | db1e89edef8aca03f926a62e54390e5110d26a19 (patch) | |
| tree | 63c4b9be10081472512d686a75fd9d3bebbabc7f | |
| parent | 383591afc2c5c327f1a7628056cc33e4b52f4a23 (diff) | |
| download | phosphor-webui-db1e89edef8aca03f926a62e54390e5110d26a19.tar.gz phosphor-webui-db1e89edef8aca03f926a62e54390e5110d26a19.zip | |
Fix filter bar clear filter button
Makes filter button screen reader friendly
and accessible.
- Adds icon directive for close icon
- Adds button type
- Icon is aria-hidden and uses an aria-label attribute with
the value set to clear filter
Tested:
- Filter inputs clear on close button click
Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: Ifcbe603c2771156fe7a03359b144e0a0acd5e3f1
4 files changed, 12 insertions, 4 deletions
diff --git a/app/common/directives/log-search-control.html b/app/common/directives/log-search-control.html index 1184bda..8ebaba3 100644 --- a/app/common/directives/log-search-control.html +++ b/app/common/directives/log-search-control.html @@ -4,7 +4,9 @@ <label for="content__search-input">Event Log Search</label> <input id="content__search-input" type="text" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/> <div class="search-submit__wrapper"> - <button class="clear-input" ng-click="clear()">✕</button> + <button class="btn" type="button" aria-label="clear filter" ng-click="clear()"> + <icon file="icon-close.svg" aria-hidden="true"></icon> + </button> <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/> </div> </div> diff --git a/app/server-health/controllers/inventory-overview-controller.html b/app/server-health/controllers/inventory-overview-controller.html index 24c70b0..c0f05d2 100644 --- a/app/server-health/controllers/inventory-overview-controller.html +++ b/app/server-health/controllers/inventory-overview-controller.html @@ -15,7 +15,9 @@ <label for="content__search-input">Search</label> <input id="content__search-input" type="text" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/> <div class="search-submit__wrapper"> - <button class="clear-input" ng-click="clear()">✕</button> + <button class="btn" type="button" aria-label="clear filter" ng-click="clear()"> + <icon file="icon-close.svg" aria-hidden="true"></icon> + </button> <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/> </div> </div> diff --git a/app/server-health/controllers/sensors-overview-controller.html b/app/server-health/controllers/sensors-overview-controller.html index 8669c33..6f2b2d2 100644 --- a/app/server-health/controllers/sensors-overview-controller.html +++ b/app/server-health/controllers/sensors-overview-controller.html @@ -12,7 +12,9 @@ <label for="content__search-input">Sensors Search</label> <input id="content__search-input" type="text" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/> <div class="search-submit__wrapper"> - <button class="clear-input" ng-click="clear()">✕</button> + <button class="btn" type="button" aria-label="clear filter" ng-click="clear()"> + <icon file="icon-close.svg" aria-hidden="true"></icon> + </button> <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/> </div> </div> diff --git a/app/server-health/controllers/syslog-controller.html b/app/server-health/controllers/syslog-controller.html index 6a5e8ea..9e04f49 100644 --- a/app/server-health/controllers/syslog-controller.html +++ b/app/server-health/controllers/syslog-controller.html @@ -34,7 +34,9 @@ <label for="content__search-input">Search</label> <input id="content__search-input" type="text" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/> <div class="search-submit__wrapper"> - <button class="clear-input" ng-click="clear()">✕</button> + <button class="btn" type="button" aria-label="clear filter" ng-click="clear()"> + <icon file="icon-close.svg" aria-hidden="true"></icon> + </button> <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/> </div> </div> |
