Details
-
Bug
-
Resolution: Fixed
-
Low
-
4.20.0, 5.3.1
-
Severity 2 - Major
-
Description
Issue Summary
The "aria-label" attribute is defined inappropriately.
Element name:
- What do you need help with?
Location of the element: Edit field, in the "What, do you need help with?" popup, on the "Search knowledge base " button, in the "Related knowledge base articles" heading section, in the main content.
Steps to Reproduce
- Open the JSM homepage.
- Navigate to the "Project" link in the header and activate it.
- Select any project link and activate it.
- Navigate to the main content and activate the present issue links
- Navigate to the "Search knowledge base" button and activate it.
- Inspect the code for mentioned instance and observe that the aria attribute is defined inappropriately.
Actual Results
The "aria-label" attribute is defined inappropriately for the "What do you need help with ?" input field. The visible label is associated with the input field using "for" and "id" explicitly. The "aria-label" attribute overrides the visible text which confuses the screen reader user.
Expected Results
Remove the "aria-label" attribute from the input field's source code. The visible label should be announced with the input field.
<label for="sd-customer-portal-smart-search-input" class="sd-customer-portal-smart-search-label">What do you need help with?</label> (...) <input autocapitalize="off" autocomplete="off" autocorrect="off" class="text sd-smart-search-input js-sd-smart-search-input full-width-field empty" id="sd-customer-portal-smart-search-input" placeholder="Search for an article" spellcheck="false" type="text">
Screenshot
Workaround
Not Available
Bug Ref: 745973
Bulldog Ref: