Accessibility in the statistics table

[DanGastardelli]

References

• Fixes [Accessibility] Update tables in Statistics #3300

Description

Creation of a method that conditionally defines a dynamic label for the object column.

Instructions for Reviewers

Please add a more detailed description of the changes made by your PR. At a minimum, providing a bulleted list of changes in your PR is helpful to reviewers.

List of changes in this PR:

• The “getObjectHeaderLabel” method has been created to conditionally set a label to the column of objects.
• To differentiate between the label and the content, the two labels have been defined in the html using “<th scope=”col">" and the "td" tag has been used for the content.
• New translation keys have been added in english, portuguese and spanish.

[tdonohue]

@DanGastardelli : This PR is currently failing several e2e tests because the structure of the page has changed slightly. So, I think you will need to update collection-statistics.cy.ts, community-statistics.cy.ts, homepage-statistics.cy.ts and item-statistics.cy.ts in order to get the tests passing again.

[github-actions]

Hi @DanGastardelli,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

[tdonohue]

@DanGastardelli : You may have already seen this, but it looks like these updates are failing our automated accessibility scan. Here's the error from the community page (but the same error occurs on all updated pages):

GET /statistics/communities/0958c910-2037-42a9-81c7-dca80e3892b4 200 0.665 ms - 751
1 accessibility violation was detected
[
  {
    id: 'scope-attr-valid',
    impact: 'moderate',
    description: 'Ensure the scope attribute is used correctly on tables',
    helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/scope-attr-valid?application=axeAPI',
    nodes: 8,
    html: [
      '<td _ngcontent-dspace-angular-c1716101099="" scope="row" data-test="statistics-label"> Publications </td>',
      '<td _ngcontent-dspace-angular-c1716101099="" scope="row" data-test="statistics-label"> May 2025 </td>',
      '<td _ngcontent-dspace-angular-c1716101099="" scope="row" data-test="statistics-label"> June 2025 </td>',
      '<td _ngcontent-dspace-angular-c1716101099="" scope="row" data-test="statistics-label"> July 2025 </td>',
      '<td _ngcontent-dspace-angular-c1716101099="" scope="row" data-test="statistics-label"> August 2025 </td>',
      '<td _ngcontent-dspace-angular-c1716101099="" scope="row" data-test="statistics-label"> September 2025 </td>',
      '<td _ngcontent-dspace-angular-c1716101099="" scope="row" data-test="statistics-label"> October 2025 </td>',
      '<td _ngcontent-dspace-angular-c1716101099="" scope="row" data-test="statistics-label"> November 2025 </td>'
    ]
  }
]

It looks like the problem is that these <td> tags have a scope attribute which is invalid. According to deque that attribute should only be used on <th> tags.

[DanGastardelli]

Hi @tdonohue, thanks for the instructions. I made the necessary changes, now everything seems to be working correctly!

[alegontarz]

QA testing performed (no code review).

Working as expected:

1. The column header uses and row data uses .
2. The dynamic header label logic is applied.
   EN – correct label displayed.
   ES – correct translated label displayed.
   PT-BR – correct translated label displayed.

Not working as expected:

1. PT-PT – the label remains “Object” (no PT-PT translation applied).

[github-actions]

Hi @DanGastardelli,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

[github-actions]

Hi @DanGastardelli,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

[tdonohue]

@DanGastardelli : Could you resolve the merge conflict on this PR so that we are able to move this forward? Thanks!

[DanGastardelli]

@tdonohue Conflict resolved!