Inability to set “required attributes on a ComboboxComponent & TextBoxComonent component.

[Ilya Zlochisty]

Tried setting the  aria-required="true" on both the ComboboxComponent / TextBoxComonent but when I inspect the element the aria-required =”true” does not show up in the input element of the ComboboxComponent.

I also noticed that I cannot use the “required” attribute on either of the ComboboxComponent / TextBoxComonent. When I do it results in a compilation error.

What attributes can I use for these required fields ?

Steps to Repro:

1. Navigate to the webpage containing mandatory fields.

2. Inspect the HTML markup of the mandatory fields.

3. Verify whether the "required" attribute is present for these fields.

Expected results:

Mandatory fields should have the "required" attribute set in the HTML markup to indicate to users that these fields must be filled out before submitting the form.

User Impact:

The absence of the "required" attribute for mandatory fields can lead to accessibility issues, as users may not be aware of which fields are mandatory. This can result in incomplete form submissions and frustration for users, particularly those relying on assistive technologies.

[Yohapuja Selvakumaran]

Hi Ilya Zlochisty

Thank you for reaching out to us. We appreciate your efforts in implementing accessibility attributes for the Syncfusion ComboBoxComponent and TextBoxComponent.

To ensure that the aria-required="true" attribute is correctly applied to both components, you can use the htmlAttributes property for the TextBoxComponent, as shown in the updated code below:

<TextBoxComponent
  id="textbox"
  ref={textRef}
  placeholder="Enter"
  htmlAttributes={{ 'aria-required': 'true' }}
/>

API Documentation: https://ej2.syncfusion.com/react/documentation/api/textbox/#htmlattributes

For the ComboBoxComponent, since there is no direct property to set aria-required, you can use the useEffect hook to manually set the attribute after the component mounts:

React.useEffect(() => {
  if (comboRef.current && comboRef.current.inputElement) {
    comboRef.current.inputElement.setAttribute('aria-required', 'true');
  }
}, []);

Please find the below sample for your reference,

Sample: https://stackblitz.com/edit/react-2vgomree-grlblve8?file=index.js,index.css

Regards,

Yohapuja S