primefaces / primefaces/primereact
InputText: Use relative rather than absolute units with 'font-size'
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
There is an issue from accesibility validator for InputText:
WCAG2 AA 1.4.4: Use relative rather than absolute units with 'font-size'.
Using relative units helps the page to be rendered correctly at different resolutions and allows people with sight difficulties to 'zoom in' to pages to read them.
.p-float-label input:focus ~ label, .p-float-label input:-webkit-autofill ~ label, .p-float-label input.p-filled ~ label, .p-float-label textarea:focus ~ label, .p-float-label textarea.p-filled ~ label, .p-float-label .p-inputwrapper-focus ~ label, .p-float-label .p-inputwrapper-filled ~ label, .p-float-label .p-tooltip-target-wrapper ~ label {
top: -0.75rem;
font-size: 12px;
}
Reproducer
No response
System Information
System:
OS: Windows 10 10.0.19045
CPU: (6) x64 Intel(R) Core(TM) i5-9400 CPU @ 2.90GHz
Memory: 3.44 GB / 15.87 GB
Binaries:
Node: 20.10.0 - C:\Program Files\NodeJS 20.10.0\node.EXE
npm: 10.2.3 - C:\Program Files\NodeJS 20.10.0\npm.CMD
Browsers:
Edge: Chromium (140.0.3485.54)
Internet Explorer: 11.0.19041.5794
Steps to reproduce the behavior
- Validate website which contains InputText with Accesibility Validator
Expected behavior
No WCAG error regarding:
WCAG2 AA 1.4.4: Use relative rather than absolute units with 'font-size'.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Locate the shown .p-float-label selector in the InputText styling and inspect how its font size is defined. Replace the absolute font-size unit with a relative unit, then validate an InputText example with an accessibility validator to confirm the WCAG 1.4.4 error is gone.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100