EMULSIF-546: Accessibility tweaks

[mariannuar]

Summary

This PR fixes/implements the following bugs

• The "Expand All" and "Collapse All" buttons do not indicate their disabled state programmatically when all accordions are already expanded or collapsed.The same is indicated visually using a different color
• The tab widget has the below issues:
  1. It is not programmatically implemented as a proper tab component. Tabs are announced as links by screen readers
  2. The arrow icon used to access remaining tabs is not keyboard-operable, making it inaccessible to keyboard and screen reader users

Tickets

https://app.clickup.com/t/36718269/EMULSIF-438
https://app.clickup.com/t/36718269/EMULSIF-439

How to review this pull request

• Visit the following https://deploy-preview-179--emulsify-ui-kit.netlify.app/
• Go to an Accordion and confirm the "Expand All" and "Collapse All" buttons programmatically indicate their disabled state using aria-disabled="true"
• Now visit Tabs and confirm Tabs are correctly announced as "tabs" by screen readers along with selected state. Users should be able to operate the arrow icon using keyboard

[netlify]

✅ Deploy Preview for emulsify-ui-kit ready!

Name	Link
🔨 Latest commit	a0878a9
🔍 Latest deploy log	https://app.netlify.com/projects/emulsify-ui-kit/deploys/692a022b34fbf800087c8039
😎 Deploy Preview	https://deploy-preview-179--emulsify-ui-kit.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[robherba]

Hi @mariannuar, LGTM !!