Maniphest T342560

Tabs: Improve keyboard navigation and focus handling
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To

Authored By

	CCiufo-WMF
	Jul 24 2023, 4:25 PM

Tags

Referenced Files

None

Subscribers

Description

From T337967#8983016:

After studying the W3C guidelines for how to represent the Tabs UI pattern in an accessible way, I think that we have a basic outline of a solution:

Tab items in the list should be <button> elements, not links – this is true for both the CSS-only and the JS-enabled versions of the component

Our current focus handling code will likely need to change, but we can visually keep things looking the same with minor style changes.

An initial patch demonstrating this approach is available here: https://gerrit.wikimedia.org/r/934626, and you can see a live demo here: https://934626--wikimedia-codex.netlify.app/components/demos/tabs.html#demos

Details

	Subject	Repo	Branch	Lines +/-
	Update Codex from v0.15.0 to v0.16.1	mediawiki/core	master	+1 K -1 K
	Tabs: Align markup closer to APG example	design/codex	main	+433 -573

Customize query in gerrit

Related Objects

Mentioned In: T340132: Update MediaSearch tabs to match the Codex CSS Tabs markup
Mentioned Here: T337967: [Spike] Determine correct ARIA attributes to use in Codex Tabs markup (JS and CSS-only)

Event Timeline

CCiufo-WMF created this task.Jul 24 2023, 4:25 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 24 2023, 4:25 PM

CCiufo-WMF triaged this task as Medium priority.Jul 24 2023, 4:26 PM

CCiufo-WMF added a subscriber: egardner.

egardner raised the priority of this task from Medium to High.Jul 24 2023, 5:15 PM

egardner moved this task from Needs Refinement to Design-Systems-Sprint-4 on the Design-System-Team board.Jul 24 2023, 5:18 PM

egardner edited projects, added Design-System-Team (Design-Systems-Sprint-4); removed Design-System-Team.

egardner set the point value for this task to 2.Jul 24 2023, 5:24 PM

CCiufo-WMF mentioned this in T340132: Update MediaSearch tabs to match the Codex CSS Tabs markup.Jul 24 2023, 5:29 PM

egardner claimed this task.Jul 24 2023, 5:33 PM

egardner moved this task from Committed to In Progress on the Design-System-Team (Design-Systems-Sprint-4) board.Jul 24 2023, 8:51 PM

Change 941530 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[design/codex@main] Tabs: Align markup closer to APG example

https://gerrit.wikimedia.org/r/941530

gerritbot added a project: Patch-For-Review.Jul 25 2023, 10:12 PM

egardner moved this task from In Progress to Code Review on the Design-System-Team (Design-Systems-Sprint-4) board.Jul 25 2023, 10:19 PM

egardner changed the point value for this task from 2 to 5.Jul 27 2023, 3:25 PM

Change 941530 merged by jenkins-bot:

[design/codex@main] Tabs: Align markup closer to APG example

https://gerrit.wikimedia.org/r/941530

Maintenance_bot removed a project: Patch-For-Review.Jul 27 2023, 11:30 PM

Catrope moved this task from Code Review to Pending Release on the Design-System-Team (Design-Systems-Sprint-4) board.Jul 27 2023, 11:49 PM

Change 944353 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v0.15.0 to v0.16.1

https://gerrit.wikimedia.org/r/944353

gerritbot added a project: Patch-For-Review.Aug 1 2023, 11:29 PM

Change 944353 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.15.0 to v0.16.1

https://gerrit.wikimedia.org/r/944353

Maintenance_bot removed a project: Patch-For-Review.Aug 2 2023, 7:30 AM

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.22; 2023-08-15).Aug 2 2023, 8:00 AM

Volker_E closed this task as Resolved.Aug 2 2023, 9:14 AM