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'));