Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

A11Y: disable non-essential CSS animations for reduced-motion users (#23571)

This commit is contained in:
Kris 2023-09-14 17:31:43 -04:00 committed by GitHub
parent 4a1621c677
commit 98c8dcecba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 131 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/common/admin/admin_emojis.scss
View File

@ -15,6 +15,8 @@
}
#custom_emoji.highlighted {
background: var(--tertiary-very-low);
@media (prefers-reduced-motion: no-preference) {
animation: background-fade-highlight 2.5s ease-out;
}
}
}

3
app/assets/stylesheets/common/admin/admin_report_chart.scss
View File

@ -1,3 +1,6 @@
.admin-report-chart {
animation: fadein 2s;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
}

8
app/assets/stylesheets/common/base/dialog.scss
View File

@ -29,6 +29,9 @@
.dialog-overlay {
background: rgba(var(--always-black-rgb), 0.65);
animation: fade-in 250ms both;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
}
.dialog-content {
@ -36,9 +39,12 @@
z-index: z("modal", "content");
position: relative;
background-color: var(--secondary);
animation: fade-in 250ms both;
box-shadow: var(--shadow-card);
min-width: 40vw;
animation: fade-in 250ms both;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
}
.dialog-body {

2
app/assets/stylesheets/common/base/discourse.scss
View File

@ -47,6 +47,7 @@
}
}
@media (prefers-reduced-motion: no-preference) {
.placeholder-animation {
animation-duration: 4s;
animation-fill-mode: forwards;
@ -61,6 +62,7 @@
var(--primary-very-low) 33%
);
}
}
// Base Elements
html {

6
app/assets/stylesheets/common/base/header.scss
View File

@ -48,6 +48,9 @@
align-items: center;
height: 100%;
animation: fadein 0.5s;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
// min-width acts as a placeholder if the small logo takes a while to load
// it prevents topic title from shifting after the small logo loads
// it's set to match the #site-logo height so square small logos don't resize when titles dock
@ -276,6 +279,9 @@
overflow: hidden;
width: 100%;
animation: fadein 0.5s;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
}
.title-wrapper {
display: grid;

3
app/assets/stylesheets/common/base/modal.scss
View File

@ -99,6 +99,9 @@
.modal-backdrop,
.modal-backdrop.fade.in {
animation: fade 0.3s;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
opacity: 0.9;
filter: alpha(opacity=90);
}

3
app/assets/stylesheets/common/base/onebox.scss
View File

@ -935,6 +935,9 @@ iframe.vimeo-onebox {
position: absolute;
width: calc(100% - 40px);
animation: 0.5s fadeIn;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
}
}

4
app/assets/stylesheets/common/base/personal-message.scss
View File

