Use tidy-html5 to validate the home page

[octopusinvitro]

What does this do?

HTML-validates the home page

Why was this needed?

HTML was broken

Relevant Issue(s)

everypolitician/everypolitician#505
Closes #15562

Implementation notes

The attributes removed to make the validation pass where added back with JavaScript.

Screenshots

(Image by @zarino )

Notes to Reviewer

Errors corrected:

• Attribute "placeholder" not allowed on element "select" at this point. At line 86, column 189
• Attribute "autocorrect" not allowed on element "select" at this point. At line 86, column 189
• Attribute "autocomplete" not allowed on element "select" at this point. At line 86, column 189

Notes to Merger

None

[tmtmtmtm]

@octopusinvitro this is changing the behaviour of a visible part of the site, so I think this one does need a screenshot to show that it's still working the same way after the change.

[octopusinvitro]

@tmtmtmtm I added a screenshot.

[zarino]

(Image by @zarino )

Maybe I'm missing something, but what's the point of including a screenshot in a PR, if the screenshot was taken before the changes in the PR were even written?

[octopusinvitro]

@zarino Because nothing has changed and I am too lazy to take another identical screenshot! 😄

[davewhiteland]

I would like to be convinced that we need to do this: placeholder works as an inbuilt feature of modern browsers, without any requirement for JS (yay). But this way we're only using placeholder if JS is enabled/available, which seems like an accessibility step backwards.

My understanding of this is that we're using JS to add these attributes after validation because the validator will otherwise report them. If so, it feels odd to be introducing a JS dependency to get around a problem with the validator.

[zarino]

My understanding of this is that we're using JS to add these attributes after validation because the validator will otherwise report them. If so, it feels odd to be introducing a JS dependency to get around a problem with the validator.

We’re adding them because, to the letter of the law, the HTML5 spec^[1] doesn't allow placeholder, autocorrect, or autcomplete attributes to be applied to a select element.

If you ask me – it's a classic example of when you can safely ignore the spec. But that's just me.

^[1] https://www.w3.org/TR/html5/forms.html#the-select-element

[octopusinvitro]

@davewhiteland The easy fix for that would be to include an actual DOM element in the document just before the select with the placeholder/informative, text, and if JS is enabled, it would hide that element, pick the informative text it contains, and use it as a placeholder in the select.

@zarino what do you think?

[zarino]

@zarino what do you think?

Including the placeholder text in a <label> or whatever, before the <select>, and then removing the element and applying its content as the placeholder attribute on the <select> before it gets selectToAutocomplete’d—as you suggest—is probably the best idea. Not only does it gracefully degrade if JavaScript doesn't run, but it also avoids the thorny semantic argument over whether a command like “Search by country name” is actually a suitable thing to be put into a placeholder attribute.

Question is: what’s the best way of marking up such a “hint” element. A second label is one option:

<p>
  <label for="country-selector">Find representatives from your country:</label>
  <label for="country-selector">Search by country name</label>
</p>
<%= erb :country_selector %>

A separate element inside the same label is another option:

<p>
  <label for="country-selector">
    Find representatives from your country:
    <span class="js-turn-me-into-a-placeholder">Search by country name</span>
  </label>
</p>
<%= erb :country_selector %>

[octopusinvitro]

@zarino I like the second one better 😃

I would add a third one:
The text "Search by country name" feels more like a proper label for the select. So another option could be to make that be the actual label and "Find representatives in your country" can be a heading or another paragraph:

<p class="fancy-paragraph">Find representatives from your country:</p>
<p class="js-turn-me-into-a-placeholder">
  <label for="country-selector">Search by country name</label>
</p>
<%= erb :country_selector %>

[zarino]

The text "Search by country name" feels more like a proper label for the select. So another option could be to make that be the actual label and "Find representatives in your country" can be a heading or another paragraph

I'd say that's fine, as long as you can still click the "Find representatives in your country" and it focusses the search box. (That’s something you get for free when you use a <label>.)

[octopusinvitro]

@zarino ah yes you are right. I'll go with your second option 👍

[tmtmtmtm]

I think I'm going to put a bit of kibosh on this one, at least for now. I can certainly see some value in having all our HTML be completely valid, but this is already several levels removed from the original trigger for this, which was about detecting mismatched tags.

The value of the changes being discussed here now seem a little too minimal for the amount of effort, when we have so many other important things to do.