Column headers are not screen reader friendly

[mcking65]

The column headers are not very screen reader friendly. There are 2 problems:

1. The label on the sort buttons are hard to understand because they are missing spaces, e.g., "sort by Band inascendingorder"
2. The table is hard to read because the column headers are way too verbose. When reading across a row with a screen reader, most screen readers read the header first and then the cell. For instance, reading across the first row, you hear "Singer sort by Singer inascendingorder Barney Greenway"

The first problem is a simple bug. The second problem would be easily fixable by employing abbr on the th elements, e.g.:

<th abbr="Singer">Singer <button>sort by Singer in ascending order</button></th>

If you do this, then screen readers will announce only the abbr value when reading across a row instead of the entire content of the th element.

[Heydon]

Thanks, @mcking65. I have fixed the spacing bug. Weird JSX spacing behavior, I guess, as I put spaces in quite consciously. I'll look into the abbr thing. Sounds interesting.