Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(a11y): explicitly associate label and input elements #813

Merged

Conversation

pano9000
Copy link
Contributor

Hi,

this PR ads an explicitly associated label to input elements that did not have one previously (I hope I found all of them :-))

This closes #790.

In a separate PR I will continue working on turning the implicit labels into explicits ones as well, as they usually seem to work better with screen readers, from what I've read online.

Copy link
Contributor

@eliandoran eliandoran left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good for me for now.

Indeed, wrapping the <input> inside the <label> would actually work better because I think the current implementation does not work well when you have multiple tabs of the same view (i.e. options), since you have the same ID multiple times in the hierarchy.

@eliandoran eliandoran merged commit 818f961 into TriliumNext:develop Dec 18, 2024
@pano9000
Copy link
Contributor Author

Indeed, wrapping the <input> inside the <label>

that would actually be an implicitly associated label again, which I would want to avoid.
The id issue is potentially valid comment though, I will need to do some tests with it

@pano9000
Copy link
Contributor Author

I just did a quick test and and can confirm, if you open up two of the same widgets (like with the Options), there will be two identical ids - which can cause unexpected behaviour (i.e. the focus jumps to the "first" element with that id, which might not be your active tab)

I'll create a bug ticket this evening and work on getting this fixed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Suggestion: Associate HTML label tags with input tags
2 participants