a11y: replace display:block /w visually hidden alternative

ramiy · ramiy · commit d82f64b9052c · 2021-03-24T13:02:39.000+02:00
diff --git a/src/charts/_pie.scss b/src/charts/_pie.scss
@@ -12,7 +12,7 @@
       background-color: var(--chart-bg-color);
 
       tr {
-        display: none;
+        @include visually-hidden();
       }
     }
   }
diff --git a/src/charts/_polar.scss b/src/charts/_polar.scss
@@ -12,7 +12,7 @@
       background-color: var(--chart-bg-color);
 
       tr {
-        display: none;
+        @include visually-hidden();
       }
     }
   }
diff --git a/src/charts/_radar.scss b/src/charts/_radar.scss
@@ -12,7 +12,7 @@
       background-color: var(--chart-bg-color);
 
       tr {
-        display: none;
+        @include visually-hidden();
       }
     }
   }
diff --git a/src/charts/_radial.scss b/src/charts/_radial.scss
@@ -12,7 +12,7 @@
       background-color: var(--chart-bg-color);
 
       tr {
-        display: none;
+        @include visually-hidden();
       }
     }
   }
diff --git a/src/components/_heading.scss b/src/components/_heading.scss
@@ -6,7 +6,7 @@
   &:not(.show-heading) {
 
     caption {
-      display: none;
+      @include visually-hidden();
     }
   }
 
diff --git a/src/components/_labels.scss b/src/components/_labels.scss
@@ -9,7 +9,7 @@
       --labels-size: 0;
 
       tbody tr th {
-        display: none;
+        @include visually-hidden();
       }
     }
     &.show-labels {
@@ -24,7 +24,7 @@
 
       tr.hide-label th,
       th.hide-label {
-        display: none;
+        @include visually-hidden();
       }
     }
 
@@ -38,7 +38,7 @@
       --labels-size: 0;
 
       tbody tr th {
-        display: none;
+        @include visually-hidden();
       }
     }
     &.show-labels {
@@ -53,7 +53,7 @@
 
       tr.hide-label th,
       th.hide-label {
-        display: none;
+        @include visually-hidden();
       }
     }
 
diff --git a/src/components/_wrapper.scss b/src/components/_wrapper.scss
@@ -62,7 +62,7 @@ table.charts-css {
   colgroup,
   thead,
   tfoot {
-    display: none;
+    @include visually-hidden();
   }
 }
 
diff --git a/src/general/_mixins.scss b/src/general/_mixins.scss
@@ -1,4 +1,4 @@
-@mixin hide {
+@mixin visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -7,6 +7,8 @@
   border: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 
 @mixin circle {

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`background-color: var(--chart-bg-color);`
`13`	`13`
`14`	`14`	`tr {`
`15`		`- display: none;`
	`15`	`+ @include visually-hidden();`
`16`	`16`	`}`
`17`	`17`	`}`
`18`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`&:not(.show-heading) {`
`7`	`7`
`8`	`8`	`caption {`
`9`		`- display: none;`
	`9`	`+ @include visually-hidden();`
`10`	`10`	`}`
`11`	`11`	`}`
`12`	`12`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`--labels-size: 0;`
`10`	`10`
`11`	`11`	`tbody tr th {`
`12`		`- display: none;`
	`12`	`+ @include visually-hidden();`
`13`	`13`	`}`
`14`	`14`	`}`
`15`	`15`	`&.show-labels {`
`@@ -24,7 +24,7 @@`
`24`	`24`
`25`	`25`	`tr.hide-label th,`
`26`	`26`	`th.hide-label {`
`27`		`- display: none;`
	`27`	`+ @include visually-hidden();`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`
`@@ -38,7 +38,7 @@`
`38`	`38`	`--labels-size: 0;`
`39`	`39`
`40`	`40`	`tbody tr th {`
`41`		`- display: none;`
	`41`	`+ @include visually-hidden();`
`42`	`42`	`}`
`43`	`43`	`}`
`44`	`44`	`&.show-labels {`
`@@ -53,7 +53,7 @@`
`53`	`53`
`54`	`54`	`tr.hide-label th,`
`55`	`55`	`th.hide-label {`
`56`		`- display: none;`
	`56`	`+ @include visually-hidden();`
`57`	`57`	`}`
`58`	`58`	`}`
`59`	`59`
Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@ table.charts-css {`
`62`	`62`	`colgroup,`
`63`	`63`	`thead,`
`64`	`64`	`tfoot {`
`65`		`- display: none;`
	`65`	`+ @include visually-hidden();`
`66`	`66`	`}`
`67`	`67`	`}`
`68`	`68`