ARIA attributes in autocomplete and tooltip

[sabernhardt]

From the report on WordPress Trac #54681

Russell Eck:

An error container class="ui-helper-hidden-accessible" is made with aria-live="assertive", but it does not contain a WAI-ARIA attribute that will make sure all assistive technologies can read the error message after more than one invalid submission.

Adding the aria-atomic="true" to the error container tag will ensure assistive technologies can read the message after more than one invalid submission.

@afercia:

I'm not sure an aria-atomic attribute is the only change that should be made.

• autocomplete.js: it uses a role="status". which has an implicit aria-atomic value of true. It also uses an aria-live="assertive" attribute which overrides the default polite value of the role="status". At this point, it would be better to make it a role="alert" and omit the other attributes.

Seems to me the current jQuery UI implementation shows a bit its age. Some years ago the alert and status roles weren't fully supported. At that time, it was pretty common to build aria-live regions by setting the (implicit) attributes explicitly. Today, support has improved and it would be better to use some more modern code.

jquery-ui/ui/widgets/autocomplete.js

Lines 308 to 315 in e21a254

	this.liveRegion = $( "<div>", {
	role: "status",
	"aria-live": "assertive",
	"aria-relevant": "additions"
	} )
	.appendTo( this.document[ 0 ].body );
	this._addClass( this.liveRegion, null, "ui-helper-hidden-accessible" );

jquery-ui/ui/widgets/tooltip.js

Lines 108 to 116 in e21a254

	// Append the aria-live region so tooltips announce correctly
	this.liveRegion = $( "<div>" )
	.attr( {
	role: "log",
	"aria-live": "assertive",
	"aria-relevant": "additions"
	} )
	.appendTo( this.document[ 0 ].body );
	this._addClass( this.liveRegion, null, "ui-helper-hidden-accessible" );

[mgol]

Thanks for the report. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex.