Skip to content

Accessibility in the statistics table#3380

Closed
Andrea-Guevara wants to merge 17 commits intoDSpace:mainfrom
Andrea-Guevara:AccessibilityInStatisticsTable
Closed

Accessibility in the statistics table#3380
Andrea-Guevara wants to merge 17 commits intoDSpace:mainfrom
Andrea-Guevara:AccessibilityInStatisticsTable

Conversation

@Andrea-Guevara
Copy link
Contributor

References

Description

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

Instructions for 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.

Include guidance for how to test or review your PR.

  1. Go to the statistics area and see that the table now has a label for each column.
    Screenshot_9

Checklist

  • My PR is created against the main branch of code (unless it is a backport or is fixing an issue specific to an older branch).
  • My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
  • My PR passes ESLint validation using npm run lint
  • My PR doesn't introduce circular dependencies (verified via npm run check-circ-deps)
  • My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
  • My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
  • My PR aligns with Accessibility guidelines if it makes changes to the user interface.
  • My PR uses i18n (internationalization) keys instead of hardcoded English text, to allow for translations.
  • My PR includes details on how to test it. I've provided clear instructions to reviewers on how to successfully test this fix or feature.
  • If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.
  • If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
  • If my PR fixes an issue ticket, I've linked them together.

@tdonohue tdonohue added bug accessibility component: statistics 1 APPROVAL pull request only requires a single approval to merge labels Oct 2, 2024
@tdonohue
Copy link
Member

tdonohue commented Oct 2, 2024

@Andrea-Guevara : This is failing e2e tests (run via npm e2e). You should be able to see the results of the Build in the "Checks" tab (or by going to https://github.com/DSpace/dspace-angular/actions/runs/11147810133).

I think you just need to update each of the failing *-statistics.cy.ts to have the proper CSS selector when it uses data-test="statistics-label", as it looks like you renamed (or moved) that data-test attribute from a <th> tag to a <td> tag. This is probably what broke all these tests because they still expect it to be on a <th> tag.

@Andrea-Guevara
Copy link
Contributor Author

Good morning @tdonohue!

I confess that I still need to improve a lot in relation to unit tests.

At first I went back to the tags that were being used.

As I did this implementation using localhost, and I don't have geoIp configured to get a more detailed report on the statistics; I would like to ask that the person who is going to test this implementation try to do it in a more complete way, with more than one statistics table if possible. This is to test the dynamic behavior of the new label.

@tdonohue
Copy link
Member

tdonohue commented Oct 3, 2024

@Andrea-Guevara : I think you may have misunderstood my feedback. You are welcome to change the HTML tags if you need to do so. However, sometimes if you change a tag, you will have to also change it in tests. Some of our tests reference specific HTML tags, so if you change the HTML tag, then you have to also update the test to reference the new name.

In the case of this PR, it looks like we have several e2e tests named *-statistics.cy.ts which reference some the the tags by name. Here's an example test for the homepage statistics: https://github.com/DSpace/dspace-angular/blob/main/cypress/e2e/homepage-statistics.cy.ts This test expects that the data-test="statistics-label" attribute will be on a <th> tag here: https://github.com/DSpace/dspace-angular/blob/main/cypress/e2e/homepage-statistics.cy.ts#L25

So, if you wanted to change that <th> tag into a <td>, then you just need to also update that test to reference a <td> tag.

I hope that makes sense that you are allowed to change the HTML tags if you need to do so. But, when you do so, if you find tests that fail, that is an indication that you also must update the tests.

I haven't had a chance to give this PR a test/detailed look. But, you are welcome to still consider changing these HTML tags if you feel you need to.

@github-actions
Copy link

github-actions bot commented Nov 1, 2024

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

@github-actions
Copy link

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

@tdonohue tdonohue added port to dspace-7_x This PR needs to be ported to `dspace-7_x` branch for next bug-fix release port to dspace-8_x This PR needs to be ported to `dspace-8_x` branch for next bug-fix release labels Dec 19, 2024
@github-actions
Copy link

github-actions bot commented Jan 6, 2025

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

Copy link
Member

@tdonohue tdonohue left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Andrea-Guevara : I gave this PR a code review today. Overall, the code looks good, but I have a minor suggestion below. Also, this currently has Merge Conflicts, so it's not in a testable state. Could you resolve those merge conflicts please?

getObjectHeaderLabel(reportType: string): string {
switch (reportType) {
case 'TotalVisits':
return this.translateService.instant('statistics.table.header.TotalVisits');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you can get rid of this entire switch if you just append the reportType similar to this:

return this.translateService.instant('statistics.table.header.' + reportType);

That way, if new reports are added, we don't need to add more cases to this switch.

@Andrea-Guevara
Copy link
Contributor Author

Good afternoon @tdonohue! Sorry for the delay in replying, I hadn't seen your message.

I've resolved the conflicts and refactored the code according to your suggestion. I really appreciate your suggestions for improving the pulls. I've learned a lot from you over the last few days. Thank you very much.

The test is giving an error, but it seems that some configuration is different.

});

it('should return an empty string for unknown report types', () => {
expect(component.getObjectHeaderLabel('UnknownType')).toEqual('');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is where your tests are failing. It looks like you previously were expecting getObjectHeaderLabel() to return an empty string if you passed it an unrecognized type.

This isn't going to work the same anymore, because you are always just returning statistics.table.header.[type] in the code in getObjectHeaderLabel(). So, I think you can just remove this test... all types will now be looked up in the i18n files. This seems appropriate though because it allows for adding new report types without having to modify your code.

@github-actions
Copy link

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

@github-actions
Copy link

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

@tdonohue
Copy link
Member

Closing, replaced by #4661

@tdonohue tdonohue closed this Aug 27, 2025
@github-project-automation github-project-automation bot moved this from 👀 Under Review to ✅ Done in DSpace 10.0 Release Aug 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

1 APPROVAL pull request only requires a single approval to merge accessibility bug component: statistics merge conflict port to dspace-7_x This PR needs to be ported to `dspace-7_x` branch for next bug-fix release port to dspace-8_x This PR needs to be ported to `dspace-8_x` branch for next bug-fix release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Accessibility] Update tables in Statistics

2 participants