question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ability to add `id` property to `{{input_email}}`

See original GitHub issue

Issue Summary

Currently, the email subscribe_form and/or input_email (in beta) do not support the ability to add an ID property. This means that it is not possible to provide a label to this input element. This impacts the accessibility pretty significantly, especially to screen readers.

Steps to Reproduce

  1. Via https://themes.ghost.org/docs/subscribers{{input_email}} currently accepts:
    • class
    • placeholder
    • value
    • autofocus
  2. Adding the attribute id produces no result

While some can/should be able to chose not to label the input element, to do so is not really a best practice. In the future some groups may not be able to use this feature because it does not comply with their accessibility needs, which would be unfortunate

Technical details:

  • Ghost Version: 1.12.0
  • Node Version: N/A
  • Browser/OS: N/A
  • Database: N/A

Personally I think it would be preferable to have a label for the input in subscribe_form, and giving the ability for users to remove it by way of creating their own template partial. While not labeling them by default may look cooler, It does exclude some users which makes me 😢 The current implementation is also not particularly clear to sighted users.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
nazcommented, Aug 24, 2018

@kirrg001 grabbing this one 😉

0reactions
whmiicommented, Aug 31, 2018

thanks @kirrg001 Nice work!! This was out of my wheelhouse so couldn’t really help but glad to see it added. Muchos internet and a11y points to you 🤠

Read more comments on GitHub >

github_iconTop Results From Across the Web

<input type="email"> - HTML: HyperText Markup Language
By adding the multiple Boolean attribute, the input can be configured to accept multiple email addresses. <input id="emailAddress" type ...
Read more >
HTML | DOM Input Email value Property - GeeksforGeeks
The value attribute specifies the initial value of the input Email Field. The value may be a single address or a list of...
Read more >
HTML5 Email input pattern attribute - Stack Overflow
This pattern says that we need exactly one dot character followed by letters, no digits, and we want at least two of them,...
Read more >
Add, download, and delete user data to Identity in an ASP ...
Learn how to add custom user data to Identity in an ASP.NET Core project. Delete data per GDPR.
Read more >
HTML input type="email" - W3Schools
HTML <input> type attribute ... <input type="email" id="email" name="email"> ... Tip: Always add the <label> tag for best accessibility practices!
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found