Issue Summary

"Add your own emoji" popup mandatory fields are not identified.

Steps to Reproduce

1. Navigate to “Edit” page toolbar
2. Navigate to the "Insert emoji" control and activate it
3. Verify user is on the "insert emoji" dialog
4. Navigate to the "+ Add your own emoji" control and activate it
5. Navigate to the mentioned input fields and observe that the mandatory fields are not identified.

Actual Results

When user navigate to the "Add your own emoji" popup mandatory fields such as "Select an image", "Name your emoji" and "Give your emoji a shortcut" are not identified programmatically. This might mislead screen reader users about the form field being mandatory.

Expected Results

Form fields which are mandatory should be accessible for screen reader users also. In this scenario, ensure to provide instruction such as "All below form fields are mandatory, to add your own custom emoji" which will help screen reader users to understand to populate below form fields mandatorily.

OR

Provide the asterisk "*" within the label mark-up of the mandatory form fields.

Additionally, provide an instruction "* denotes mandatory fields" at the beginning of the form to ensure all users can access the instruction.

Provide the required attribute on the <input> element of the mentioned field.

Workaround

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

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3.1
Chrome - Version 119.0.6045.123 (Official Build) (64-bit)
Firefox- Version 93.0 (32-bit)
Safari- Version 17.3.1 (19617.2.4.11.12)
JAWS- Version 2023
NVDA- Version 2023.2
Voiceover - Version Latest