@ -28,11 +28,13 @@
background: var(--tertiary-very-low);
}
.topic-body.highlighted {
@media (prefers-reduced-motion: no-preference) {
.cooked {
animation: current-user-background-fade-highlight 2.5s ease-out;
}
}
}
}
.topic-body .cooked {
border: 1px solid transparent;
}
@ -69,10 +71,12 @@
.topic-body.highlighted {
animation: none;
@media (prefers-reduced-motion: no-preference) {
.cooked {
animation: background-fade-highlight 2.5s ease-out;
}
}
}
.topic-avatar,
.topic-body {

3
app/assets/stylesheets/common/base/topic-admin-menu.scss
View File

@ -17,6 +17,9 @@
}
}
animation: slideUp 0.3s;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
}
.mobile-view & {

8
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -21,7 +21,9 @@
position: relative;
overflow: hidden;
&:before {
@media (prefers-reduced-motion: no-preference) {
animation: placeHolderShimmer 4s linear infinite forwards;
}
position: absolute;
left: 0;
content: "";
@ -444,8 +446,10 @@ nav.post-controls {
}
.has-like .d-icon.heart-animation {
@media (prefers-reduced-motion: no-preference) {
animation: heartBump 0.4s;
}
}
@keyframes slideout {
from {
@ -486,7 +490,9 @@ aside.quote {
margin-top: 0;
.expanded-quote {
overflow: hidden;
@media (prefers-reduced-motion: no-preference) {
animation: slideout 1s ease-in-out;
}
&.icon-only {
text-align: center;
font-size: var(--font-up-4);
@ -944,9 +950,11 @@ aside.quote {
border-top: 1px solid var(--primary-low);
padding-top: 0.5em;
}
@media (prefers-reduced-motion: no-preference) {
&.highlighted {
animation: background-fade-highlight 2.5s ease-out;
}
}
.deleted & {
// Disable so the deleted background is visible immediately
&.highlighted {

7
app/assets/stylesheets/common/base/topic-summary.scss
View File

@ -103,11 +103,16 @@
}
&.show {
animation: appear 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s forwards;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
}
@media (prefers-reduced-motion: no-preference) {
&.blink {
animation: blink 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
}
}
&__generating-text {
display: inline-block;
margin-left: 3px;
@ -118,7 +123,9 @@
}
&__indicator-dot {
display: inline-block;
@media (prefers-reduced-motion: no-preference) {
animation: ai-summary__indicator-wave 1.8s linear infinite;
}
&:nth-child(2) {
animation-delay: -1.6s;
}

3
app/assets/stylesheets/common/components/conditional-loading-section.scss
View File

@ -16,6 +16,9 @@
&:not(.is-loading) {
animation: fadein 0.5s;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
}
@keyframes fadein {

8
app/assets/stylesheets/common/components/d-lightbox.scss
View File

@ -714,8 +714,10 @@ html.has-lightbox {
.d-lightbox {
&.is-visible &__content {
@extend %lightbox-animation-base;
@media (prefers-reduced-motion: no-preference) {
animation-name: lightbox-fade-in-scale;
}
}
&__backdrop,
&__main-image,
@ -725,6 +727,9 @@ html.has-lightbox {
&__main-title {
@extend %lightbox-animation-base;
animation-name: lightbox-fade-in;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
}
&__loading-spinner {
@ -734,6 +739,9 @@ html.has-lightbox {
&.will-close &__content {
animation-name: lightbox-fade-out;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
}
}

2
app/assets/stylesheets/common/components/user-card.scss
View File

@ -18,7 +18,9 @@
position: relative;
overflow: hidden;
&:before {
@media (prefers-reduced-motion: no-preference) {
animation: placeHolderShimmer 4s linear infinite forwards;
}
position: absolute;
left: 0;
content: "";

2
app/assets/stylesheets/common/foundation/base.scss
View File

@ -146,10 +146,12 @@ tbody {
.topic-list-item,
tr {
border-bottom: 1px solid var(--primary-low);
@media (prefers-reduced-motion: no-preference) {
&.highlighted {
animation: background-fade-highlight 2.5s ease-out;
}
}
}
// https://en.wikipedia.org/wiki/Ruby_character
ruby > rt {

2
app/assets/stylesheets/common/input_tip.scss
View File

@ -15,7 +15,9 @@
position: absolute;
z-index: z("composer", "dropdown") + 1;
cursor: pointer;
@media (prefers-reduced-motion: no-preference) {
animation: 0.15s slidein 3;
}
&.bad {
background: var(--danger-medium);

3
app/assets/stylesheets/desktop/compose.scss
View File

@ -290,6 +290,9 @@ a.toggle-preview {
animation-delay: 1.5s;
animation-direction: reverse;
animation-fill-mode: forwards;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
position: fixed;
left: 50%;
top: 10%;

3
app/assets/stylesheets/desktop/modal.scss
View File

@ -11,6 +11,9 @@
.modal.in {
animation: fade 0.25s;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
}
.modal-footer .btn.right {

3
app/assets/stylesheets/mobile/components/user-card.scss
View File

@ -105,4 +105,7 @@
width: 100vw;
background-color: rgba(black, 0.5);
animation: fadein 0.2s;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
}

3
app/assets/stylesheets/mobile/header.scss
View File

@ -47,6 +47,9 @@
// Fade in header avatar + icons if topic title is not visible in mobile header
.panel {
animation: fadein 0.5s;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
}
// A rendering bug in safari causes header SVGs to jitter after animations.
// translateZ() forces gpu rendering which fixes the issue.

2
app/assets/stylesheets/wizard.scss
View File

@ -144,9 +144,11 @@ body.wizard {
&__field.invalid input {
outline: 0;
border: 3px solid var(--danger);
@media (prefers-reduced-motion: no-preference) {
animation: bump 0.25s ease-in-out;
animation-iteration-count: 2;
}
}
&__field label {
display: block;

2
plugins/chat/assets/stylesheets/common/chat-composer-button.scss
View File

@ -56,8 +56,10 @@
}
.chat-composer.is-sending & {
@media (prefers-reduced-motion: no-preference) {
animation: sendingScales 1s infinite linear;
}
}
.d-icon {
.is-send-enabled.is-focused & {

2
plugins/chat/assets/stylesheets/common/chat-replying-indicator.scss
View File

@ -24,7 +24,9 @@
.chat-replying-indicator__dot {
display: inline-block;
@media (prefers-reduced-motion: no-preference) {
animation: chat-replying-indicator__wave 1.8s linear infinite;
}
&:nth-child(2) {
animation-delay: -1.6s;
}

3
plugins/chat/assets/stylesheets/common/chat-selection-manager.scss
View File

@ -20,6 +20,9 @@
&__copy-success {
animation: chat-quote-message-background-fade-highlight 2s ease-out 3s;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
animation-fill-mode: forwards;
background-color: var(--success-low);
color: var(--primary);

2
plugins/chat/assets/stylesheets/common/chat-skeleton.scss
View File

@ -125,7 +125,9 @@
rgba(var(--chat-skeleton-animation-rgb), 0.3) 50%,
rgba(var(--chat-skeleton-animation-rgb), 0.5) 100%
);
@media (prefers-reduced-motion: no-preference) {
animation: shimmer 1.25s infinite;
}
content: "";
}

3
plugins/chat/assets/stylesheets/mobile/chat-message.scss
View File

@ -24,11 +24,12 @@
.chat-message-container {
transition: transform 400ms;
transform: scale(1);
@media (prefers-reduced-motion: no-preference) {
&.-active {
animation: scale-animation 400ms;
}
}
}
@keyframes scale-animation {
0% {

2
plugins/discourse-presence/assets/stylesheets/presence.scss
View File

@ -26,7 +26,9 @@
.dot {
display: inline-block;
@media (prefers-reduced-motion: no-preference) {
animation: wave 1.8s linear infinite;
}
&:nth-child(2) {
animation-delay: -1.6s;