Opened 19 months ago

Closed 19 months ago

Last modified 19 months ago

#14587 closed bug (fixed)

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>

Change History (3)

comment:2 Changed 19 months ago by Scott González

Resolution: fixed
Status: newclosed

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

Fixes #14587

Changeset: ce5017843036151d545fba76062655fda69eac62

comment:3 Changed 19 months ago by Scott González

Milestone: none1.12.0
Note: See TracTickets for help on using tickets.