Data table sortable headers visual and programmatic labels do not match

[dakahn]

The programmatic and visual labels in the DataTable headers do not match. This is causing an AC violation

The programmatic (aria) label needs to match the visual label (for example "Product/Offering Name") or you'll have a Accessibility Checker violation that looks like this

a way of preserving the current label format and having assistive technologies describe usage information that's implied visually to a sighted user would be having some situation like this

<div style="display: none" id="usage-description-1">Click to sort</div>
<button aria-describedby="usage-description-1">Product/Offering Name</button>

That will read the label, element type, and it's intended effect nicely and avoid any AAT errors 👍