fix: regression in list item's extra slot

[hamza221]

☑️ Resolves

• Fix Envelope layout is broken nextcloud/mail#9334

🖼️ Screenshots

🏚️ Before	🏡 After

🚧 Tasks

• ...

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[hamza221]

cc @GretaD @susnux @ShGKme

[susnux]

The "after" image also looks broken, for the NcListItem I would only expect two lines of text working and the tags to be shown on the very right.

[hamza221]

The "after" image also looks broken,

Yes the after is still a bit broken, the tags should be aligned with the lines
This is how it looks on nc.cloud

for the NcListItem I would only expect two lines of text working and the tags to be shown on the very right.

Isn't the extra slot supposed to show elements below the lines

[GretaD]

The "after" image also looks broken,

Yes the after is still a bit broken, the tags should be aligned with the lines This is how it looks on nc.cloud

this is fixed on mail side, i already pushed a pr for that nextcloud/mail#9336

[susnux]

This changes reverting a11y fixes and are not valid -> must not be done. You have to find a solution with the actions outside the anchor element

[susnux]

This must not be done! An interactive element (the a) must not contain any other interactive element (the NcActions).
We changed this just a couple of weeks ago.

[susnux]

Was there a design review? It seems this component gets extended to an all-in-one-solution.
Especially that there is now a 3rd and 4th line introduced, which might be ok but we need to make sure not to break anything (e.g. a11y where you need to make sure to NOT include interactive elements ).

[hamza221]

Makes more sense now thank you for the explanation, I'll try to work on a different solution

[susnux]

I mean if it fits in the component fine, but we can not have nested interactive elements. This only works with some specific focus handling (e.g. how menu bars work, you can tab the first element but next tab will be outside the menu bar, you then need to use arrows to change focus).

[GretaD]

Hello @susnux, this is still an issue on mail, i would get @jancborchardt @marcoambrosini @nimishavijay involved, what would be a good compromise :)

If it was up to me, I would keep it on the right side, with the argument, that its like this since couple of months and nobody complained about the space, which means that either people are fine with it, or its not used at all :), now that we have different layouts, people can always choose a layout where the list is wide. But, of course, i would be fine to work on another solution.

[marcoambrosini]

An interactive element (the a) must not contain any other interactive element (the NcActions).

Are you sure that this is the case @susnux ? afaik an <a> cannot contain another <a> but it can contain buttons

e.g. most cards in card layouts

[ShGKme]

e.g. most cards in card layouts

In valid implementation, they are not wrapped in <a>. They have a link inside and either use custom onclick (like we do in Files) or stretch the link in a pseudo element (like we do in Apps list).

But in both HTML validity and accessibility having nested interactive elements is not valid.

[ShGKme]

• See: fix(NcListItem): Remove actions from within a which caused invalid HTML output #5198

[GretaD]

thank you for all the feedback,

@marcoambrosini how should we proceed then?

[marcoambrosini]

I donn't know which would be the better approach. cc @ShGKme and @susnux

[hamza221]

what we're trying to accomplish is just a third line for 'non interactive- non clickable "tags" ' would that be acceptable ?
So move the slot outside the NcActions rename it (thirdline? ) ?