palantir/blueprint

FR: InputGroup aria-label can be inferred from placeholder

Open

#4,874 opened on Aug 24, 2021

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
Domain: accessibilityP2Type: feature requesthelp wanted

Description

Environment

  • Package version(s): core 3.48.0

Feature request

<InputGroup> could have better accessibility if it applied an aria-label to its <input>. If the placeholder prop exists, we should use that value. We'll need to consider how this interacts with <FormGroup> and wrapping <label> elements (we don't want to label the input twice).

Contributor guide

Tech stack
typescriptreacthtmlcss
Domain
frontendaccessibility
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactAccessibility basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
The main file to modify is packages/core/src/components/input group/inputGroup.tsx. Look for the <input> element and add an aria label attribute that uses the placeholder prop when no label is provided. Consider the interaction with FormGroup by checking if the input is already labeled via a wrapping <label> or FormGroup's label prop. Review the FormGroup component in packages/core/src/components/form group/formGroup.tsx to understand how labeling works. Ensure not to duplicate aria labels.