commit db1e89edef8aca03f926a62e54390e5110d26a19
author Dixsie Wolmers <dixsiew@gmail.com> Mon Sep 09 13:21:12 2019 -0500
committer Gunnar Mills <gmills@us.ibm.com> Wed Sep 11 21:03:50 2019 +0000
tree 63c4b9be10081472512d686a75fd9d3bebbabc7f
parent 383591afc2c5c327f1a7628056cc33e4b52f4a23

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

app/common/directives/log-search-control.html

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()">&#10005;</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>

app/server-health/controllers/inventory-overview-controller.html

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()">&#10005;</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>

app/server-health/controllers/sensors-overview-controller.html

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()">&#10005;</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>

app/server-health/controllers/syslog-controller.html

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()">&#10005;</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>