Bring the Tailwind theme up to par with Bootstrap#1699
Open
neilvcarvalho wants to merge 3 commits into
Open
Conversation
When using the Tailwind theme, labels don't have a `for` attribute. This makes the library less accessible and harder to use with automated test libraries that rely on accessible names. This commit adds `for` labels and `aria-describedby` attributes based on how the Bootstrap themes do it, fixing this issue.
Author
|
Hi @germanbisurgi, thanks for keeping this project alive! Although this is not a critical bugfix, it addresses some pains of my current project's usage. We use Tailwind and noticed that some stuff that are on the Bootstrap themes are missing. Please let me know if there's anything I could do to make this PR move forward. |
The Tailwind theme does not have the `getHiddenText`, `getHiddenLabel` and `visuallyHidden` methods, falling back to the abstract theme implementation. The Bootstrap themes, in contrast, implement those methods using the Bootstrap classes. Modifying the `style` attribute, as the abstract theme does, raises some CSP issues that don't happen by applying a class instead. This commit implements those methods using Tailwind classes.
402facc to
bcd1b0b
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The Tailwind theme was in need of some love on the accessibility front.
This Pull Request fixes two issues on that theme:
#1612 - Missing
forattribute in labelsBased on the Bootstrap themes, we now add
forandaria-describedbyattributes to labels, ensuring that label clicks work, and screen readers have a correct mapping of labels and fields.#1698 - Using
styleelements to hide fieldsAlso based on the Bootstrap themes, we now use Tailwind classes to hide elements instead of falling back to the default implementation (that modifies the
styleattribute).