fix: accessibility issue in suggestions

[shrilakshmishastry]

ISSUE

1. suggestions are not screen reader accessible, when you move across the suggestions VO doesn’t announce it
2. screen reader should announce the count of suggestions when the suggestion is shown

SOLUTION

1. This is happening as we are moving across the non-activable element. Usually, VO when reading across the text of the website using ctrl+options+shift , reads the content in any tag. But for tab indexable elements if we are using non-indexable elements, then we need to take care of it. Giving an aria-label to suggestions fixes this. The suggestion itself should be used as aria label.

2. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role

Need to follow the above pattern and aria-live should be added to the suggestion container. So when it’s open it can announce the count of suggestions

Description: I have followed the pattern in mdn.dev.

• The input tag should have the role as combobox. Here input tag acts as combobox
• The attributes to pass on to combobox 1. aria-expanded : the attribute that tells suggestions pop-up is open or not 2. aria-haspopup: this is used to indicate what tag or role is pop-up, if no default value is given it takes list 3. aria-controls: the id of the pop-up combobox is controlling 4. Aria-activedescendant : which of the options is currently highlighted 5. aria-autocomplete: on clicking suggestion whether the input is auto completed

To maintain the unique id for the suggestions container , I have introduced a new prop called labelledById. This is the id of the label that gives the context of the tag.

screen recording

https://github.com/user-attachments/assets/45122b43-c061-4221-abf5-d156ff2ff1ae

This PR fixes suggestion related accessibility issue https://github.com/react-tags/react-tags/issues/999