Review updated example template

[mcking65]

In November 21, 2016 task force meeting, we agreed:

1. Going forward, only one example per example page; multiple example template is depricated.
2. Use a table to describe the implemented keyboard support.
3. Use a 4-column table to describe use of role, state, property, and tabindex attributes:
   • Row for role is first
   • Rows for attributes applied to element with role follow and are blank in first column.
   • Attributes are expressed in attrib/val pairs, e.g., aria-haspopup="list"

commit 499fddd
incorporates these changes into an updated example template. Please review the comments in the
raw HTML
, not just the
rendered HTML.

Reviews requested

• Review by @jongund
• Review by @a11ydoer
• Review by @jnurthen

Changes that need to be made

• Modify examples/css/table.css so that role rows are grouped with their state/property/tabindex rows in the attributes table.

[a11ydoer]

@mcking65

Thanks, Matt. This is a good summary of discussion yesterday. I made two comments about the template but you answered to all very thoroughly via email. As far as we thought through potential template problems (like empty column and visual separation due to alternate row background color ) and we reviewed this as a group, I am fine with it. Thanks again for making our work to be consistent throughout the coding examples.

[mcking65]

@a11ydoer,

Per your post to the list, I agree that we should have visual styling appropriate for the table content.

I am not a css guru so I would like You, Jon, James, or Michiel to take this on. Perhaps it is easiest to have a class for this particular table. However, there is a pattern of:

1. row that starts with th that is not empty followed by a td that is empty.
2. Followed by one or more rows that start with empty td followed by non-empty th.

I don't know how easy it is to make a selector that would identify that pattern. I also don't know how you want to style it in a way that shows that grouping of rows where we have a role row followed by one or more attribute rows and at the same time make individual rows easier to read.

Who will modify examples/css/table.css?

[jnurthen]

Looks good to me.

[jongund]

Looks good to me

[ZoeBijl]

@mcking65, you said:

Perhaps it is easiest to have a class for this particular table.

There are currently (after last weeks revision) two types of tables, definitions and data tables. The classes for these are .def and .data respectively. For the Roles, attributes, and properties table we use the data class and the attribute class to make them look prettier. This results in a table-tag that looks like: <table class="data attributes" aria-labelledby="some-id">.

[jnurthen]

In meeting on 3/6 there was confusion about the ARIA Roles, Properties and States. @jnurthen to come up with a few proposals for next week

[jnurthen]

Created #328 for the issue and associated PR #329

[mcking65]

With pull request #329 by @jnurthen, we have now completed all revisions to the example template. We have at long last arrived at a template that is proven across multiple examples and seems to be acceptable to all. Thank you everyone.

There are two related, outstanding issues:

1. Issue Update table Style in example template #328, which is simply an implementation detail that will not change anything.
2. Issue Modify HTML source display script to conditionally insert white space based on whether the example page displays HTML in a pre or a div #248, which will improve formatting of the HTML source, but is independent of the template itself now that we have the pre and code elements in the template.

Closing this issue.