fix(boostwatch): last close button with aria-label

Orange-OpenSource · Oct 15, 2019 · 61d78fc · 61d78fc
1 parent 03780c2
commit 61d78fc
Showing 1 changed file with 28 additions and 20 deletions.
diff --git a/site/_includes/boostwatch/indicators.html b/site/_includes/boostwatch/indicators.html
@@ -6,7 +6,9 @@ <h2 id="indicators">Indicators<a class="doc-link" href="../components/alerts/" t
     <div class="col-lg-12">
         <h3>Alerts</h3>
         <div class="alert alert-dismissable alert-warning">
-            <button type="button" class="close" data-dismiss="alert">×</button>
+            <button type="button" class="close" data-dismiss="alert">
+              <span class="sr-only">Close</span>
+            </button>
             <h4>Warning!</h4>
             <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
         </div>
@@ -15,19 +17,25 @@ <h4>Warning!</h4>
   <div class="row">
     <div class="col-lg-4">
         <div class="alert alert-dismissable alert-danger">
-            <button type="button" class="close" data-dismiss="alert">×</button>
+            <button type="button" class="close" data-dismiss="alert">
+              <span class="sr-only">Close</span>
+            </button>
             <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
         </div>
     </div>
     <div class="col-lg-4">
         <div class="alert alert-dismissable alert-success">
-            <button type="button" class="close" data-dismiss="alert">×</button>
+            <button type="button" class="close" data-dismiss="alert">
+              <span class="sr-only">Close</span>
+            </button>
             <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
         </div>
     </div>
     <div class="col-lg-4">
         <div class="alert alert-dismissable alert-info">
-            <button type="button" class="close" data-dismiss="alert">×</button>
+            <button type="button" class="close" data-dismiss="alert">
+              <span class="sr-only">Close</span>
+            </button>
             <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
         </div>
     </div>
@@ -42,26 +50,26 @@ <h3>Orange Alerts <a class="doc-link" href="../components/alerts/" title="go to
         <div class="pl-4 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close p-1 px-3 pb-2" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">×</span>
+        <button type="button" class="close" data-dismiss="alert">
+          <span class="sr-only">Close</span>
         </button>
     </div>
     <div class="alert border border-info alert-dismissible fade show bg-transparent" role="alert">
         <span class="alert-icon svg-info" aria-label="Info"></span>
         <div class="pl-3 ml-3 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close pb-3" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">&times;</span>
+        <button type="button" class="close" data-dismiss="alert">
+          <span class="sr-only">Close</span>
         </button>
     </div>
     <div class="alert alert-lg border border-warning alert-dismissible fade show bg-transparent" role="alert">
         <span class="alert-icon svg-warning" aria-label="Warning"></span>
         <div class="pl-5 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close mt-1" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">&times;</span>
+        <button type="button" class="close" data-dismiss="alert">
+          <span class="sr-only">Close</span>
         </button>
     </div>
     <div class="alert alert-lg border border-danger alert-dismissible fade show bg-transparent text-dark" role="alert">
@@ -70,8 +78,8 @@ <h3>Orange Alerts <a class="doc-link" href="../components/alerts/" title="go to
             <div class="font-weight-bold">Your changes have been saved.</div>
             <p class="mb-0">You may now log-in with the username you have chosen.</p>
         </div>
-        <button type="button" class="close mt-1" data-dismiss="alert" aria-label="Close">
-        <span class="text-dark" aria-hidden="true">&times;</span>
+        <button type="button" class="close" data-dismiss="alert">
+          <span class="sr-only">Close</span>
         </button>
     </div>
     <div class="alert border-0 alert-sm bg-transparent px-0" role="alert">
@@ -89,26 +97,26 @@ <h3>Orange Alerts <a class="doc-link" href="../components/alerts/" title="go to
         <div class="pl-4 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close p-1 px-3 pb-2" data-dismiss="alert" aria-label="Close">
-        <span class="text-white" aria-hidden="true">×</span>
+        <button type="button" class="close" data-dismiss="alert">
+          <span class="sr-only">Close</span>
         </button>
     </div>
     <div class="alert border border-info alert-dismissible fade show bg-transparent text-white" role="alert">
         <span class="alert-icon svg-info" aria-label="Info"></span>
         <div class="pl-3 ml-3 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close pb-3" data-dismiss="alert" aria-label="Close">
-        <span class="text-white" aria-hidden="true">&times;</span>
+        <button type="button" class="close" data-dismiss="alert">
+          <span class="sr-only">Close</span>
         </button>
     </div>
     <div class="alert alert-lg border border-warning alert-dismissible fade show bg-transparent text-white" role="alert">
         <span class="alert-icon svg-warning" aria-label="Warning"></span>
         <div class="pl-5 font-weight-bold">
             Your changes have been saved.
         </div>
-        <button type="button" class="close mt-1" data-dismiss="alert" aria-label="Close">
-        <span class="text-white" aria-hidden="true">&times;</span>
+        <button type="button" class="close" data-dismiss="alert">
+          <span class="sr-only">Close</span>
         </button>
     </div>
     <div class="alert alert-lg border border-danger alert-dismissible fade show bg-transparent text-white" role="alert">
@@ -117,8 +125,8 @@ <h3>Orange Alerts <a class="doc-link" href="../components/alerts/" title="go to
             <div class="font-weight-bold">Your changes have been saved.</div>
             <p class="mb-0"><small>You may now log-in with the username you have chosen.</small></p>
         </div>
-        <button type="button" class="close mt-1" data-dismiss="alert" aria-label="Close">
-        <span class="text-white" aria-hidden="true">&times;</span>
+        <button type="button" class="close" data-dismiss="alert">
+          <span class="sr-only">Close</span>
         </button>
     </div>
     <div class="alert border-0 alert-sm bg-transparent px-0 text-white" role="alert">