Skip to main content

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 monojp comment:1

Changed September 18, 2015 03:20PM UTC by Scott González comment:2

resolution: → fixed
status: newclosed

Autocomplete: Use a div instead of a span for the live region

Fixes #14587

Changeset: ce5017843036151d545fba76062655fda69eac62

Changed September 18, 2015 03:20PM UTC by scottgonzalez comment:3

milestone: none1.12.0