From 090a5248374ce03a3866df20964863567a48eb34 Mon Sep 17 00:00:00 2001 From: Alexander Chabin Date: Thu, 21 Dec 2023 11:53:37 +0500 Subject: [PATCH] Update keyboard access (a11y) (#128) * Add outlines, remove unused transition/border-radius * Run prettier * Remove unused transitions * Update Toolbar outline styles * Run prettier --- .../ArrowNavLink/ArrowNavLink.module.css | 3 +- components/Button/Button.module.css | 1 + components/Ecosystem/Ecosystem.module.css | 6 ++++ .../ManualPreview/ManualPreview.module.css | 9 +----- components/ManualTitle/ManualTitle.module.css | 32 +++++++++---------- .../ProjectLinks/ProjectLinks.module.css | 2 ++ .../TableOfContents.module.css | 14 +++++--- components/Toolbar/Toolbar.module.css | 13 +++----- styles/globals.css | 2 +- 9 files changed, 42 insertions(+), 40 deletions(-) diff --git a/components/ArrowNavLink/ArrowNavLink.module.css b/components/ArrowNavLink/ArrowNavLink.module.css index b8f777b6..a74c9e91 100644 --- a/components/ArrowNavLink/ArrowNavLink.module.css +++ b/components/ArrowNavLink/ArrowNavLink.module.css @@ -1,10 +1,9 @@ .ArrowNavLink { box-shadow: none; margin: 0 0 76px; - border-radius: 2rem; font-weight: 400; font-size: clamp(14px, 1.8vw, 18px); - transition: 0.3s; + transition: 0.3s ease text-decoration; color: var(--color); } diff --git a/components/Button/Button.module.css b/components/Button/Button.module.css index 8f60e138..4f0cecbe 100644 --- a/components/Button/Button.module.css +++ b/components/Button/Button.module.css @@ -10,6 +10,7 @@ cursor: pointer; transition: all 0.15s ease; text-decoration: none; + outline-offset: 3px; } .Button_type-primary { diff --git a/components/Ecosystem/Ecosystem.module.css b/components/Ecosystem/Ecosystem.module.css index 58aa31f0..8a0ec1ad 100644 --- a/components/Ecosystem/Ecosystem.module.css +++ b/components/Ecosystem/Ecosystem.module.css @@ -3,6 +3,12 @@ --ecosystem-color: var(--color-bg-light); } +.Ecosystem a:focus-visible, +.Ecosystem button:focus-visible { + outline: 2px solid black; + outline-offset: 4px; +} + @media print { .Ecosystem { display: none; diff --git a/components/ManualPreview/ManualPreview.module.css b/components/ManualPreview/ManualPreview.module.css index 1902ff18..963e4d77 100644 --- a/components/ManualPreview/ManualPreview.module.css +++ b/components/ManualPreview/ManualPreview.module.css @@ -14,10 +14,7 @@ font-weight: 500; font-size: clamp(18px, 5vw, 21px); background: var(--manual-bg-back); -} - -.manual:focus-visible { - outline-width: 0; + outline-offset: 3px; } .manualEmoji { @@ -71,10 +68,6 @@ transform: matrix(1, -0.125, 0, 1, 0, 0) scaleX(0.95); } -.manual:focus-visible { - outline: 2px solid black; -} - .manualTitle { position: relative; font-weight: 400; diff --git a/components/ManualTitle/ManualTitle.module.css b/components/ManualTitle/ManualTitle.module.css index 6b04043b..ca0ab54d 100644 --- a/components/ManualTitle/ManualTitle.module.css +++ b/components/ManualTitle/ManualTitle.module.css @@ -6,21 +6,20 @@ .ManualTitle__mainpage { position: relative; align-self: flex-start; - border-radius: 16px; padding-top: 4px; - color: var(--color); - font-size: 14px; + color: hsl(var(--color-hsl) / 55%); font-weight: 500; - transition: 0.15s ease; - text-underline-offset: 4px; - text-transform: uppercase; + font-size: 14px; letter-spacing: 0.1em; - opacity: 0.55; - transition: 0.15s ease; + text-transform: uppercase; + transition: + 0.15s ease text-underline, + 0.15s ease color; + text-underline-offset: 4px; } .ManualTitle__mainpage:hover { - opacity: 0.8; + color: hsl(var(--color-hsl) / 80%); } .ManualTitle__mainpage:hover::after { @@ -30,19 +29,20 @@ .ManualTitle__mainpage::after { content: '/'; position: absolute; - top: 4px; - right: -12px; + top: 0; + padding-top: 4px; + padding-left: 5px; opacity: 0.6; } .ManualTitle__caption { - line-height: 1.2; - font-size: 24px; - font-weight: 500; - transition: 0.2s; margin-top: 6px; margin-bottom: 8px; color: var(--color); + font-weight: 500; + font-size: 24px; + line-height: 1.2; + transition: 0.15s ease text-decoration; text-decoration-color: transparent; text-underline-offset: 5.5px; text-decoration-thickness: 2px; @@ -54,7 +54,7 @@ } .ManualTitle__caption { - font-size: 40px; color: inherit; + font-size: 40px; } } diff --git a/components/ProjectLinks/ProjectLinks.module.css b/components/ProjectLinks/ProjectLinks.module.css index 8085cb80..8062c1af 100644 --- a/components/ProjectLinks/ProjectLinks.module.css +++ b/components/ProjectLinks/ProjectLinks.module.css @@ -11,6 +11,8 @@ .ProjectLinks__github { display: none; color: black; + outline-offset: 3px; + border-radius: 50%; } .ProjectLinks__github svg { diff --git a/components/TableOfContents/TableOfContents.module.css b/components/TableOfContents/TableOfContents.module.css index 3fbcb5dc..22fc9eb6 100644 --- a/components/TableOfContents/TableOfContents.module.css +++ b/components/TableOfContents/TableOfContents.module.css @@ -81,7 +81,8 @@ html:has(.open) { padding: 12px 16px 12px 16px; font-size: 16px; border-radius: 8px; - transition: 0.15s ease; + transition: 0.15s ease background-color; + outline-offset: -1px; } .tableOfContentsLink:not(:only-child) { @@ -165,8 +166,6 @@ html:has(.open) { display: flex; color: var(--color); text-decoration: none; - border-radius: 8px; - transition: 0.15s ease; padding: 0 8px; position: relative; font-size: 14px; @@ -178,8 +177,13 @@ html:has(.open) { z-index: 2; } -.innerTableOfContentsLink:hover span { +.innerTableOfContentsLink span { text-decoration: underline; + text-decoration-color: transparent; + transition: 0.15s ease text-decoration; +} + +.innerTableOfContentsLink:hover span { text-decoration-color: hsl(var(--color-hsl) / 30%); } @@ -245,7 +249,7 @@ html:has(.open) { scrollbar-width: none; padding: 0px 11px 11px 9px; } - + html:has(.open) { overflow: auto; } diff --git a/components/Toolbar/Toolbar.module.css b/components/Toolbar/Toolbar.module.css index 6d3a8f44..b9017d40 100644 --- a/components/Toolbar/Toolbar.module.css +++ b/components/Toolbar/Toolbar.module.css @@ -35,17 +35,18 @@ } .Toolbar__item { - padding: 4px; margin: 0 -2px; + padding: 4px; border: 0; border-radius: 50%; background: transparent; color: var(--color); - outline: none; - outline-width: 0; + outline-offset: 5px; font-size: 0; cursor: pointer; - transition: 0.15s ease; + transition: + 0.15s ease color, + 0.15s ease background-color; } .Toolbar__item:hover { @@ -58,10 +59,6 @@ color: white; } -.Toolbar__item:focus-visible svg { - box-shadow: inset 0 0 0 2px black; -} - .hidden { visibility: hidden; } diff --git a/styles/globals.css b/styles/globals.css index 116bf060..47d293b0 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -38,7 +38,7 @@ a { text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: var(--color-underline); - transition: 0.15s ease; + transition: 0.15s ease text-decoration; } a:hover {