fix(Accessability): Add button role to table header interactive element

[StoianLucian]

Ticket: SITES-10962

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.

[Pareesh]

Hi @StoianLucian ,
I think the 'th' element of table should have aria-sort and role as "columnheader".

The coral-table-headercell-content should be role button, I guess that would correct the accessibility.

Since the impact of this change is quite large spread, please add a null check to avoid same regression in future.

Thank you

[majornista]

Hello @Pareesh even if i target the coral-table-headercell-content i still get the same test fails regarding aria sort attribute and surely removing the aria-sort attribute is not a good ideea And according to https://www.digitala11y.com/columnheader-role/ role columnheader the supported properties are

Could it be maybe the requirement of the ticket is not correct?

There seem to be some strange choices going on when the table header is sticky, like adding role="presentation" to the th[is="coral-table-headercell"] and moving role="columnheader" to the coral-table-headercell-content, which is in part why you are seeing axe error when you then set role="button" on coral-table-headercell-content, which overrides the role="columnheader".

@StoianLucian and @Pareesh, do you mind if I commit some suggested changes to this PR?

[StoianLucian]

hello @majornista, Please do!

[Pareesh]

Hi @majornista @StoianLucian ,
Are these changes done ??

Thank you

[StoianLucian]

Hi @Pareesh the changes are done