fix(Carousel): add aria-current attribute to active dot

[J-Michalek]

🔗 Linked issue

Resolves: #4403

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

I've added the aria-current attribute to the active dot in the Carousel component. This should improve the a11y when using assistive technologies.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@4447

commit: 5955423

[benjamincanac]

Thanks @J-Michalek! I'm wondering why the tests are passing, we might be missing some if we don't cover this 😬

[J-Michalek]

@benjamincanac Yes, that is weird, I've inspected the test snapshot and I can see that there are no dots being rendered, most likely due to scrollSnaps being an empty array. Most likely there is something wrong with useEmblaCarousel inside of the test. I'll look into it.

[benjamincanac]

Yeah probably, if you can't make it work it's not a big deal!

[J-Michalek]

Seems like it would be hard to debug and/or would require changes in the test structure. I was thinking, is it mandatory to use the scrollSnaps for this? If we could iterate over the items prop instead, then it would also work inside of the test, if its worth the hassle.

[benjamincanac]

Yes we don't really have a choice, the number of dots is not necessarily equal to the number of items.

[J-Michalek]

Oh yeah, it always displays like 5 of them even if there are more images got it, then I would take this PR as final.