fix(files): remove focus outline on file list item click and make the link focusable

[ShGKme]

Summary

• Fix [Bug]: Clicking folder names for navigation shows black border for a split second #41490

There is an outline on focus-visible state, which appears also on click making a glitch effect.

At the same time, focus-visible state was not useful because the link was not focusable.

Todo

• Show outline only on real focus state
• Make the link focusable by tabindex (links usually should not be focusable, but in this case it works close to the button)
• Refactor linkTo: replace deprecated is attr on <a> with a dynamic component:
  • Special attribute is is deprecated and removed in Vue 3
  • It is confusing, that <a> element is rendered as <span> sometimes

Before	After
Click
Tab

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[jancborchardt]

Looks good from the videos, thanks! :)

[ShGKme]

Updates:

1. Set tabindex in linkTo computed, not on <a> in template, because <a> is not guaranteed to be rendered as <a> here.
2. Refactor linkTo: replace deprecated is attr on <a> with a dynamic component:
   • Special attribute is is deprecated and removed in Vue 3
   • It is confusing, that <a> element is rendered as <span> sometimes

[nimishavijay]

Nice! Looks great design-wise!

[ShGKme]

Rebased onto master.

[ShGKme]

/backport 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

[ShGKme]

/backport 2f18651 fedd531 e6bdbdb to stable28