Placeholder should have a title for WCAG AA compliance #5963
Description
Edit:
The information below is incorrect. @kevin-brown provided the correct description below.
Original:
Hello,
I upgraded from 3.x to 4.0.13 recently, and it caused my test suite to fail as far as WCAG compliance goes.
Here's a bin:
https://jsbin.com/sakexad/edit?html,js,output
Here's the failure I'm getting when I run my test suite using Deque's WCAG tool:
1) aria-input-field-name: ARIA input fields have an accessible name (serious)
https://dequeuniversity.com/rules/axe/3.3/aria-input-field-name?application=axeAPI
The following 1 node violates this rule:
Selector:
#select2-example1-container
HTML:
<span class="select2-selection__rendered" id="select2-example1-container" role="textbox" aria-readonly="true">
<span class="select2-selection__placeholder">Hello</span>
</span>
Fix any of the following:
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
- Element has no title attribute or the title attribute is empty
With the placeholder, you get the following:
<span class="select2-selection__rendered" id="select2-example1-container" role="textbox" aria-readonly="true">
<span class="select2-selection__placeholder">
Hello
</span>
</span>
If you remove the placeholder, you get the following (https://jsbin.com/quruziz/edit?html,js,output):
<span class="select2-selection__rendered" id="select2-example1-container" role="textbox" aria-readonly="true" title="Hello">Hello</span>
According to the WCAG guidelines, a referenced aria-labelledby should not have child elements. Removing the additional span should solve this.
Also, I tried the beta releases, and they did not fix it unfortunately.
Thanks.