Major Description
WCAG test in the CKEditor module failed when analysing the slash dropdown. The structure of this dropdown is invalid HTML. It will still render nicely in web browser, but it can be a liability when trying to use this feature with a screen reader.
Here is one of the error message found on the CI:
WCAG fails in the test class [org.xwiki.ckeditor.test.ui.AllIT]: __________ Validation in the test method [paragraphQuickAction_en] Check for [org.xwiki.test.ui.po.editor.WikiEditPage] at http://xwikiweb:8080/xwiki/bin/edit/NestedLocalizationIT/paragraphQuickAction_en/WebHome?form_token=ynWjejQ34uqOkxiLKxSnyw&editor=wysiwyg. Found [2] items 1: Certain ARIA roles must contain particular children Description: Ensures elements with an ARIA role that require child roles contain them Help URL: https://dequeuniversity.com/rules/axe/4.8/aria-required-children?application=axeAPI Help: Certain ARIA roles must contain particular children Impact: critical Tags: cat.aria, wcag2a, wcag131, EN-301-549, EN-9.1.3.1 HTML element: <ul id="cke_73" class="cke_autocomplete_panel cke_autocomplete_opened" role="listbox" aria-label="Select the item to autocomplete." style="z-index: 9997; left: 46px; top: 273.562px;" data-query="/p"> Selector: cke_73 Fix any of the following: Element has children which are not allowed: li[tabindex] Element uses aria-busy="true" while showing a loader 2: <li> elements must be contained in a <ul> or <ol> Description: Ensures <li> elements are used semantically Help URL: https://dequeuniversity.com/rules/axe/4.8/listitem?application=axeAPI Help: <li> elements must be contained in a <ul> or <ol> Impact: serious Tags: cat.structure, wcag2a, wcag131, EN-301-549, EN-9.1.3.1 HTML element: <li data-group="Layout" class="ckeditor-autocomplete-group" title="Layout"><h6>Layout</h6></li> Selector: [li[data-group="Layout"]] Fix any of the following: List item does not have a <ul>, <ol> parent element without a role, or a role="list" HTML element: <li data-group="Development" class="ckeditor-autocomplete-group" title="Development"><h6>Development</h6></li> Selector: [li[data-group="Development"]] Fix any of the following: List item does not have a <ul>, <ol> parent element without a role, or a role="list" HTML element: <li data-group="Notifications" class="ckeditor-autocomplete-group" title="Notifications"><h6>Notifications</h6></li> Selector: [li[data-group="Notifications"]] Fix any of the following: List item does not have a <ul>, <ol> parent element without a role, or a role="list" HTML element: <li data-group="Deprecated" class="ckeditor-autocomplete-group" title="Deprecated"><h6>Deprecated</h6></li> Selector: [li[data-group="Deprecated"]] Fix any of the following: List item does not have a <ul>, <ol> parent element without a role, or a role="list" HTML element: <li data-group="Navigation" class="ckeditor-autocomplete-group" title="Navigation"><h6>Navigation</h6></li> Selector: [li[data-group="Navigation"]] Fix any of the following: List item does not have a <ul>, <ol> parent element without a role, or a role="list" HTML element: <li data-group="Content" class="ckeditor-autocomplete-group" title="Content"><h6>Content</h6></li> Selector: [li[data-group="Content"]] Fix any of the following: List item does not have a <ul>, <ol> parent element without a role, or a role="list" HTML element: <li data-group="Actions" class="ckeditor-autocomplete-group" title="Actions"><h6>Actions</h6></li> Selector: [li[data-group="Actions"]] Fix any of the following: List item does not have a <ul>, <ol> parent element without a role, or a role="list" HTML element: <li data-group="Formatting" class="ckeditor-autocomplete-group" title="Formatting"><h6>Formatting</h6></li> Selector: [li[data-group="Formatting"]] Fix any of the following: List item does not have a <ul>, <ol> parent element without a role, or a role="list" __________ Validation in the test method [paragraphQuickAction_de_DE] Check for [org.xwiki.test.ui.po.editor.WikiEditPage] at http://xwikiweb:8080/xwiki/bin/edit/NestedLocalizationIT/paragraphQuickAction_de_DE/WebHome?form_token=ynWjejQ34uqOkxiLKxSnyw&editor=wysiwyg. Found [2] items 1: Certain ARIA roles must contain particular children Description: Ensures elements with an ARIA role that require child roles contain them Help URL: https://dequeuniversity.com/rules/axe/4.8/aria-required-children?application=axeAPI Help: Certain ARIA roles must contain particular children Impact: critical Tags: cat.aria, wcag2a, wcag131, EN-301-549, EN-9.1.3.1 HTML element: <ul id="cke_73" class="cke_autocomplete_panel cke_autocomplete_opened" role="listbox" aria-label="Wähle das Element, das automatisch vervollständigt werden soll." style="z-index: 9997; left: 46px; top: 273.562px;" data-query="/abs"> Selector: cke_73 Fix any of the following: Element has children which are not allowed: li[tabindex] Element uses aria-busy="true" while showing a loader 2: <li> elements must be contained in a <ul> or <ol> Description: Ensures <li> elements are used semantically Help URL: https://dequeuniversity.com/rules/axe/4.8/listitem?application=axeAPI Help: <li> elements must be contained in a <ul> or <ol> Impact: serious Tags: cat.structure, wcag2a, wcag131, EN-301-549, EN-9.1.3.1 HTML element: <li data-group="Layout" class="ckeditor-autocomplete-group" title="Gestaltung"><h6>Gestaltung</h6></li> Selector: [.ckeditor-autocomplete-group] Fix any of the following: List item does not have a <ul>, <ol> parent element without a role, or a role="list" ==> expected: <false> but was: <true>