-
Notifications
You must be signed in to change notification settings - Fork 90
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
Move form help text into legend #484
Conversation
1a146cf
to
5805e97
Compare
5805e97
to
6bb628e
Compare
6bb628e
to
40c3d55
Compare
@@ -20,6 +20,11 @@ fieldset { | |||
width: 100%; | |||
} | |||
|
|||
// Hack to let legends or elements within legends have margins in webkit browsers |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is quite hacky but is the least hacky solution I could find for fixing an issue in all webkits which will not allow a margin on the form hint text. I suspect this might be too controversial (a similar solution was tried in #76 by @timpaul and rejected). That's why I created an alternative solution to fix the same problem with #485.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
could use overflow: hidden;
instead
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, yes that works as well. I could have sworn I tried it but apparently not. I think that makes more sense, so will change it.
40c3d55
to
4a13e9f
Compare
Most groups of checkboxes and radio buttons within Elements have an additional introductory help text which isn't a hint. It's usually there to help less technical people understand that you can select multiple checkboxes, but can also be used for other purposes. This moves that text into the legend to also make it accessible to assistive technologies like screen readers. The styling is nearly the same as before and adds a class to the current paragraph declaration to re-use its styling.
4a13e9f
to
a1b9e7b
Compare
I have added some documentation (as suggested by @gemmaleigh on #485), changed the "hack" to use |
This looks good, thanks @selfthinker and @igloosi 👍 |
This is an alternative solution to #485.
What problem does the pull request solve?
Most groups of checkboxes and radio buttons within Elements have an additional introductory help text which isn't a hint. It's usually there to help less technical people understand that you can select multiple checkboxes, but can also be used for other purposes.
This moves that text into the legend to also make it accessible to assistive technologies like screen readers. The styling is nearly the same as before and adds a class to the current paragraph declaration to re-use its styling.
There is a bit more spacing above the help text in the new version (probably
0.26316em
which translates to 5px with default settings), even though it uses the same CSS. That is because previously the margins were collapsing as thep
came directly after theh3
and now they aren't anymore because the text has been moved into the legend. I'm not sure if it's worth fixing as spacing within Elements is quite inconsistent and it doesn't look wrong.Let me know if you think I should do something about it.
How has this been tested?
I've tested in multiple browsers via BrowserStack.
Screenshots
Before
After
Differences
What type of change is it?