This issue has been created
There is 1 update.
 
 
XWiki Platform / cid:jira-generated-image-avatar-28bf5c8e-c84f-441b-a35d-03d93f427d8c XWIKI-22473 Open

CKEditor plugin xwiki-slash dropdown structure is invalid HTML

 
View issue   ·   Add comment
 

Issue created

 
cid:jira-generated-image-avatar-3d3c6dc9-847e-46e9-9b32-3fe8a3aed0ee Charpentier Lucas created this issue on 30/Aug/24 15:13
 
Summary: CKEditor plugin xwiki-slash dropdown structure is invalid HTML
Issue Type: cid:jira-generated-image-avatar-28bf5c8e-c84f-441b-a35d-03d93f427d8c Bug
Affects Versions: 16.7.0
Assignee: Unassigned
Components: CKEditor
Created: 30/Aug/24 15:13
Labels: wcag
Priority: cid:jira-generated-image-static-major-e078b602-c9fa-4f06-bba3-c72914e6d5d0 Major
Reporter: Charpentier Lucas
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>

```

 
 

1 update

 
cid:jira-generated-image-avatar-3d3c6dc9-847e-46e9-9b32-3fe8a3aed0ee Changes by Charpentier Lucas on 30/Aug/24 15:13
 
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:

```  

{quote} 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>

```
{quote}