fix(NcListItem): Remove actions from within a which caused invalid HTML output

[susnux]

☑️ Resolves

• Fix [BITV]: Versions: The element button must not appear as a descendant of the a element. nextcloud/server#43237

It is not valid to put button inside a thus we need to refactor the NcListItem:

1. Unify the actions location within the source to be outside the main wrapper
2. Replace wrapper a with div
3. Make only the main content an a , this is required so users can right click + copy link or middle click -> native browser behavior.
4. Not related but fix focus-visible to have consistent style across all components.

Hint: Hide white space changes when review

🖼️ Screenshots

Could not spot visual changes except from focus visible.

a.mp4

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[codecov]

Codecov Report

Attention: 31 lines in your changes are missing coverage. Please review.

Comparison is base (6f1a4c9) 39.34% compared to head (26f3553) 39.30%.
Report is 18 commits behind head on master.

❗ Current head 26f3553 differs from pull request most recent head 0886575. Consider uploading reports for the commit 0886575 to get more accurate results

Files	Patch %	Lines
src/components/NcListItem/NcListItem.vue	3.12%	30 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5198      +/-   ##
==========================================
- Coverage   39.34%   39.30%   -0.05%     
==========================================
  Files         139      139              
  Lines        3688     3692       +4     
  Branches      810      811       +1     
==========================================
  Hits         1451     1451              
- Misses       2021     2025       +4     
  Partials      216      216              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[GretaD]

Hello @susnux please keep in mind that we are changing the design for mail. I will wait for this to be finished before a continue here: #5209
But just so you know, if you can make my life easier :)

[susnux]

Ready to review I would say 🚀

vokoscreenNG-2024-02-02_15-02-36.mp4

[ShGKme]

Compact is a little bit broken, the height is changed on hover.

[ShGKme]

Works fine now with both Tab navigation and the screen reader quick navigation. The only issue I've found is the height on hover in compact mode

[susnux]

Compact is a little bit broken, the height is changed on hover.

@ShGKme I fixed this now:

vokoscreenNG-2024-02-02_16-03-38.mp4

[ShGKme]

Everything seems to work fine now, thanks!

[emoral435]

LGTM!