Test redesign concept

[dstorey]

@stevefaulkner for you to review to see if we’re on the right track.

The test file with the stylesheet included is footer.html

If the changes look good then I can update the other tests to match.

Probably best not merge until that is done as we should review the text (test titles are placeholder for e.g.) , and should be some changes for production such as including the web font inside the repo and stylesheet instead of linking to it.

cc @melanierichards

[stevefaulkner]

If the changes look good then I can update the other tests to match.

looks great to me!

one suggestion, the differentiation between the pre/code background colour and the body background colour is a little subtle for my eyes, is it possible to add a faint border around pre?

many thanks to you both @melanierichards @dstorey

[dstorey]

If I recall, we had some issue with adding border while not wanting to add more markup, but I'm thinking, perhaps we should put the individual tests in iframes to guard against any clashes, and to avoid redefining what the test means (for example the footer currently isn't at the root level…I wasn't sure what the exact rules for footer (and header) have to be to get the content-info (and banner) role. If it just has to be closest to root without anything like article changing the meaning,or if it has to be direct child of body? Currently we have wrappers that might change the meaning

If we put tests in iframes, we probably want to put a link under the test to bust out of the frames to make easier to directly test.

[stevefaulkner]

but I'm thinking, perhaps we should put the individual tests in iframes to guard against any clashes, that

may bring more trouble than its worth in regards to testing.

I wasn't sure what the exact rules for footer (and header) have to be to get the content-info (and banner) role.

Only banner/contentinfo if not child of section/article. Other nesting does not effect.

[melanierichards]

Thanks @stevefaulkner! We'll add a border there.

cc @dstorey

[dstorey]

@stevefaulkner I think this is ready to consider merging.

I've added the new template to all of the HTML5a11y related tests, and adjusted styles to add border (and wrapper).

I've also included the new tests for menu, and attributes, and first stab at criteria for keyboard (this still needs refined)

I removed a number of tests from the inputs as they were all testing the same attributes (placeholder and friends) that I think are the same for each feature (if supported once, should be supported everywhere), and duplicate the placeholder test in the attributes section. And I was tired of adding all the markup and code samples so is was quicker to delete :p It could be that disabled and readonly should get their own entry in attributes (if new to HTML5 – I don't remember right now and I'm too tired to double check right now).

I left the tests for labelled and unlabelled form controls for now, although not sure if the naming algorithm is being tested in HTM5ally, and there are separate tests in this repo for that spec.

I also need to wrap each in a form element (or at least one test) if the error states for the inputs are being tested, as some browsers only evaluate that on form submit, but not sure if that is part of the test too.

Either way, I can make any of those changes in another PR.