[fix] combo box form element must always have a label

[shkeating]

ReactUSWDS Version: 5.4.0 & USWDS Version: 3.6.0

Describe the bug

In our storybook examples of the Combo box component, we do not always include a label.

In the USWDS docs about the combo box, it is explicitly called out that we must always use a label on this component. We should not include examples where it is unlabelled in our project storybook. The following examples lack a label:

• Default Combo box
• With Default Value

Potentially, we should hard code a label right into the component file, and have that label's content be added as a prop to help guide react-uswds users to ensure they don't forget it in their implementations. I could be convinced of either approach, as both have pros and cons. This could be potentially cumbersome to projects already using react-uswds that have already added labels of their own who later upgrade versions.

It is also worth flagging though, that the combo box has other known accessibility issues that the USWDS team is aware of:

In late 2022, we found some combo box usability issues when we were testing with people who use screen readers and alternative input devices. For more information, see the issue on GitHub.

To Reproduce

Steps to reproduce the behavior:

1. Go to Default Combo box and With Default Value
2. See there is no label

Expected behavior

All visible versions of the combo box in our storybook should have labels to prevent confusion that they are optional, when they are mandatory for this component.

Additional context

• USWDS Combo Box documentation
• Labelling Controls - W3C
• file(s) to be edited: src/components/forms/ComboBox/ComboBox.stories.tsx

Screenshots

[paulkim26]

Neat project! I would be interested in taking on this issue.

I can see the case both for and against hard coding a label property right into the ComboBox component. For the sake of maintaining compatibility with existing implementations, I propose label elements are kept separate from the ComboBox component and are just added to these examples.

While hard coding the label element into ComboBox would be one way of guaranteeing that particular accessibility requirement, it is troublesome on a semantic level to merge traditionally disparate block-level elements into the same UI component, in my opinion.

[m7adeel]

Hello @shkeating, I would like to solve this issue using the first approach (i.e hard coding a label in src/components/forms/ComboBox/ComboBox.stories.tsx)