[NG] Adding aria-label to clr-dg-column button.

[bdryanovski]

Adding accessibility aria-label to clr-dg-column when sorting is enabled
Adding key sorfOf into CommonString
Updating i18n documentation

fixes: #1930

[Jinnie]

As we talked offline, the proposed label format of "Sort on " is problematic, because:

• We have no control what the user will put there and if it will be readable at all.
• The column name was already read just a second before announcing it's a button.
• There are (minor) technical difficulties that require us to work directly with the DOM in implementation specific way, which is undesirable.
  Because of the above, the current implementation that does not read the column name again, looks good to me.

[gnomeontherun]

I think there is probably a second piece to this, where we look at how to use aria-sort to inform the screen reader about what direction the sorting is. https://www.w3.org/WAI/PF/aria/states_and_properties#aria-sort

[Jinnie]

The aria-sort is already in place, but it is responsible for announcing things like: "This column has been sorted in ascending order". From the spec you referenced:

Indicates if items in a table or grid are sorted in ascending or descending order.

It is not responsible for announcing what the button in the header does. It has to be applied to grid or table headers only, it has no notion of the possible buttons inside.
Together with Bozhidar we verified how other solutions like Material are handling it. Material does almost exactly what we do here, other frameworks didn't handle it at all. Bozhidar can say if there were any other options observed.

[gnomeontherun]

Ok, got confused in my review, aria-sort is there.

[bdryanovski]

The material solution for this type of issues is something like that:

// https://github.com/angular/components/blob/9eeb4b5aa0473c0815a73bfe3c2ed6164d86a3b3/src/material/sort/sort-header-intl.ts

  /** ARIA label for the sorting button. */
  sortButtonLabel = (id: string) => {
    return `Change sorting for ${id}`;
  }
}

// https://github.com/angular/components/blob/9eeb4b5aa0473c0815a73bfe3c2ed6164d86a3b3/src/material/sort/sort-header.html
  <button class="mat-sort-header-button" type="button"
          [attr.disabled]="_isDisabled() || null"
          [attr.aria-label]="_intl.sortButtonLabel(id)"
          (focus)="_setIndicatorHintVisible(true)"
          (blur)="_setIndicatorHintVisible(false)">
    <ng-content></ng-content>
  </button>

Which is a nice and simple solution, the tricky part is that they have already the name of the column.

<th mat-sort-header="name">Dessert</th>
<th mat-sort-header="calories">Calories</th>

I have hard times getting the content from the table column:

• First, the ng-template is not rendered at the time when I'm trying to generate the ariaButtonLabel
• I'm not always sure that the content for columnTitle will be text only. This could lead to some strange results?

On the other topic, aria-sort only tell if the column is ASC or DESC, I think that the issue here is that the button for changing this sorting is not clear on what it will do when pressed. On my tests, I got only the button name and that's a button nothing more - I was not clear at anytime that this will change the sorting order.

The best solution will be to be able to create a string that will say Sorting for ${columnTitle} - but I'm not sure how many hacks will require this.

If someone has some clever idea, don't be shy?

[netlify]

Deploy preview for vmware-clarity ready!

Built with commit 81d9c98

https://deploy-preview-3384--vmware-clarity.netlify.com

[gnomeontherun]

Just a few tweaks otherwise pre-approving so you can merge with those changes. Also we need to backport this to v1 branch.