Improvement: Use bs sr-only class instead of redundant class accessib…

…ly-hidden. Bootstrap already has an equivalent of accessibly-hidden. Add styles to sr-only to assure it doesn't throw a contrast error.
ongov · Sep 3, 2020 · 7b6ecb0 · 7b6ecb0
1 parent 83f0c7a
commit 7b6ecb0
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 42 deletions.
diff --git a/ckanext/ontario_theme/fanstatic/external/ontario_theme.css b/ckanext/ontario_theme/fanstatic/external/ontario_theme.css
@@ -127,19 +127,9 @@
   left: 0px;
   position: relative;
 }
-.accessibly-hidden,
-.toolbar .home span,
-.simple-input label,
-.simple-input button span,
-a.skip-main {
-  left: -999px;
-  position: absolute;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  z-index: -999;
-  display: inline;
+.sr-only {
+  background-color: #ffffff;
+  color: #1a1a1a;
 }
 a.skip-main:focus,
 a.skip-main:active {
@@ -581,7 +571,7 @@ div.card p {
 .circle {
   font-family: Raleway, Open Sans, sans-serif;
   border-radius: 50%;
-  color: #000;
+  color: #1a1a1a;
   background-color: #1080a6;
   display: inline-block;
   font-weight: 700;

diff --git a/ckanext/ontario_theme/fanstatic/internal/accessibility.less b/ckanext/ontario_theme/fanstatic/internal/accessibility.less
@@ -1,12 +1,6 @@
-.accessibly-hidden {
-  left:-999px;
-  position:absolute;
-  top:auto;
-  width:1px;
-  height:1px;
-  overflow:hidden;
-  z-index:-999;  
-  display: inline;
+.sr-only {
+  background-color: #ffffff;
+  color: @black;
 }
 
 .toolbar .home span,

diff --git a/ckanext/ontario_theme/fanstatic/internal/ontario_theme.css b/ckanext/ontario_theme/fanstatic/internal/ontario_theme.css
@@ -127,19 +127,9 @@
   left: 0px;
   position: relative;
 }
-.accessibly-hidden,
-.toolbar .home span,
-.simple-input label,
-.simple-input button span,
-a.skip-main {
-  left: -999px;
-  position: absolute;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  z-index: -999;
-  display: inline;
+.sr-only {
+  background-color: #ffffff;
+  color: #1a1a1a;
 }
 a.skip-main:focus,
 a.skip-main:active {
@@ -581,7 +571,7 @@ div.card p {
 .circle {
   font-family: Raleway, Open Sans, sans-serif;
   border-radius: 50%;
-  color: #000;
+  color: #1a1a1a;
   background-color: #1080a6;
   display: inline-block;
   font-weight: 700;

diff --git a/ckanext/ontario_theme/fanstatic/internal/smarties.less b/ckanext/ontario_theme/fanstatic/internal/smarties.less
@@ -16,7 +16,7 @@
 .circle {
   font-family: Raleway, Open Sans, sans-serif;
   border-radius: 50%;
-  color: #000;
+  color: @black;
   background-color: @primary-darker;
   display: inline-block;
   font-weight: 700;

diff --git a/ckanext/ontario_theme/templates/internal/home/layout3.html b/ckanext/ontario_theme/templates/internal/home/layout3.html
@@ -1,6 +1,6 @@
 <div id="landing-page-body">
 <div class="hero">
-  <h1 class="accessibly-hidden">{{ _("Home") }}</h1>
+  <h1 class="sr-only">{{ _("Home") }}</h1>
     <div class="container">
       <div class="hero-container">
         <div class="row">

diff --git a/ckanext/ontario_theme/templates/internal/snippets/facet_list.html b/ckanext/ontario_theme/templates/internal/snippets/facet_list.html
@@ -21,7 +21,7 @@ <h2 class="module-heading">
       {% endif %}               
     {% endif %} 
   </h2>
-  <span class="accessibly-hidden">{{screen_reader_text}}</span>
+  <span class="sr-only">{{screen_reader_text}}</span>
   {% endwith %}
 {% endblock %}
 {% block facet_list_items %}
@@ -39,7 +39,7 @@ <h2 class="module-heading">
           {% set count = count_label(item['count']) if count_label else ('(%d)' % item['count']) %}
             <li class="{{ nav_item_class or 'nav-item' }}{% if item.active %} active{% endif %}">
               {% if item.active %}
-                <span class="accessibly-hidden">Filtered on</span>
+                <span class="sr-only">Filtered on</span>
               {% endif %}                  
               <a href="{{ href }}" title="{{ label if label != label_truncated else '' }}">
                 <span>{{ label_truncated }} {{ count }}</span>

diff --git a/ckanext/ontario_theme/templates/internal/snippets/search_form.html b/ckanext/ontario_theme/templates/internal/snippets/search_form.html
@@ -24,7 +24,7 @@
           {% set search_facets_items = facets.search.get(field)['items'] %}
           <span class="facet">
             {% if (not query and not loop.index0==0) or query %}
-              <span class="accessibly-hidden"> and </span>
+              <span class="sr-only"> and </span>
             {% endif %}
             {{ facets.titles.get(field, "Has Resources (data)") }}:
           </span>