2251 accessibility issues on the community list page

[J4bbi]

References

• Fixes Accessibility issues on the community-list page #2251

Description

Cdk-tree was re-rendering itself completely on each datasource change because no trackBy function had been defined. It could not establish what was new and what was old. So a quick win :)

Instructions for Reviewers

Build the front end and expand communities and collections on the community list page and contrast with https://demo7.dspace.org/community-list

List of changes in this PR:

• trackBy method for cdk-tree
• minor styling changes

[alanorth]

Thanks @J4bbi. I tested this patch. The stylistic changes seem sane and don't affect the UI presentation significantly, but should improve screen reader's ability to parse the tree.

Regarding the cdk-tree trackBy changes, I can't see any difference in testing. How can I tell that the tree is re-rendering every time? Is this something that is perceivable visually like a flicker when expanding communities and collections, or just makes it slow? Thanks!

[J4bbi]

Thanks for taking the time to review this @alanorth .

When the cd-tree is loaded on first arriving at https://demo.dspace.org/community-list, everything is fine:

If you then click to expand the node, it will set the focus:

The focus will remain momentarily while the API call is made to establish the children nodes. But the focus will then be dropped because to cdk-tree entirely new data is being loaded, not the same data with some more added.

I've had to use a different example for how the patch works because the demo server has been switched to https://sandbox.dspace.org

Hope that makes it clear?

This is trackBy analogous to d3's key function in binding data if you're familiar with D3.

[alanorth]

Thanks, @J4bbi. I see what you mean now. Current behavior without the patch, I see aria-expanded="false" on the cdk-tree element and then it flashes aria-expanded="true" briefly when I expand the node, and then the attribute disappears entirely.

With the patch I verified that the aria-expanded attribute is persistent with the correct state on each cdk-tree node when expanding and collapsing. Looks good to me!

[dspace-bot]

Successfully created backport PR for dspace-7_x:

• [Port dspace-7_x] 2251 accessibility issues on the community list page #2466