dequelabs / dequelabs/cauldron

Bug: "Required" label of text field wraps when label is too long (text-only zoom)

Open
#1,139 2 comments 0 reactions 0 assignees View on GitHub
bug low
Dominant language
TypeScript
Stars
127
Forks
31
Avg merge
2d 12h
Merged PRs (30d)
8

Description

### Steps to reproduce

Find a text field with a "required" attribute in a sufficiently narrow container. Increase text-only zoom to 200% and reduce viewport width.

### Expected Behavior

Label and "required" label do not wrap

### Actual Behavior

The word "required" wraps, breaking at individual letters.

### Version

5.6.2

### What browsers are you experiencing the problem on?

Chrome

### Relevant log output

_No response_

### Anything else we should know?

Additional information

Screenshot:
![Screenshot 2023-07-29 at 7 18 36 PM](https://github.com/dequelabs/cauldron/assets/60084578/542c53be-5b18-4aac-88eb-49365e2f2a71)

Contributor guide

Open the contributing guide

Research direction

No file, test, or entry point is named. Reproduce the issue in Chrome at 200% text-only zoom with a narrow viewport and a required text field; done means the field label and “required” label remain together without breaking the word into letters.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.