Add Sortable table example

[jongund]

I needed an example of a sortable table for someone at Illinois and thought I would propose it as an example for the APG.

Preview Link

---

Preview | Diff

[mcking65]

As a screen reader user, I find the button descriptions make the state of the table harder to understand. You have to listen very closely or you might think that the columns are are already sorted in the way the button description describes. I am not convinced we need descriptions. I wonder what other screen reader users think?

If there were descriptions, I'd rather have it be clearly distinguishable from sort state, perhaps "Sorts by COLUMN_NAME" and leave out the directionality of the action. The sort direction is conveyed after activation.

[jongund]

@mcking65
I changed the labels, let me know what you think.
The trick is not changing the accessible name of the button, otherwise the button accessible name gets used as the column name when using table navigation commands. But I am open to other ideas, But this is something that is very common and we should have some guidance in the practices.

[howard-e]

Code review completed and LGTM! Have you been able to take a look at Matt's other requested changes @jongund?

[jongund]

@howard-e I have addressed @mcking65 comments

[mcking65]

I think we are very close to ready to ship. couple of questions left.

[mcking65]

          HTML table markup is used to create the rows, caption, and to identify the column headers for the data cells.  The use of HTML supports the ARIA principle of using native element semantics whenever possible.<br/>

I don't think we need to say this at all. As we add more and more HTML examples, saying we are using more HTML and less ARIA will be increasingly common and saying this over and over won't add value. Would you be OK with removing thisitem from the list?

[mcking65]

Shouldn't this be span instead of svg?

[jongund]

@mcking65 I made update to the example option description based on your feedback, removed the section on using HTML table markup and changes svg to span for the aria-hidden entry in the roles, properties and states table.

[jongund]

@nschonni HTML linting problem with files unrelated to this pull request. Not sure how to "fix" this issues, should probably be a separate pull request and not fixed in this one.

[nschonni]

Yes, it looks like the issues are related to #2055 landing, not this one

[nschonni]

@jongund the linting issue is now fixed and green here again