-
Bug
-
Resolution: Unresolved
-
Low
-
None
-
9.5.1
-
Severity 3 - Minor
-
Issue Summary
the instruction explaining the meaning of the asterisk symbol is missing for the mandatory field.
Steps to Reproduce
- Open "Bitbucket" homepage.
- Open any project and activate "Repository" from header.
- Activate "Create pull requests" link from side navigation.
- Navigate onto and activate "Continue" button.
- Turn on the screen reader and navigate through the mentioned field with tab key.
- Observe that form field label has an asterisk "*".
- Observe that the meaning of "*" is not provided.
Screenshot
Actual Results
Although an asterisk 
is provided for the "Title" mandatory field, the instruction stating the meaning of the asterisk is not provided.
As a result, cognitive and screen reader users might not be able to identify the mandatory fields.
Expected Results
The meaning of asterisk should be described in plain text so that all users can understand it.
Provide the instruction explaining the meaning of the asterisk such as “* denotes mandatory fields”. Place the instruction at the top of the form to ensure all users can access the instruction.
Also add aria-required="true" on <input>" element.
Code snippet
<span>* denotes mandatory fields </span> <label id="pull-request-title-label" for="pull-request-title" class="form-label is-required">Title</label> <input id="pull-request-title" data-ds--text-field--input="true" name="title" class="css-1kxou5n" value="Add bunster" aria-required="true">
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.7
Chrome - Version 119.0.6045.105 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.6 (18615.3.12.11.2)
JAWS- Version 2023
NVDA- Version 2021.2
Voiceover - Version Latest
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|