Jetpack Form Block: A11Y - ARIA input field doesn't have accessible text

[kimclowa8c]

Impacted plugin

Jetpack

Quick summary

There is an issue on the Jetpack Form Block regarding Accessibility.

A11Y - ARIA input field doesn't have accessible text

Here is a related issue: https://github.com/Automattic/jetpack/issues/16685

Steps to reproduce

1. Login to WP Admin
2. Add the Jetpack Form to a page
3. Add a dropdown block
4. Save and load the front end
5. Inspect to see the missing A11y fields

A clear and concise description of what you expected to happen.

No response

What actually happened

No response

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

No response

Logs or notes

No response

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple – Replicated
• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• I believe my tests (in FireFox 113.0) replicate this issue, though I'm not positive as I'm not as familiar with the Accessibility Inspector tools here.

Screenshots/Recordings

Simple

Atomic

📌 ACTIONS

• Assigned to a11y
• CC: @jeherve

[kloon]

@cuemarie just checking if the intention was to assign this to a11y-alpha team or if it was by mistake. That team is responsible for a11y on WooCommerce.com.

[cuemarie]

@kloon My mistake, thank you for the ping! Will correct 👍

[dpasque]

Btw, I just ran into this today and I think I know the cause!

The DOM looks something like this:

<div style="" class="grunion-field-select-wrap grunion-field-wrap contact-form-dropdown-wrap ui-front">
        <label for="g119-dropdowntest-button" class="grunion-field-label select">Dropdown test</label>
    <select name="g119-dropdowntest" id="g119-dropdowntest" class="select  grunion-field contact-form-dropdown" aria-hidden="true" tabindex="-1" style="display: none;">
        <option value="">Select one option</option>
        <option value="Banana">Banana</option>
    </select><span tabindex="0" id="g119-dropdowntest-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="g119-dropdowntest-menu" aria-haspopup="true" class="ui-selectmenu-button contact-form-dropdown__button ui-selectmenu-button-closed ui-corner-all ui-button ui-widget"><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">Select one option</span></span>
<div class="ui-selectmenu-menu contact-form-dropdown__menu ui-front"><ul aria-hidden="true" aria-labelledby="g119-dropdowntest-button" id="g119-dropdowntest-menu" role="listbox" tabindex="0" class="ui-menu ui-corner-bottom ui-widget ui-widget-content"></ul></div></div>

Note that we're using a label with the for attribute to try to target the span with the combobox role. I think that's just not a supported use of label + for.

Instead, we should be setting an aria-label directly or using aria-labelledby on the custom combobox. I tested this out and it correctly assigns the accessible name.