From 9e051273f745c33109d1a77840ada07144e44ff1 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Wed, 8 Sep 2021 20:09:38 +0100 Subject: [PATCH] [BASE][NOTE][CSS] Notes are now clearly delimited to visually impaired users. Screen readers will notify when a note begins as well as each reply. Focused elements now provide the same feedback everywhere. --- public/assets/css/base.css | 22 +++--- public/assets/css/left/left.css | 3 - templates/base.html.twig | 20 +++--- templates/note/view.html.twig | 17 +++-- templates/sidepanel/left/left.html.twig | 94 +++++++++++++++++-------- 5 files changed, 92 insertions(+), 64 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 2aff977219..c0af882edd 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -3,6 +3,12 @@ html * { scroll-margin-top: 4rem; } +*:focus:not(:active) { + border: 4px solid var(--bg3); + border-radius: var(--unit-size); + transition: border ease-in-out; +} + :root { /* FONTS */ --main-font: 'Inter var', sans-serif; @@ -81,7 +87,6 @@ a:visited { color: var(--white); } -a:focus, a:hover { text-decoration: underline; color: var(--white); @@ -106,7 +111,7 @@ summary:hover { padding-left: var(--unit-size); padding-right: var(--unit-size); - background: var(--bg3); + background: var(--white); border-radius: var(--unit-size); transition: var(--cubic-transition); @@ -246,9 +251,6 @@ summary:hover .icon-details-open { .h-entry a { text-decoration: underline; } -.h-entry a:focus { - border: solid 2px var(--bg3); -} .h-entry .embed header { padding: var(--unit-size); @@ -289,10 +291,6 @@ summary:hover .icon-details-open { align-items: center; align-self: center; } -.note-author:focus-within { - border: 2px solid var(--bg3); - transition: border ease-in-out; -} .note-author .avatar { width: auto; @@ -358,10 +356,6 @@ summary:hover .icon-details-open { padding: var(--small-size); } -.note-content:focus-within { - border: 2px solid var(--bg3); - transition: border ease-in-out; -} .note-content p { padding-left: var(--small-size); @@ -597,7 +591,7 @@ input[type=file] { margin-left: var(--medium-size); } -#accessibility-menu:focus-within { +#accessibility-menu:focus-within:not(:active) { top: var(--unit-size); left: var(--unit-size); } diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index 9cc875c94d..ecf1e24588 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -86,9 +86,6 @@ display: flex; flex-direction: column; } -.sec-nav { - padding-left: var(--unit-size); -} .footer { margin-top: auto; diff --git a/templates/base.html.twig b/templates/base.html.twig index 87d5f8a76d..4b08694889 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -33,17 +33,16 @@ -