Issue Summary

The instructions present in the modal dialog is not associated.

Steps to Reproduce

1. Activate the "Create" button from the header.
2. New page will appear on the screen.
3. Activate the "Insert more content" button.
4. Select "other macros" option.
5. Modal dialog will appear on the screen
6. Type "Live search" on the modal dialog.
7.  Check that instruction text is not associated with the form field.

Screenshot 1

Screenshot 2

Actual Results

The instruction "This is case-sensitive. If not specified, all accessible spaces are searched.", "A comma separated list of labels to filter the search by", and so on are not associated with their respective form fields "Restrict to this Space Key", "Restrict to label(s)", and so on. As a result, screen reader users might miss out important instructions.

Similarly for the "Recently updated" macros instruction - please refer screenshot 1.

Expected Results

Apply the following changes:

• Add "aria-describedby" attribute to the form field.
• Reference the "id" value of the element used to display the instruction text in the "aria-describedby" attribute.

Code Snippet

<div class="macro-param-desc" id="instruc-11">This is case-sensitive. If not specified, all accessible spaces are searched.</div> 
<input aria-describedby="instruc-11"type="text" class="text autocomplete-space macro-param-input" data-template="{key}" data-none-message="Not found" data-autocomplete-content-bound="true" autocomplete="off" id="macro-param-spaceKey">

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.3.1
Chrome - Version 114.0.5735.198 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 16.4 (18615.1.26.11.23)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest