[PR #1248] [MERGED] web: proper focus ring #1358

Closed
opened 2025-11-09 10:11:22 -06:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/imputnet/cobalt/pull/1248
Author: @wukko
Created: 4/27/2025
Status: Merged
Merged: 4/27/2025
Merged by: @github-actions[bot]

Base: developHead: better-focus-ring


📝 Commits (10+)

  • d25e9b6 web/ProcessingStatus: remove extra box-shadow css
  • e3a60d8 web/ProcessingStatus: visually distinct focus ring
  • 0e1750e web: use outline for focus ring instead of box-shadow
  • 0454b13 web/FileReceiver: restore the pretty animated focus ring
  • ba4742f web: remove data-focus-ring-hidden from all files
  • 9657db3 web: remove focus ring css workarounds
  • 55ce09d web/Switcher: fix box-shadow
  • 4de00b6 web/app.css: prettier focus ring on links
  • 44dc9ca web/app.css: add focus ring for select & fix active button focus color
  • 2fce88a web/DonateOptionsCard: fix fantom button focus on tab nav, refactor

📊 Changes

22 files changed (+88 additions, -116 deletions)

View changed files

📝 web/src/app.css (+14 -7)
📝 web/src/components/buttons/Switcher.svelte (+1 -4)
📝 web/src/components/changelog/ChangelogEntry.svelte (+0 -1)
📝 web/src/components/dialog/PickerDialog.svelte (+0 -4)
📝 web/src/components/dialog/PickerItem.svelte (+2 -1)
📝 web/src/components/dialog/SavingDialog.svelte (+0 -8)
📝 web/src/components/dialog/SmallDialog.svelte (+0 -5)
📝 web/src/components/donate/DonateBanner.svelte (+0 -1)
📝 web/src/components/donate/DonateCardContainer.svelte (+3 -3)
📝 web/src/components/donate/DonateOptionsCard.svelte (+54 -52)
📝 web/src/components/donate/DonateShareCard.svelte (+2 -5)
📝 web/src/components/misc/FileReceiver.svelte (+5 -1)
📝 web/src/components/misc/Placeholder.svelte (+1 -1)
📝 web/src/components/queue/ProcessingStatus.svelte (+3 -3)
📝 web/src/components/save/Omnibox.svelte (+0 -4)
📝 web/src/components/save/SupportedServices.svelte (+1 -2)
📝 web/src/components/save/buttons/DownloadButton.svelte (+0 -4)
📝 web/src/components/settings/SettingsInput.svelte (+0 -4)
📝 web/src/components/subnav/PageNav.svelte (+0 -2)
📝 web/src/routes/+page.svelte (+0 -1)

...and 2 more files

📄 Description

  • uses outline instead of box-shadow to not conflict with existing box-shadow on many elements
  • shows the focus ring only on clickable elements (button & a)
  • removes data-focus-ring-hidden & all other related workarounds
  • fixes the focus ring of the processing status button and file receiver

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/imputnet/cobalt/pull/1248 **Author:** [@wukko](https://github.com/wukko) **Created:** 4/27/2025 **Status:** ✅ Merged **Merged:** 4/27/2025 **Merged by:** [@github-actions[bot]](https://github.com/apps/github-actions) **Base:** `develop` ← **Head:** `better-focus-ring` --- ### 📝 Commits (10+) - [`d25e9b6`](https://github.com/imputnet/cobalt/commit/d25e9b628e183e9b0ea91087a6119bc04424e7cf) web/ProcessingStatus: remove extra box-shadow css - [`e3a60d8`](https://github.com/imputnet/cobalt/commit/e3a60d877527d7ee7e4c560e7aa1bd6dd94239d6) web/ProcessingStatus: visually distinct focus ring - [`0e1750e`](https://github.com/imputnet/cobalt/commit/0e1750e215bb132d540b3bd0f98ba68329d829e7) web: use outline for focus ring instead of box-shadow - [`0454b13`](https://github.com/imputnet/cobalt/commit/0454b138b163fdd23d91eb9aecadf4bbd1949a2e) web/FileReceiver: restore the pretty animated focus ring - [`ba4742f`](https://github.com/imputnet/cobalt/commit/ba4742f3fd210386ad55b1a3ea872040b0345b2c) web: remove data-focus-ring-hidden from all files - [`9657db3`](https://github.com/imputnet/cobalt/commit/9657db3515c47e3a05ea01d18fa1ecb7ed508803) web: remove focus ring css workarounds - [`55ce09d`](https://github.com/imputnet/cobalt/commit/55ce09d6f458eea15598b2122660079bbf558395) web/Switcher: fix box-shadow - [`4de00b6`](https://github.com/imputnet/cobalt/commit/4de00b62408d78327cb2d85389716e5d7d261b8b) web/app.css: prettier focus ring on links - [`44dc9ca`](https://github.com/imputnet/cobalt/commit/44dc9ca9dd1014198f4365bec932289a1d1f7aef) web/app.css: add focus ring for select & fix active button focus color - [`2fce88a`](https://github.com/imputnet/cobalt/commit/2fce88af2fa9157e56317d109f3862fb5e173193) web/DonateOptionsCard: fix fantom button focus on tab nav, refactor ### 📊 Changes **22 files changed** (+88 additions, -116 deletions) <details> <summary>View changed files</summary> 📝 `web/src/app.css` (+14 -7) 📝 `web/src/components/buttons/Switcher.svelte` (+1 -4) 📝 `web/src/components/changelog/ChangelogEntry.svelte` (+0 -1) 📝 `web/src/components/dialog/PickerDialog.svelte` (+0 -4) 📝 `web/src/components/dialog/PickerItem.svelte` (+2 -1) 📝 `web/src/components/dialog/SavingDialog.svelte` (+0 -8) 📝 `web/src/components/dialog/SmallDialog.svelte` (+0 -5) 📝 `web/src/components/donate/DonateBanner.svelte` (+0 -1) 📝 `web/src/components/donate/DonateCardContainer.svelte` (+3 -3) 📝 `web/src/components/donate/DonateOptionsCard.svelte` (+54 -52) 📝 `web/src/components/donate/DonateShareCard.svelte` (+2 -5) 📝 `web/src/components/misc/FileReceiver.svelte` (+5 -1) 📝 `web/src/components/misc/Placeholder.svelte` (+1 -1) 📝 `web/src/components/queue/ProcessingStatus.svelte` (+3 -3) 📝 `web/src/components/save/Omnibox.svelte` (+0 -4) 📝 `web/src/components/save/SupportedServices.svelte` (+1 -2) 📝 `web/src/components/save/buttons/DownloadButton.svelte` (+0 -4) 📝 `web/src/components/settings/SettingsInput.svelte` (+0 -4) 📝 `web/src/components/subnav/PageNav.svelte` (+0 -2) 📝 `web/src/routes/+page.svelte` (+0 -1) _...and 2 more files_ </details> ### 📄 Description - uses outline instead of box-shadow to not conflict with existing box-shadow on many elements - shows the focus ring only on clickable elements (button & a) - removes data-focus-ring-hidden & all other related workarounds - fixes the focus ring of the processing status button and file receiver --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2025-11-09 10:11:22 -06:00
Sign in to join this conversation.