-
Bug
-
Resolution: Unresolved
-
Low
-
None
-
9.5.1
-
Severity 3 - Minor
-
Issue Summary
The label is missing for input fields.
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 "Commits" tab.
- Turn on screen reader and navigate to mentioned input fields via TAB key.
- Inspect the code and observe that the label or "title" attribute is not provided for the form fields.
Screenshot
Actual Results
The "Enter a branch" and "Enter a tag" form fields do not have the label associated with them and "title" attribute is not included in their source code either.
As a result, screen reader users will not understand the purpose of the form fields.
Expected Results
The screen reader should announce the label for the form fields correctly.
Apply the following changes →
- Provide unique and descriptive labels for mentioned form fields using <label> element.
- Associate the label explicitly with the form field by providing an identical value that is unique from other IDs to the "for" and "id" attributes of the label and form field respectively.
Visible labels help all users to understand the purpose of a form element.
Alternatively, use either hidden labels "title" or "aria-label" attributes to convey the purpose of the form fields to screen reader users as well as maintain the presentation.
Note: Before implementing the label, please connect with content design team.
Code Snippet
<label for="l1">Enter branch name</label> <input id="l1" class="filterable-tabs__input" autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-4-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="true" aria-haspopup="listbox" role="combobox" aria-controls="react-select-4-listbox" ... aria-activedescendant="react-select-4-option-2">
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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|