@W-15466811 - Accessibility Issue: Year Combo Box Incorrectly Marked as Read-Only, Affecting Screen Reader Users

[anunay999]

Issue Description

The combo box for selecting a year is incorrectly using the read-only attribute, which is intended for input fields to indicate they are not editable. This misuse violates the WCAG 2.1 success criteria 4.1.2 (Name, Role, Value), as it misleads screen reader users about the field's functionality, potentially causing confusion and hindering accessibility. Screen reader users are affected by this issue.

Note: This issue has also been raised internally as a customer bug: W-15466811.

Actual Result

The year combo box is marked as read-only, implying it cannot be edited. However, the combo box is interactive, and users should be able to select a year from the dropdown list. Screen readers may incorrectly convey this as a non-interactive element, leading to user confusion.

Expected Result

Remove the read-only attribute from the year combo box to ensure it is correctly identified as an interactive element. This adjustment will align the combo box's behavior with its intended functionality, providing a more accessible experience for all users, including those relying on screen readers.

WCAG Success Criteria

4.1.2: Name, Role, Value

Impact

[Task Blocking]

<div class="slds-form-element slds-align-content-center">
  <div class="slds-form-element">
    <label class="slds-form-element__label slds-assistive-text" for="fMQCKINvQE-year-picklist">Year</label>
    <div class="slds-form-element__control">
      <div class="slds-combobox_container">
        <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click ignore-react-onclickoutside slds-shrink-none" role="combobox" aria-expanded="false" aria-haspopup="listbox">
          <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
            <input autocomplete="off" class="slds-input slds-combobox__input" id="fMQCKINvQE-year-picklist" placeholder="Select an Option" readonly="" role="textbox" type="text" aria-autocomplete="list" value="2024">
            <span class="slds-icon_container slds-input__icon slds-input__icon_right">
              <svg aria-hidden="true" class="slds-icon slds-icon_x-small slds-icon-text-default" viewBox="0 0 52 52">
                <path d="M8.3 14h35.4c1 0 1.7 1.3.9 2.2L27.3 37.4c-.6.8-1.9.8-2.5 0L7.3 16.2c-.7-.9-.1-2.2 1-2.2z"></path>
              </svg>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Findings

The year selector combo box is configured as a read-only variant, which is causing accessibility tools to classify the picklist as read-only. This misconfiguration might be related to the specific styling needs of the year picklist. Refer to the ComboBox documentation for more details on the styling of each variant.

When the component is unpacked, this read-only attribute is added to the HTML div, causing accessibility tools to classify the picklist as read-only.

Additional Notes

I have also posted the same issue on the #design-system-react-open-source Slack channel for further discussion.

[welcome]

Thanks for opening your first issue! 👋
If you have found this library helpful, please star it. A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread.