Binary inputs: Use the Label component internally
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	AnneT
	Jun 13 2023, 7:21 PM

Description

Binary input components (Checkbox, Radio, and ToggleSwitch) have a <label> element that could be swapped out for the Label component so that:

All binary input components can now have a semantic description in addition to a label
The ToggleSwitch component can have a hideLabel prop which would cause the label to be visually hidden (this does not apply to Checkbox and Radio since there are no supported use cases for hidden labels)

We should aim to implement this while still allowing for a simple <label> element within the CSS-only examples that do not take advantage of the description or hideLabel feature.

Acceptance criteria

Label is implemented in the 3 binary input components
Description slot is added to the 3 binary input components
hideLabel prop is added to ToggleSwitch, which is passed to the Label component
Docs for Vue and CSS-only implementations are updated to demonstrate these new features

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Update Codex from v0.15.0 to v0.16.1	mediawiki/core	master	+1 K -1 K
	Checkbox, Radio, ToggleSwitch: Use Label internally	design/codex	main	+1 K -313

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	CCiufo-WMF	T308681 [EPIC] Ensure Codex components compliance with WCAG level AA
Resolved	AnneT	T339963 Binary inputs: clearly document guidelines for accessible labels
Resolved	AnneT	T339013 Binary inputs: Use the Label component internally

Event Timeline

AnneT created this task.Jun 13 2023, 7:21 PM

Restricted Application added a project: Design-System-Team. · View Herald TranscriptJun 13 2023, 7:21 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

CCiufo-WMF moved this task from Inbox to Backlog on the Design-System-Team board.Jun 14 2023, 5:55 PM

CCiufo-WMF mentioned this in T334514: ToggleSwitch: consider making the label required.Jun 16 2023, 2:16 PM

CCiufo-WMF renamed this task from Checkbox, Radio, ToggleSwitch: Consider using the Label component internally to Checkbox, Radio, ToggleSwitch: Use the Label component internally.Jun 22 2023, 5:11 PM

CCiufo-WMF updated the task description. (Show Details)

CCiufo-WMF set the point value for this task to 2.

CCiufo-WMF moved this task from Backlog to Up Next on the Design-System-Team board.

ldelench_wmf added a parent task: T339963: Binary inputs: clearly document guidelines for accessible labels.Jun 22 2023, 5:12 PM

CCiufo-WMF added a project: Codex 1.0.Jun 22 2023, 5:22 PM

CCiufo-WMF renamed this task from Checkbox, Radio, ToggleSwitch: Use the Label component internally to Binary Inputs: Use the Label component internally.Jun 22 2023, 7:43 PM

CCiufo-WMF renamed this task from Binary Inputs: Use the Label component internally to Binary inputs: Use the Label component internally.

CCiufo-WMF updated the task description. (Show Details)

CCiufo-WMF triaged this task as Medium priority.Jun 26 2023, 2:31 PM

AnneT mentioned this in T340261: CSS-only ToggleSwitch should respond to clicks on the ToggleSwitch, not just on the label.Jun 26 2023, 9:03 PM

CCiufo-WMF moved this task from Up Next to Design-Systems-Sprint-3 on the Design-System-Team board.Jul 11 2023, 5:17 PM

CCiufo-WMF edited projects, added Design-System-Team (Design-Systems-Sprint-3); removed Design-System-Team.

AnneT claimed this task.Jul 17 2023, 8:33 PM

AnneT moved this task from Committed to In Progress on the Design-System-Team (Design-Systems-Sprint-3) board.

AnneT updated the task description. (Show Details)Jul 20 2023, 7:05 PM

Change 940257 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Checkbox, Radio, ToggleSwitch: Use Label internally

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