fix(chip): add tabIndex prop

[Birkbjo]

---

Description

Adds tabIndex to chip component.

I followed the pattern for the use of other tabIndex, but I wonder why this is a string and not number? Also in my opinion these tabindex should default to 0 - but they don't? So I decided to keep it aligned with other components.

---

Known issues

• issue

---

Checklist

• API docs are generated
• Tests were added
• Storybook demos were added

All points above should be relevant for feature PRs. For bugfixes, some points might not be relevant. In that case, just check them anyway to signal the work is done.

---

[dhis2-bot]

🚀 Deployed on https://pr-1435--dhis2-ui.netlify.app

[cypress]

Passing run #3145 ↗︎

0

583

0

0

0

Details:

fix(chip): add tabIndex prop
Project: ui	Commit: f22e62da90
Status: Passed	Duration: 06:35 💡
Started: Nov 28, 2023 2:17 PM	Ended: Nov 28, 2023 2:24 PM

Review all test suite changes for PR #1435 ↗︎

[cooper-joe]

Nice 👍

This allows keyboard focus for the main chip body, but can we propagate that down to the <Remove> child component for removable type chips? Potentially out of scope here, so approved without this.

[Birkbjo]

@cooper-joe thanks for your quick input. After testing this in storybook, it seems like this is not enough to actually make tabIndex useful. Because it's a span, an-enter-press will not fire onClick. So we would have to handle the keypresses manually, or refactor this to be a button.

The only problem of making this a button is if you wanted the chip to be a link - <a> wrapping a button is not valid HTML.

[cooper-joe]

I would prefer this to be a button rather than hack together our own keypress handling. Alas, wrapping the chip in the link is exactly how it's being used, so looks like we may not have a choice unless we're prepared to release the breaking change. I'm open to the the breaking change, if it means a step towards better accessibility.