Add html-validation to detect malformed markup

[octopusinvitro]

Firefox was showing the source code with the heading tags in red. I discovered that it was due to a missing link-closing tag, so I added to the main layout heading. But it is much better if we have an automated way to detect and correct those things. Hence this addition. The gem uses the tidy-html5 validator, which can be installed locally optionally.

I ran the validator against each page and did a separate commit for each, including the reported errors for that page.

@zarino , I had to remove some of your code (basically attributes in the main page's select) and add code on some other places (mostly alt attributes to images), so I would like you to take a look at this as well if you please.

[tmtmtmtm]

A bugfix without a regression test… surely not? ;)

[octopusinvitro]

@tmtmtmtm should I research into adding something that runs a check against the W3C validator when running the web tests

[tmtmtmtm]

I don't think you need to run against an external validator. Nokogiri in strict mode is probably all we need.

Changing the subject to Nokogiri::HTML(last_response.body) { |config| config.strict } lets us then run a test later like

it "has no HTML errors" do
   subject.errors.must_be_empty
end

[zarino]

@octopusinvitro – This looks fine to me, apart from the “Search by country name” hint text now being missing from the search input on the homepage.

Before:

After:

The text input (generated by selectToAutocomplete) uses copy-attributes-to-text-field to soak up whatever HTML attributes the source <select> element had. I guess, a satisfactory solution if we still want W3C compliant markup, would be to add the placeholder attribute back in with JavaScript, immediately before we call . selectToAutocomplete() in main.js.

[octopusinvitro]

@tmtmtmtm I rebased all commits in the PR to:

• Remove the commits that were adding the old nu-validator
• Remove the commit that validates the home page, and leave that to another PR where Make the hint text visible again #15562 is also addressed
• Moved the tests to their dedicated pages and remove the html_validation test file
• I had to add a t/web/countries.rb page because it didn't exist.
• It puts back the placeholder text in the select element through JavaScript. @zarino might want to check this commit out (1994b19)

Closes #15562

[zarino]

A small thing, but it’s generally good practice to avoid querying the DOM more often than is necessary. So, you might query the DOM once and then cache the result in a variable to be reused again later:

var $select = $('.js-select-to-autocomplete');
$select.attr({ … });
$select.selectToAutoComplete();
$select.on('change', function(){ … });

Or, since you have a fairly small number of methods to call, you could save the overhead of another variable, and just use jQuery chaining:

$('.js-select-to-autocomplete')
  .attr({ … })
  .selectToAutocomplete()
  .on('change', function(){ … });

[tmtmtmtm]

Generally looking good, but the repetition of the

skip if `which tidy`.empty?

seems unnecessary and error-prone. I think it would be a lot cleaner and simpler to move that check inside the last_response_must_be_valid check.

[octopusinvitro]

@tmtmtmtm feedback addressed

[tmtmtmtm]

NB: this still seems like it's doing way too many things at once. Not being able to fix any of the problems until we've fixed all of the problems in a monster PR seems like completely the wrong approach.

[tmtmtmtm]

Is a plain "Member headshot" sufficient, when there might be hundreds of these across the page? Perhaps we should include the member's name here?

[tmtmtmtm]

ditto here. "Placeholder image for Freddy McFreedy" seems like it might be more useful.

[octopusinvitro]

Closing this as it was handled in separate PRs for every page and the only ones pending are #15587 and #15594