Edit Item, Bitstreams tab: Accessibility improvements

[AAwouters]

References

Fixes

• Fixes [Deque Analysis] Edit Item, Bitstreams Tab: "Content should be in a data table but is not" (Critical Issue) #1270
• Fixes [Deque Analysis] Reorder buttons in Edit Item / Bitstreams forms are not keyboard accessible (Critical Issue)  #3154
• Fixes Re-ordering bitstreams on the item edit page not possible when pagination is triggered #2779
• Most of [Deque Analysis] Item Edit "Bitstreams" Tab "serious" accessibility issues #1191: Only point 3 regarding "Content visually appears and disappears with no ability to adjust timing." is not handled.

Backports

• [Port dspace-7_x] Edit Item, Bitstreams tab: Accessibility improvements #3466
• [Port dspace-8_x] Edit Item, Bitstreams tab: Accessibility improvements #3465

Description

This PR refactors the Edit Item, Bitstreams tab so that the content appears in a <table> element. Visually, very little has changed. Structurally, the component works completely different.

Every bundle now has its own <table> element with each bitstream in a different <tr>. The table, columns and bitstream name cells now have id's which are referenced by headers tags in the other table cells to aid accessibility tools.

The bitstream rows' drag handles are now always visible. Previously they were partially hidden which made them harder to tab-target. In addition to being draggable, a row can now be selected by clicking the drag handle, or pressing space/enter when the handle is in focus. Once a row is in focus it can be moved around using the arrow keys. All performed actions are announced in the live region.

This PR also makes a small change to the notifications-board component: The content of all notifications that are shown in the board is also announced in the live region.

Instructions for Reviewers

• Create an item with multiple bitstreams (~12 is ideal)
• Optional: Create a second bundle within the item, again with a large amount of bitstreams
• Optional: Make the live-region visible as described in Live Region #3337
• Go to the 'Edit Item', 'Bitstreams' tab of the newly created item
• Verify pagination sizes can be set for each individual bundle
• Move a bitstream around with the drag handle
  • Verify a notification appears which mentions the change was saved when dropped
  • Verify a tooltip appears on the pagination which mentions you can move the bitstream to a different page
  • Verify the bitstream can be moved to a different page by dropping it on the page number
  • Verify you are redirected to the correct page after dropping the bitstream on a page number
• Move a bitstream around using the keyboard
  • Select a bitstream by clicking the drag handle, or by tab-selecting it and pressing enter/space
  • Move the bitstream around by pressing the up/down arrows
  • When moving across pages, you are redirected to the page that the selected bitstream is currently on
  • Confirm the current position by pressing enter/space again
  • Cancel the move and return the bitstream to its original position by pressing the escape key
• When the live-region is enabled: Notice that all actions are mentioned in the live-region

Moving bitstreams with the keyboard is slow

Depending on the backend you use, you might notice that the moving the bitstreams around with the keyboard might take some time. The reason for this is that every move is immediately sent to the backend, so the UI has to wait for the backend to respond with the new order of the bitstreams in the bundle before it can show the current order.
I considered creating a 'preview' of the order and only sending the request when the user confirms the new position, but creating a correct preview when the user moves around in the different pages or changes the page size is difficult. (Unless all bitstreams of all bundles are retrieved immediately, but then there is almost no reason to keep using the pagination.)

Checklist

• PRs should be smaller in size (ideally less than 1,000 lines of code, not including comments & tests)
• PRs must pass ESLint validation using yarn lint
• PRs must not introduce circular dependencies (verified via yarn check-circ-deps)
• PRs must include TypeDoc comments for all new (or modified) public methods and classes. Large or complex private methods should also have TypeDoc.
• PRs must pass all automated pecs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• User interface changes must align with Accessibility guidelines
• PRs must use i18n (internationalization) keys instead of hardcoded English text, to allow for translations.
• Details on how to test the PR must be provided. Reviewers must be aware of any steps they need to take to successfully test your fix or feature.
• If a PR includes new libraries/dependencies (in package.json), then their software licenses must align with the DSpace BSD License based on the Licensing of Contributions documentation.
• Basic technical documentation should be provided for any new features or configuration, either in the PR itself or in the DSpace Wiki documentation.
• If a PR fixes an issue ticket, please link them together.

[artlowel]

Create an item with multiple bitstreams (~12 is ideal)

An easy way to do that is to go to the add a bitstream to an existing item as an admin, then find that POST request to the /api/core/bundles/${uuid}/bitstreams endpoint in the network tab. Right click on it, select copy as curl, and then execute that command a dozen times, in the same folder as the file you uploaded.

Afterwards it is a good idea to at least rename some of the bitstreams, so you can see the effect of a reorder

[kanasznagyzoltan]

We have tested the main and the dspace 8.x version of this PR:

• created an intem with 12 bitstreams in 2 separate bundles
• changing the page size can be done separatly for each bundle

• dragging an item makes to help tooltip pop up

Result:

• moving the bitstream on the page number correctly moves it to the next page
• moving the bitstream with the arrow keys also works correctly

[tdonohue]

@AAwouters : I tested and reviewed this today. It works great! I verified that it fixes all the accessibility bugs mentioned in the description, and verified that I can now move bitstreams using only the keyboard.

That said, I found a single console.log which needs to be removed before we merge this. Once you delete it, I will officially approve this and merge it.