feat(NcPopover): provide a11y attributes to the trigger

[ShGKme]

☑️ Resolves

• Fix [BITV] 9.4.1.2/7.2 - The "Change color" button in the "Background" section opens an area where you can choose a background color. (1) nextcloud/server#41904
• In the issue there is only 1 place, but we have this issue in literally all NcPopover usages except NcActions...

A problem

1. NcPopover trigger button should have a11y attributes
   • aria-haspopup="<role>"
   • aria-expanded="<is shown>"
2. Trigger button is provided via slot in place, we don't control it

   <NcPopover>
     <template #trigger>
       Any button here should have attrs
     </template>
   </NcPopover>

3. We don't want to control all the places where NcPopover is used to make sure its trigger button has attributes.

This implementation might look a bit complex, but it helps to make a lot of popovers more accessible.

1. Provide NcPopover:trigger:attrs from NcPopover to its #trigger slot's content

So any component used as a trigger may receive the attrs, required to be on the trigger

A small component NcPopoverTriggerProvider is created to provide content only to the trigger, not to the content.

2. Inject it in NcButton

NcButton is the most popular NcPopover trigger.

This may look incorrect that NcButton "knows" something about the popover. But as it is a part of one library, and they are used together very often, it is a plain solution to cover a lot of cases. Without requirements to change anything in the apps.

Covers:

• NcColorPicker, NcEmojiPicker, NcActions
• Most of custom NcPopover usages with NcButton trigger in all Nextcloud apps

<NcPopover>
  <template #trigger>
    <!-- 🥳 Magically this button will have all the attrs --> 
    <NcButton>My custom popover</NcButton>
  </template>
  
  Popover Content
</NcPopover>

3. Provide the attributes as slot props

To manually set them in other cases

• Covers NcDatetimePicker, NcUserBubble
• Allow very custom popover triggers in some Nextcloud apps

And the same in NcColorPicker

<NcPopover>
  <template #trigger="{ attrs }">
    <!-- 🙂 No magic, but we can still just assign attrs --> 
    <button v-bind="attrs">My Very Custom Button</button>
  </template>
  
  Popover Content
</NcPopover>

<NcColorPicker v-slot="attrs">
  <button v-bind="attrs">My Very Custom Color Picker Button</button>
</NcColorPicker>

4. Add role prop to specify the role of the popover

See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup

🖼️ Screenshots

Component / Trigger	Popover
NcDateTimePicker
NcColorPicker
Custom NcColorPicker
	.
NcEmojiPicker
Custom EmojiPicker
	.
NcUserBubble
	.
NcActions - Dialog
NcActions - Navigation
NcActions - Menu
NcPopover - Custom
	.

What still have to be done manually in place

• For custom trigger button without NcButton: v-slot="{ attrs }" + v-bind="attrs"
• For NcPopover content:
  • popupRole on <NcPopover>
  • The same role on the content
  • aria-label or aria-labelledby for dialog content

This is where a warning in the debug mode helps to find the issue:

Alternative solution

Using DOM API by querySelector find any button in the #trigger slot and mutate it.

🏁 Checklist

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

[ShGKme]

I'll add tests later when most of a11y issues are fixed 👉👈

[JuliaKirschenheuter]

Great PR which resolves so many places! 🥳🥳 Works!

Thanks a lot!

[raimund-schluessler]

@ShGKme Shouldn't this be

			return this.internalShown

? With internal it does not work for vue3.