GeekyAnts / GeekyAnts/NativeBase

Form elements do not have associated labels

Open
#5,627 3 comments 0 reactions 0 assignees View on GitHub
bug triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

I expect the labels are linked to input fields so the inputs are accessible

### CodeSandbox/Snack link

https://docs.nativebase.io/login-signup-forms

### Steps to reproduce

1. Go to ['login-signup-forms' ](https://docs.nativebase.io/login-signup-forms) on chrome
2. RightClick on inspect
3. Open lighthouse and click Analyze page load
4. See error

![CleanShot 2022-12-29 at 12 18 50](https://user-images.githubusercontent.com/35220102/209902876-36d9e4b6-e195-4d42-8833-3ca00cf522f8.png)

If I inspect the Dom elements I can see the elements are not linked because of mismatched between the label for attribute value and input id attribute value

![CleanShot 2022-12-29 at 12 22 58](https://user-images.githubusercontent.com/35220102/209903296-5b529a9d-9491-47d3-a431-7e643201d95e.png)

the input id value has "-input" appended to it, while the label for field has not. I hope this can be fixed. I'm new to using nativebase and really love it so far, only a bit disappointed by the low accessibility score I am getting ion the browser because of this issue.

Thanks for the great work!

### NativeBase Version

3.4.25

### Platform

- [ ] Android
- [ ] CRA
- [X] Expo
- [ ] iOS
- [X] Next

### Other Platform

_No response_

### Additional Information

It also seems for inputs that have a helper text the input is labelled by the helper text, which doesn't seem entirely correct. I guess it's better to label the input by the label itself

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.