[client] js: Postbox: Use labels rather than placeholders #861
Conversation
This file contains 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
ix5
added
client
Placeholders are is meant to be a hint (an example input) for the user about what to enter into the field, but shouldn't be used in lieu of a <label>. See following links for further justification: - https://www.tpgi.com/html5-accessibility-chops-the-placeholder-attribute/ - https://www.nngroup.com/articles/form-design-placeholders/ - https://www.maxability.co.in/2016/01/03/placeholder-attribute-and-why-it-is-not-accessible/ This commit is a reland of isso-comments#356 with a fix for the placeholder-replacement code in `isso.js` as reported in isso-comments#524
Adding labels and changing the placeholders causes a change in the generated HTML and necessitates an update of the snapshot.
Should vanish when `require-author`/email is set in config.
The "Preview" and "Submit" buttons had `display: inline-block` set, but this was ignored and reset to `block` due to also being `float`-ed right. The blocks would align at the same height as the labels, not the height of the input fields. Because before the introduction of the labels, the input fields and the submit buttons aligned vertically, restore that state. Set height of labels explicitly and offset the action buttons by that same height vertically. On mobile, where the post action buttons are on another row below the input fields anyway, apply no top margin.
ix5
force-pushed
the
js-template-labels-placeholders
branch
from
3980b1e
to
0172c21
Compare
|
Future idea: Amend the email label to also inform users that the email collected will not be published and only be used for notifications/spam avoidance (but be saved in the Isso database). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Placeholders are is meant to be a hint (an example input) for the user about what to enter into the field, but shouldn't be used in lieu of a
<label>.See following links for further justification:
This commit is a reland of #356 with a fix for the placeholder-replacement code in
isso.jsas reported in #524Also update snapshot and add a new test to avoid similar future errors.
Before:
After: (note
Name,E-Mail,Websitelabels above input fields)Mobile:
Previous revision (note
Preview/Submitbuttons vertically not aligned)