diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/suggest/xwiki.selectize.js b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/suggest/xwiki.selectize.js index 2658b9379301..ab7090f265fb 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/suggest/xwiki.selectize.js +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/suggest/xwiki.selectize.js @@ -31,7 +31,7 @@ define('xwiki-selectize', [ 'xwiki-events-bridge' ], function($, Selectize, l10n) { var optionTemplate = [ - '
', + '
', '', '', '
' @@ -203,6 +203,25 @@ define('xwiki-selectize', [ }); } } + let oldOnOptionSelect = this.selectize.onOptionSelect; + this.selectize.onOptionSelect = function(...args) { + const result = oldOnOptionSelect.apply(this, args); + // clear aria-selected state on all previously selected elements first + this.get$('dropdown').find('.option').attr('aria-selected','false'); + // then set the aria-selected state of the newly selected element. + this.get$('dropdown').find('.selected').attr('aria-selected','true'); + return result; + } + let oldSetActiveOption = this.selectize.setActiveOption; + this.selectize.setActiveOption = function(option, ...args) { + this.liveRegion?.text($(option).text()); + return oldSetActiveOption.call(this, option, ...args); + } + // Create a live region to store the value of the currently active option. + this.selectize.liveRegion = $(''); + this.selectize.liveRegion.attr('aria-live', 'assertive'); + this.selectize.liveRegion.addClass('sr-only'); + this.selectize.get$('input').after(this.selectize.liveRegion); setDropDownAlignment(this.selectize); if (this.selectize.settings.takeInputWidth) { this.selectize.get$('control').width($(this).data('initialWidth'));