maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix ChromeVox animated elements inaccessible (#13435)

Browse source 
* Fix ChromeVox animated elements inaccessible

* Add opacity zero variable

* Add opacity custom property
This commit is contained in:
Jeferson S. Brito 2021-05-27 11:37:35 -03:00 • committed by GitHub
parent 371c12f499
commit 96950d993e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/articles.scss
View file

@ -110,7 +110,7 @@
@keyframes fade-in {
0% {
opacity: 0;
opacity: var(--opacity-0);
}
100% {
opacity: 1;

2
app/assets/stylesheets/components/tooltips.scss
View file

@ -18,7 +18,7 @@
font-weight: var(--fw-normal);
line-height: var(--lh-tight);
transform: translateY(var(--su-1));
opacity: 0;
opacity: var(--opacity-0);
transition: all var(--transition-props);
text-align: left;
transition-delay: 250ms;

8
app/assets/stylesheets/config/_variables.scss
View file

@ -95,6 +95,14 @@
--lh-tight: 1.25; // 20px for 16px font-size
--lh-base: 1.5; // 24px for 16px font-size
// Opacity
--opacity-0: 0.00001;
--opacity-25: 0.25;
--opacity-50: 0.5;
--opacity-75: 0.75;
--opacity-100: 1;
////////////////////////////////////////////////////////////////////////////////////
// Z-indexes. //////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////

4
app/assets/stylesheets/scaffolds.scss
View file

@ -101,7 +101,7 @@ body.trusted-status-true .trusted-visible-block {
text-align: center;
left: 0;
right: 0;
opacity: 0;
opacity: var(--opacity-0);
animation: loading-fadein 1.5s;
animation-delay: 0.6s;
font-size: 1.2em;
@ -110,7 +110,7 @@ body.trusted-status-true .trusted-visible-block {
@keyframes loading-fadein {
from {
opacity: 0;
opacity: var(--opacity-0);
}
to {
opacity: 0.6;

4
app/assets/stylesheets/views/article-form.scss
View file

@ -11,7 +11,7 @@
@keyframes #{$name} {
from {
opacity: 0;
opacity: var(--opacity-0);
top: calc(var(--su-4) * -1);
}
to {
@ -306,7 +306,7 @@
// ideally this one shouldn't be there, but I'm not sure how else we could handle that right now...
.crayons-article-form__toolbar {
opacity: 0;
opacity: var(--opacity-0);
}
}
}

4
app/assets/stylesheets/views/article.scss
View file

@ -242,7 +242,7 @@
0% {
transform: scale(2);
box-shadow: 0 0 0 4px currentColor;
opacity: 0;
opacity: var(--opacity-0);
}
100% {
@ -262,7 +262,7 @@
100% {
box-shadow: 0 0 1px 1px transparent;
transform: scale(4);
opacity: 0;
opacity: var(--opacity-0);
}
}
}