Galleria: 'Indicator' Slot, Keyboard Accessibility Broken

[jacksonrya]

Describe the bug

When using the #indicator slot, keyboard accessibility is lost.

Using the default indicators generates button tags that can be navigated with arrow keys. When using the slot, rather than the contents of the slot becoming the child of the accessible button, it replaces the button.

I'd like to use a custom visual component as an indicator, while maintaining keyboard navigation accessibility.

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-9wjvhn?file=src%2FApp.vue

PrimeVue version

4.2.4

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

Go to Stackblitz link. The below instructions are copied to the stackblitz.

1. Navigate indicators with keyboard
   a. Click image
   b. Press 'Tab' to move focus onto indicators
   c. Press arrow keys to move focus
2. Add custom indicators via slot
   a. Uncomment the indicator slot (line 62) by deleting the wrapping comment block syntax
3. Attempt (and fail) to navigate indicators with keyboard
   a. Go through Step 1 and notice how it doesn't work.

Expected behavior

I expect keyboard accessibility to remain the same when using a custom indicator component via the Galleria's provided #indicator slot.

[github-actions]

Due to PrimeVue team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨

[tugcekucukoglu]

You could use like this:

<template #indicator="slotProps">
      <div class="custom-component" :tabindex="slotProps.tabindex">{{slotProps.index}}</div>
    </template>