Form.Autosuggest Accessibility - Label Association

[brian-smith-tcril]

One of the more complex issues involves how labels are associated with the component's <input> element. Unless a floatingLabel attribute is provided, there will be no label created for the <input>. This means that developers will need to implicitly associate a label by wrapping the <Form.Autosuggest> in <Form.Label>. See below:

<Form.Label>
    <Form.Autosuggest>
	<Form.AutosuggestOption />
        <Form.AutosuggestOption />
        {...more options}
    </Form.Autosuggest>
</Form.Label>

Unfortunately, while this does solve the problem of associating a label with the <input>, this presents another issue where the dropdown icon button (dropdown arrow) doesn’t behave as expected. It appears that the wrapping done by the <Form.Label> is interfering with the way the icon button receives its onClick event. The icon button will expand the list, but will not close it. This only occurs when clicking exactly on the nested <svg> element.

Screen.Recording.2023-06-22.at.12.25.26.PM.mov

A possible fix for this would be to remove the <Form.Group> that is provided inside of the <Form.Autosuggest> and require developers to always wrap this component in a <Form.Group> when implementing, which also provides the ability to add in a custom label.

<Form.Group>
     <Form.Label
          <h3> Select an option from below </h3>
     </Form.Label>
     <Form.Autosuggest>
          <Form.AutosuggestOption />
          <Form.AutosuggestOption />
          {...more options}
     </Form.Autosuggest>
<Form.Group>

Alternatively, effort could be put towards figuring out why the button isn’t behaving correctly when the component is wrapped in a <Form.Label>. Perhaps there is some propagation getting in the way that we can disable?

[brian-smith-tcril]

Might be worth bringing this up in the next Paragon WG meeting

[httpsmenahassan]

Topic for Paragon WG, ask:

• If we should put time into figuring out why the button isn't behaving correctly or
• if we should move forward with the proposed fix

[wittjeff]

Wrapping a label around a control works (well, with the exception of the bugs you identified) but it isn't Best Practice. Programmatic association (for= attribute on a , pointing to a unique ID on the control, or aria-labelledby on the control, pointing to a unique ID on the labeling element, or aria-label) is preferred. More specifically, if the label isn't "programmatically determined", it'll throw a warning or error in automated testing.

My preferred solution is to add a new labeling option (as a new default) for Paragon controls, to get the Form.label in the preferred format (now that we're trying to deprecate floating labels). An Open edX community partner requested this option be added some time ago as well.

[brian-smith-tcril]

Based on the examples we have on the docs site for labels, and the fact that we're moving to deprecate floating labels, I'm leaning towards

A possible fix for this would be to remove the <Form.Group> that is provided inside of the <Form.Autosuggest> and require developers to always wrap this component in a <Form.Group> when implementing, which also provides the ability to add in a custom label.

There are, however, components that don't follow the patterns in those examples (such as TextFilter), so it's likely worth investigating other options/gathering other opinions too.

[brian-smith-tcril]

verify this works and properly associates the label with the input textbox

<Form.Group>
     <Form.Label
          <h3> Select an option from below </h3>
     </Form.Label>
     <Form.Autosuggest>
          <Form.AutosuggestOption />
          <Form.AutosuggestOption />
          {...more options}
     </Form.Autosuggest>
<Form.Group>

if not find a way to fix it