From e8cc17a4a095c6e8f9c563c07d1f8570c7ff6f00 Mon Sep 17 00:00:00 2001 From: daudix Date: Tue, 16 Jul 2024 23:41:53 +0300 Subject: [PATCH] A11y improvements and style tweaks - Use button element instead of anchors, fixes keyboard navigation and other issues - Disable search input until it's open, prevents being able to write inside it while it's closed - Use :root instead of html in CSS - Add minimal size for separator between home button and other links --- sass/_buttons.scss | 7 ++++++- sass/_general.scss | 9 ++------- sass/_nav.scss | 20 +++++++++++++++----- templates/404.html | 4 ++-- templates/partials/comments.html | 4 ++-- templates/partials/nav.html | 9 ++++++--- templates/partials/search.html | 2 ++ 7 files changed, 35 insertions(+), 20 deletions(-) diff --git a/sass/_buttons.scss b/sass/_buttons.scss index 520cc76..ddbe21a 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -7,14 +7,19 @@ } .inline-button { + -webkit-appearance: none; + appearance: none; transition: var(--transition); cursor: pointer; box-shadow: var(--edge-highlight); + border: none; border-radius: var(--rounded-corner); background-color: var(--fg-muted-1); + padding: 0.125rem 0.375rem; padding: 0.625rem 1rem; color: var(--fg-color); - font-size: 0.9rem; + font-weight: bold; + font-size: 0.875rem; line-height: normal; text-decoration: none; diff --git a/sass/_general.scss b/sass/_general.scss index c604992..33e0df1 100644 --- a/sass/_general.scss +++ b/sass/_general.scss @@ -4,7 +4,7 @@ box-sizing: border-box; } -html { +:root { text-wrap: pretty; scroll-behavior: smooth; // scrollbar-color: var(--primary-color) transparent; @@ -18,15 +18,10 @@ html { // } } -html, -body { - margin: 0; - padding: 0; -} - body { display: grid; // Put footer at the bottom for short pages, such as the 404 grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer + margin: 0; background: var(--bg-color), var(--primary-color); min-height: 100vh; color: var(--fg-color); diff --git a/sass/_nav.scss b/sass/_nav.scss index 2ef88cd..bf90afe 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -60,7 +60,7 @@ top: -0.125rem; right: -0.5rem; background-color: var(--fg-muted-2); - width: 0.0625rem; + width: max(1px, 0.0625em); height: calc(100% + 0.25rem); content: ""; @@ -81,6 +81,7 @@ } a, + &#search button, &#language-switcher summary { &:hover { box-shadow: var(--edge-highlight); @@ -130,9 +131,9 @@ } } - &#search a, - &#feed a, - &#language-switcher summary { + &#search button, + &#language-switcher summary, + &#feed a { padding: 0.5rem 0.625rem; &:hover .icon { @@ -148,8 +149,17 @@ } } - &#search { + &#search button { + -webkit-appearance: none; + appearance: none; + transition: var(--transition); cursor: pointer; + border: none; + border-radius: 999px; + background-color: transparent; + overflow: hidden; + font-weight: bold; + font-size: 1rem; .icon { $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6.57.063c-3.578 0-6.5 2.921-6.5 6.5 0 3.578 2.922 6.5 6.5 6.5a6.46 6.46 0 0 0 3.83-1.256l2.975 2.974c.957.938 2.363-.5 1.406-1.437l-2.96-2.961a6.46 6.46 0 0 0 1.25-3.82c0-3.579-2.923-6.5-6.5-6.5m0 2c2.5 0 4.5 2.003 4.5 4.5 0 2.5-2 4.5-4.5 4.5-2.496 0-4.5-2-4.5-4.5 0-2.497 2.004-4.5 4.5-4.5'/%3E%3C/svg%3E"); diff --git a/templates/404.html b/templates/404.html index f7dfe54..c5f8beb 100644 --- a/templates/404.html +++ b/templates/404.html @@ -3,7 +3,7 @@ {% block content %} - + 404

Page Not Found

@@ -11,7 +11,7 @@

The requested page could not be found.{% if config.extra.issues_url %} If you feel this is not normal, then you can create an issue on the issue tracker.{% endif %}

- Go Back + {%- if config.extra.issues_url %} File an Issue {%- endif %} diff --git a/templates/partials/comments.html b/templates/partials/comments.html index bb5c44c..7f5a103 100644 --- a/templates/partials/comments.html +++ b/templates/partials/comments.html @@ -22,9 +22,9 @@

{{ macros_translate::translate(key="comments", default="Comments", language_strings=language_strings) }}

{{ macros_translate::translate(key="comments_description", default="You can comment on this blog post by publicly replying to this post using a Mastodon or other ActivityPub/Fediverse account. Known non-private replies are displayed below.", language_strings=language_strings) }}

- + {{- macros_translate::translate(key="open_post", default="Open Post", language_strings=language_strings) -}} diff --git a/templates/partials/nav.html b/templates/partials/nav.html index 6a3179b..02ce3d7 100644 --- a/templates/partials/nav.html +++ b/templates/partials/nav.html @@ -35,12 +35,12 @@ {%- endfor -%} {%- if config.build_search_index %} {%- endif %} {%- if config.languages | length > 0 %} @@ -59,7 +59,10 @@
- + +
diff --git a/templates/partials/search.html b/templates/partials/search.html index d9d39c6..1e3b0e5 100644 --- a/templates/partials/search.html +++ b/templates/partials/search.html @@ -191,7 +191,9 @@ function toggleSearch() { var searchContainer = document.getElementById("search-container"); + var searchBar = document.getElementById("search-bar"); searchContainer.classList.toggle("active"); + searchBar.toggleAttribute("disabled"); } if (document.readyState === "complete" ||