Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add fallback screen reader styles (https://github.com/woocommerce/woocommerce-blocks/pull/3557) 

* add fallback screen reader styles

* use shared blocks screen-reader styles from mixin:
- tweak mixin to align with focus-reveal style
- add new mixin for focus-reveal style, since it is coupled to
visually-hidden mixin
This commit is contained in:
Rua Haszard 2020-12-18 08:05:17 +13:00 committed by GitHub
parent 55f0bc73a6
commit ceff92b4b8
2 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
View File

@ -52,6 +52,7 @@ $fontSizes: (
// Hide an element from sighted users, but available to screen reader users.
@mixin visually-hidden() {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
@ -61,6 +62,29 @@ $fontSizes: (
/* Many screen reader and browser combinations announce broken words as they would appear visually. */
overflow-wrap: normal !important;
word-wrap: normal !important;
padding: 0;
position: absolute !important;
width: 1px;
}
@mixin visually-hidden-focus-reveal() {
background-color: #fff;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: $input-text-active;
display: block;
font-size: 0.875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
@mixin reset-box() {

8
plugins/woocommerce-blocks/assets/css/style.scss
View File

@ -303,3 +303,11 @@
}
}
}
// Default screen-reader styles. Included as a fallback for themes that don't have support.
.screen-reader-text {
@include visually-hidden();
}
.screen-reader-text:focus {
@include visually-hidden-focus-reveal();
}