KButton: Add aria-haspopup and aria-expanded for dropdown menus

[josephinoo]

Description

This PR enhances KButton accessibility by adding ARIA dropdown attributes. When KButton is used with a dropdown menu, it now automatically includes aria-haspopup="menu" and manages aria-expanded state for improved screen reader feedback and navigation.

Issue addressed

Reported by @AlexVelezLl in #832

Before/after screenshots

Changelog

• Description: Adds aria-haspopup and aria-expanded attributes to KButton when used with dropdown menus to improve screen reader feedback

• Products impact: Anhancement

• Addresses: [KButton]: Add aria-haspopup and aria-expanded to KButton when it has a KDropdownMenu related #832

• Components: KButton

• Breaking: no

• Impacts a11y: yes

• Guidance: WNo changes required for existing implementations. The ARIA attributes are automatically added when KButton is used with dropdown menus through the menu slot.

Steps to test

1. Add a dropdown menu to a KButton using the menu slot:

<KButton text="Test Menu">
  <template #menu>
    <KDropdownMenu :options="[...]" />
  </template>
</KButton>

2. Open browser dev tools and inspect the button element
3. Verify aria-haspopup="menu" is present
4. Click the button and verify aria-expanded changes from "false" to "true"
5. Optional: Test with a screen reader to verify proper announcements

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

[MisRob]

Thank you @josephinoo! Let me invite my colleague @akolson for review. @akolson would you also coordinate and confirm with @radinamatic please? @radinamatic here's where you can test dropdown https://deploy-preview-856--kolibri-design-system.netlify.app/buttons/#dropdowns

[MisRob]

I appreciate you think of documentation @josephinoo. I wonder whether we need to mention this in the docs though since many KDS components have a11 baked in, and generally from a user-developer point of view, there's no need to know the details.

@radinamatic any thoughts about this? https://deploy-preview-856--kolibri-design-system.netlify.app/kbutton/ this is the new section

[josephinoo]

Thank you, @MisRob, for the feedback! You make a good point about the built-in accessibility features. I can remove the explicit documentation about ARIA attributes, since they work automatically without developer intervention. The focus should be on the component's functionality rather than its internal accessibility implementation. Let me update the PR accordingly.

[akolson]

hi @josephinoo is this pr still a work in progress, or we can proceed to review it -- I see it's still in draft?

[josephinoo]

Hi @akolson, Can you review it ?

[akolson]

Code changes look great. Thanks @josephinoo. I'll add a little blocker as we await feedback about the documentation pieces from @radinamatic. We should be clear after this. Thanks again

[AlexVelezLl]

Hi @josephinoo! Can you please rebase your branch on top of the latest KDS develop? We recently updated the KDS nodejs version to v18 and vue to v2.7, and we need to do the rebase for the actions to run successfully :). There are also new linting rules, so after rebasing, please run yarn lint-fix again to comply with the new rules. Thanks!

[josephinoo]

Can you check it again @akolson?. I had to update the code for edge cases :)