Search and Top Navigation
#14587 closed bug (fixed)
Opened September 18, 2015 11:50AM UTC
Closed September 18, 2015 03:20PM UTC
Last modified September 18, 2015 03:20PM UTC
autocomplete is generating invalid accessibility HTML markup
| Reported by: | monojp | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.12.0 |
| Component: | ui.autocomplete | Version: | 1.11.4 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
After playing with an initialised autcomplete input there are hidden accessibility helper tags created right before the closing body tag. The last span contains divs which is invalid HTML markup and the W3C Validator reports it as 'Element “div” not allowed as child of element “span” in this context.'
e.g.:
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: none; top: 918px; left: 677px; width: 174px;">
<li class="ui-menu-item" id="ui-id-6" tabindex="-1">foo</li>
<li class="ui-menu-item" id="ui-id-7" tabindex="-1">bar</li>
</ul>
<span role="status" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
<div style="display: none;">2 results are available, use up and down arrow keys to navigate.</div>
</span>
</body>
Sorry was not able to create a simpler jsfiddle testcase, because the old jQuery UI version there does not create those accessibility tags at all. But I created the following simple test script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI invalid autocomplete markup</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<script type='text/javascript'>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
];
// init autocomplete and immediately trigger search which creates the
// incorrect HTML markup
$( "#tags" ).autocomplete({
source: availableTags,
}).autocomplete("search", "A");
// show the incorrect markup
console.log($('.ui-helper-hidden-accessible').prop('tagName'));
console.log($('.ui-helper-hidden-accessible').html());
});
</script>
</body>
</html>
which is hosted on http://playground.herndl.org/jqueryui_autocomplete/ and reports:
SPAN <div>2 results are available, use up and down arrow keys to navigate.</div>
Attachments (0)
Change History (3)
Changed September 18, 2015 12:22PM UTC by comment:1
Changed September 18, 2015 03:20PM UTC by comment:2
| resolution: | → fixed |
|---|---|
| status: | new → closed |
Autocomplete: Use a div instead of a span for the live region
Fixes #14587
Changeset: ce5017843036151d545fba76062655fda69eac62
Changed September 18, 2015 03:20PM UTC by comment:3
| milestone: | none → 1.12.0 |
|---|
should be fixed with https://github.com/jquery/jquery-ui/pull/1602