fix(a11y): make team folder edit buttons keyboard-operable#4825
fix(a11y): make team folder edit buttons keyboard-operable#4825mvanhorn wants to merge 3 commits into
Conversation
The team folders admin settings table rendered its rename and delete row controls as bare <a> elements with an onClick handler but no href. Anchors without an href are not part of the tab order and do not respond to Enter/Space, so keyboard-only and screen-reader users could not rename or delete a team folder. Replace those non-interactive anchors with native <button type="button"> elements that carry the existing onClick handlers and a discernible aria-label, restoring keyboard operability and a non-empty accessible name. Add minimal SCSS to strip the default button chrome so the controls keep their prior icon/text appearance. Fixes nextcloud#4466 Signed-off-by: Matt Van Horn <mvanhorn@gmail.com>
Address review feedback: an aria-label of just "Rename" overrode the visible mount-point text as the button's accessible name, exposing every row only as "Rename". Include the folder name in the label so each row stays identifiable to screen-reader and voice-control users. Signed-off-by: Matt Van Horn <mvanhorn@gmail.com>
Address review feedback: the FolderGroups column also renders an <a class="action-rename">, so an unscoped reset (notably color: inherit) leaked into that anchor and overrode its lighter link color. Scope the button-chrome reset to button.action-rename so the sibling anchor keeps its existing styling. Signed-off-by: Matt Van Horn <mvanhorn@gmail.com>
|
The rename control now renders as Failure scenario: in the admin team-folders table the folder name in each row, previously rendered bold in |
Summary
The team folders admin settings table rendered its row action controls as bare
<a>elements with anonClickhandler but nohref:<a className="icon icon-delete icon-visible">).Anchors without an
hrefare not part of the tab order and do not respond to Enter/Space activation, so keyboard-only and screen-reader users could not rename or delete a team folder from the settings table.This PR replaces those non-interactive anchors with native
<button type="button">elements that carry the existingonClickhandlers and a discerniblearia-label. Buttons are natively focusable and fire on Enter/Space, restoring keyboard operability without a custom keydown handler. Minimal SCSS strips the default button chrome so the controls keep their prior icon/text appearance.Notable accessibility detail: the rename button's
aria-labelincludes the folder name (Rename "{mountPoint}") so each row remains identifiable to screen-reader and voice-control users rather than every row being announced only as "Rename". The button-chrome reset is scoped tobutton.action-renameso the sibling<a class="action-rename">in the groups column keeps its existing link styling.Why this matters
Closes a WCAG keyboard-operability gap (2.1.1 Keyboard) in the team folders settings UI. The issue was filed by a maintainer and triaged by the Nextcloud team to the actionable
1. to developstate (ref #4466). Scope is intentionally limited to the keyboard-interactivity fix for the row action controls.Testing
eslint src/settings/App.tsxandstylelint src/settings/App.scssreport no new findings on the changed lines (pre-existing warnings/errors unrelated to this change remain).Fixes #4466