fix: make prev and next slides not focusable and aria-hidden

[ShGKme]

Resolves

• Fix [BITV] 9.1.3.2/4.1 - When the image viewer is open, in some cases, not only the alternative text of the visible image is read aloud but also that of a previous one. (1) server#41840

Because of 6d4e7cd the previous and the next slides are rendered and only visually hidden. It makes elements on them focusable and visible for a screen reader.

The previous and the next slide should be inert and hidden.

Notes

Because of forced mixin with inheritAttrs: force, it is not possible to pass attributs on the file content element, e.g. <img> in <Images>.

viewer/src/mixins/Mime.js

Lines 26 to 27 in ea8f76a

	export default {
	inheritAttrs: false,

So a new wrapper element had to be added.

By the way, it was incredibly hard to find, why attributes doesn't work on components even there is no inheritAttrs, no local or global mixins. A mixin is added in runtime, mutating a component definition 🥲

viewer/src/views/Viewer.vue

Lines 824 to 825 in ea8f76a

	// force apply mixin
	handler.component.mixins = [...handler?.component?.mixins ?? [], Mime]

Also, in 6b46c8a common hidden-visually class was replaced with a custom viewer__file--hidden. I keep it as it is, but I don't understand it. @skjnldsv Do you member why a custom class was required here? How it fixes click outside?

Screenshots

🏚️ Before	🏡 After
Focus is lost (see log)	Only the current slide is focusable
Screen reader sees the image on the next slide	Only the current image is visible

No visual changes in other viewers:

[ShGKme]

/backport to stable28

[Pytal]

Code looks good and works with NVDA!

[ShGKme]

Added a test, but wasn't sure where to put it

[ShGKme]

build check makes me crazy... I didn't change anything to the build, only added a test. Now it considers assets invalid...

[ShGKme]

/compile amend

[skjnldsv]

/backport 36baffb to stable28

[skjnldsv]

/backport 6998c9c to stable28

[backportbot-nextcloud]

The backport to stable28 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable28
git pull origin stable28

# Create the new backport branch
git checkout -b fix/foo-stable28

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts. Resolve them.
git cherry-pick abc123

# Push the cherry pick commit to the remote repository and open a pull request
git push origin fix/foo-stable28

Error: Unknown error

More info at https://docs.nextcloud.com/server/latest/developer_manual/getting_started/development_process.html#manual-backport

[skjnldsv]

/backport 6998c9c to backport-2091-stable28

[skjnldsv]

(trying something 🙈 )

[ShGKme]

The question in the description is still interesting to me =D

[skjnldsv]

The question in the description is still interesting to me =D

🙈