Move form help text into legend #484
Conversation
selfthinker
force-pushed
the
form-help-text
branch
from
1a146cf
to
5805e97
Compare
selfthinker
force-pushed
the
form-help-text
branch
from
5805e97
to
6bb628e
Compare
selfthinker
force-pushed
the
form-help-text
branch
from
6bb628e
to
40c3d55
Compare
selfthinker
changed the title
| @@ -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.
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.
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.
selfthinker
force-pushed
the
form-help-text
branch
from
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.
selfthinker
force-pushed
the
form-help-text
branch
from
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.26316emwhich translates to 5px with default settings), even though it uses the same CSS. That is because previously the margins were collapsing as thepcame directly after theh3and 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?