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.

Sign up for GitHub

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

Jump to bottom

[client] js: Postbox: Use labels rather than placeholders #861

Merged
merged 6 commits into from
May 7, 2022
Merged

[client] js: Postbox: Use labels rather than placeholders #861

merged 6 commits into from
May 7, 2022

Commits on May 7, 2022

  1. js: Postbox: Use labels rather than placeholders 

    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
    @mpchadwick @ix5
    mpchadwick authored and ix5 committed May 7, 2022
    Configuration menu
    Copy the full SHA
    3d92c9b View commit details
    Browse the repository at this point in the history

  2. isso: tests/unit: Update isso.js snapshot 

    Adding labels and changing the placeholders causes a change
in the generated HTML and necessitates an update of the
snapshot.
    @ix5
    ix5 committed May 7, 2022
    Configuration menu
    Copy the full SHA
    d5568ba View commit details
    Browse the repository at this point in the history

  3. js: tests/unit: Add test for Postbox labels 

    Should vanish when `require-author`/email is set in config.
    @ix5
    ix5 committed May 7, 2022
    Configuration menu
    Copy the full SHA
    ea59a72 View commit details
    Browse the repository at this point in the history

  4. isso: css: Align action buttons vertically w/ inputs 

    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
    ix5 committed May 7, 2022
    Configuration menu
    Copy the full SHA
    315e327 View commit details
    Browse the repository at this point in the history

  5. isso: demo: Make mobile-friendly

    @ix5
    ix5 committed May 7, 2022
    Configuration menu
    Copy the full SHA
    0172c21 View commit details
    Browse the repository at this point in the history

  6. CHANGES: Add labels-rather-than-placeholders

    @ix5
    ix5 committed May 7, 2022
    Configuration menu
    Copy the full SHA
    0d09324 View commit details
    Browse the repository at this point in the history