TextInput and TextArea: check the color contrast between default border and background
Closed, ResolvedPublic1 Estimated Story Points
Actions

Assigned To

Authored By

	bmartinezcalvo
	Jul 10 2023, 2:49 PM

Project Tags

Referenced Files

	F37132270: Captura de pantalla 2023-07-07 a las 17.25.15.png
	Jul 10 2023, 2:49 PM

Subscribers

Description

Background

In T337959: Accessibility audit: check the contrast ratio in our Codex components we detected that when there is no placeholder in a TextInput or TextArea, the border color should be enough 3:1 contrast with the background color. This color contrast criteria is documented in the WCAG 2.1 guidelines.

Captura de pantalla 2023-07-07 a las 17.25.15.png (2,628×942 px, 204 KB)

We need to increase the color contrast of the border used in the default state in inputs (TextInput, TextArea).

Design spec

Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below.

Component spec sheet

Open questions

Add here the questions to be answered in order to design and implement the component

Acceptance criteria (or Done)

Design

Design the Figma spec sheet and add it in this task
Update the component in the Figma library. This step will be done by a DST member.

Code

Implement the component in Codex

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		DTorsani-WMF	T371117 [EPIC] Accessibility improvements for component's colors
		Resolved		DTorsani-WMF	T341487 TextInput and TextArea: check the color contrast between default border and background

Event Timeline

bmartinezcalvo created this task.Jul 10 2023, 2:49 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 10 2023, 2:49 PM

bmartinezcalvo added subscribers: CCiufo-WMF, RHo.Jul 10 2023, 2:49 PM

bmartinezcalvo mentioned this in T337959: Accessibility audit: check the contrast ratio in our Codex components.Jul 10 2023, 2:52 PM

CCiufo-WMF moved this task from Inbox to Backlog on the Design-System-Team board.Jul 10 2023, 7:32 PM

Volker_E added a project: Accessibility.Oct 13 2023, 5:26 AM

bmartinezcalvo mentioned this in T370663: [EPIC] Unify states in interactive components.Jul 24 2024, 2:21 PM

bmartinezcalvo added a parent task: T370663: [EPIC] Unify states in interactive components.Jul 24 2024, 4:21 PM

CCiufo-WMF edited parent tasks, added: T371117: [EPIC] Accessibility improvements for component's colors; removed: T370663: [EPIC] Unify states in interactive components.Oct 2 2024, 2:58 PM

bmartinezcalvo assigned this task to DTorsani-WMF.Oct 15 2024, 5:47 PM

bmartinezcalvo set the point value for this task to 1.

bmartinezcalvo edited projects, added: Design-System-Team (DST-Sprint-34 (2024-10-15 to 2024-10-25)); removed: Design-System-Team.

CCiufo-WMF triaged this task as Low priority.Oct 15 2024, 5:49 PM

DTorsani-WMF moved this task from Committed to In Progress on the Design-System-Team (DST-Sprint-34 (2024-10-15 to 2024-10-25)) board.Oct 17 2024, 9:34 PM

Change #1082065 had a related patch set uploaded (by Dtorsani; author: Dtorsani):

[design/codex@main] tokens: Unify interactive styles phase 1

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

gerritbot added a project: Patch-For-Review.Oct 21 2024, 6:09 PM

DTorsani-WMF mentioned this in T377977: Update interactive styles of components: phase 1.Oct 23 2024, 4:06 PM

Resolving this task as it has resulted in changes needing to be made, which will be done as a part of T377977: Update interactive styles of components: phase 1.

TextInput and TextArea: check the color contrast between default border and backgroundClosed, ResolvedPublic1 Estimated Story PointsActions