ionic-team / ionic-team/ionic-framework

bug:Accessibility 1.4.4 rescaling text fails for input field: floating label is truncated

Open
#30,287 0 comments 0 reactions 0 assignees View on GitHub
a11y package: react type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

A floating label in an input field is truncated and moved down when the text is scaled (e.g 200%)

### Expected Behavior

The label should wrap within the input field and the input field should grow (vertically) to comply with rule 1.4.4.

### Steps to Reproduce

1. Run the application
2. Rescale your text to 200%
3. Resize the window until the label no longer fits in the input field.

### Code Reproduction URL

https://github.com/ldikmans/inputfield-bug-wcag

### Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.4.3

Capacitor:

Capacitor CLI : 7.1.0
@capacitor/android : 7.1.0
@capacitor/core : 7.1.0
@capacitor/ios : 7.1.0

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v23.7.0 (/usr/local/Cellar/node/23.7.0/bin/node)
npm : 10.9.2
OS : macOS Unknown

### Additional Information

In the documentation ionic writes that having a separate label is no longer recommended, but it seems to be the only way to adhere to WCAG guideline 1.4.4.

It seems other types of labels (stacked or default) don't solve this issue either.

I have tried to set the whitespace property to wrap and put the label in a label slot, but that seems to make it worse, all types of vertical transformations happen when I try that.

Contributor guide

Open the contributing guide

Research direction

Start with the linked reproduction URL and inspect the Ionic React input field with a floating label at 200% text scaling. Reproduce the truncation while resizing the window, then trace the input component and its label styling. Done means the label wraps within the field and the field grows vertically without truncation.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.