Improve UI/UX of file attachments in new Composer UI

[NateWr]

Describe the problem you would like to solve The file attachments UI components work fine in the new Composer component. However, they have not been styled appropriately. In some cases they are missing styles completely.

Describe the solution you'd like The following needs to be done:

• [x] Add styles when selecting attachment source and selecting attachments
• [x] Reset focus properly if the "<-- back" button is selected
• [x] There's a small gap in time before the focus is moved into the selected file attacher. During this time the focus can "escape" the modal. Needs to be trapped for good.
• [ ] If only one file attacher is detected, skip the selection UI.
• [ ] Prevent adding the same attachment twice
• [x] FileAttacherFileStage uses this.items but should use this.files to be like all other FileAttachers

Who is asking for this feature? Finishing work on #5717.

[NateWr]

I decided to leave the following two features for later. They are nice to have but not urgent:

• [ ] If only one file attacher is detected, skip the selection UI.
• [ ] Prevent adding the same attachment twice

Otherwise, the following PRs apply styles to the file attacher, introduce a new ActionPanel component, and fix the various accessibility focus issues. They also apply the ActionPanel component to the admin page.

PRs: https://github.com/pkp/ui-library/pull/193 https://github.com/pkp/pkp-lib/pull/7811 https://github.com/pkp/ojs/pull/3354 https://github.com/pkp/omp/pull/1094 https://github.com/pkp/ops/pull/258

[NateWr]

@ewhanson would you be able to do a code review on this? I'm particularly interested in having you check the keyboard navigation functionality. This fixes some focus bugs related to accessibility, and those tend to be where there are differences between browsers, and since you're on Mac we're likely to get some different behaviour.

To test in the UI Library:

• ActionPanel, FileAttacher, and Composer (attach files)
• In the composer, try to use just the keyboard to open the file attachment modal, select a file attachment source, and attach files. When a new modal opens, the focus should go into that modal (tab once to see it move onto an element).
• When navigating "back" in the file attacher, the focus should put you back where it was before you opened the file attacher.
• When attaching a file, or closing the modals with esc, the focus should move back to the "Attach Files" button in the Composer.
• When tab or shift+tab and the next element will take you "outside" of the modal, it should keep you in the modal. (For example, hitting tab on the last element of the modal should move focus to the top of the modal, and vice-versa.)

To test in OJS:

• Record any editorial decision where you notify an author and try to attach files.

[ewhanson]

Hey @NateWr, I'll have a look. Thanks!

[ewhanson]

Hey @NateWr, I've reviewed the code and done some keyboard navigation testing. The code all looked good, but I ran into a few issues with Firefox on Mac and (perhaps not surprisingly) a number of issues with Safari on Mac. Anything that came up in Firefox was also applicable in Safari.

This also wasn't explicitly in this PR, but the readme file for the FileAttacher component still has placeholder text in it (This is some text.).

Firefox

Composer (UI Library)

• When in attach review files modal, can't keyboard navigate to download button.
• When in attach submission files modal, after opening the "Other files" dropdown, navigation doesn't loop back to the top of the dropdown and instead moves on to the next item outside of the dropdown. I thought this was probably the expected behaviour, but wanted to flag it just in case.

In OJS

• When submitting a "Send for review" decision, the "sent for review" modal that follows is not tab navigable.
• On the Admin page, the tab navigation skips the "Site Management," "System Information," and "Jobs" sections. Only the "red buttons" are tab navigable.

Safari

ActionPanel (UI Library)

• Can't tab at all into ActionPanel.
• Even if a button in ActionPanel is selected with the mouse, when the modal is dismissed, focus is not given to the original calling button.
• With the modal open (Delete incomplete submissions), only the closing X can receive focus.

Composer (UI Library)

• Only the "find template," "subject," and "body" text areas can receive focus. Attach files button can't be navigated to via keyboard at all.
• Same issue as above with open modal. Only the closing X can receive focus.
• If attach files modal is open, pressing esc will set focus to the "attach files" button, but once the user navigates away from the button, they cannot navigate back to it.

In OJS

• On the Admin page, none of the ActionPanel items are tab navigable.

[NateWr]

After a short call with Erik, the issues were all related to a system default in Mac that alters keyboard navigation. :sweat_smile:

I've merged all the PRs to main.