Skip to content

fix: pause toasts, fix pagination semantics and name upload states - #4069

Merged
AlexAndBear merged 3 commits into
mainfrom
fix/a11y-quick-wins-3
Oct 30, 2026
Merged

AlexAndBear merged 3 commits into
mainfrom
fix/a11y-quick-wins-3

Conversation

@AlexAndBear

Copy link
Copy Markdown
Member

Description

Three more small a11y fixes from our audit. Nothing changes visually.

  • Toasts pause while you use them: a toast with an action like "Undo" no longer disappears after its timeout while the pointer is on it or the keyboard focus is inside it. Once both have left, the full timeout starts again. Done with useElementHover, useFocusWithin and useTimeoutFn from vueuse.
  • Pagination: only the current page is exposed as the current page. Before, every page link had aria-current="page", because the links only differ in the query. After choosing a page with the keyboard, the focus moves to the new current page instead of falling to the body, without scrolling the list away from the top.
  • Upload status: each item in the upload details tells screen readers its status (Uploaded, Uploading, Paused, Cancelled, Failed). Before, that was only an icon.

Not covered here: reaching a toast with the keyboard still takes many Tabs, and the upload header has no visible "paused" text.

Related Issue

  • none, a11y audit findings

How Has This Been Tested?

  • test environment: unit tests (Vitest), browser tests (Playwright) against a local OpenCloud, Chrome desktop 1280x800 and Pixel 7
  • test case 1: unit tests for every change (toast pause and restart, aria-current, focus after a page change, upload status text), each fails on main
  • test case 2: toast: hover, focus on Undo, both combined, and a brief hover, the toast closes a full timeout after leaving; default timeouts unchanged
  • test case 3: pagination in files, search results and trash: only the current page is marked, focus lands on the new page after Enter, the list stays scrolled to the top, no focus ring after a mouse click
  • test case 4: upload panel with uploaded, paused, cancelled and failed items, checked in the accessibility tree
  • test case 5: pixel compare against main and axe on the touched views: no visible difference, no new violations

Types of changes

  • Bugfix
  • Enhancement (a change that doesn't break existing code or deployments)
  • Breaking change (a modification that affects current functionality)
  • Technical debt (addressing code that needs refactoring or improvements)
  • Tests (adding or improving tests)
  • Documentation (updates or additions to documentation)
  • Maintenance (like dependency updates or tooling adjustments)

Toasts pause their timeout while hovered or focused, pagination only
marks the current page and keeps the keyboard focus after a page change,
and upload items tell screen readers their status. No visible changes.

@JammingBen JammingBen left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pagination only works correct as long as it's not truncating items at the start. E.g. have 10 pages, current page 5. Navigate to 4 via keyboard, now the focus is on 3 instead of 4.

@AlexAndBear
AlexAndBear merged commit 0fcf761 into main Oct 30, 2026
28 checks passed
@AlexAndBear
AlexAndBear deleted the fix/a11y-quick-wins-3 branch October 30, 2026 14:09
@github-project-automation github-project-automation Bot moved this from Needs Review to Done in OpenCloud Team Board Oct 30, 2026
openclouders pushed a commit that referenced this pull request Oct 30, 2026
…4069)

* fix: pause toasts, fix pagination semantics and name upload states

Toasts pause their timeout while hovered or focused, pagination only
marks the current page and keeps the keyboard focus after a page change,
and upload items tell screen readers their status. No visible changes.

* fix: keep pagination focus on the activated page when pages are truncated

* fix: don't repeat the first and last page in truncated pagination
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants