Accessibility issues in Segments Editor

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: Master
• Fix Version/s: 7.4.13 DXP U52, Master
• Component/s: Segments Editor
• Labels:
  • 7.4.13-u52
  • pt-app-security-review
• Git Pull Request: https://github.com/liferay-tango/liferay-portal/pull/3018/
• Bug Type: Default

Motivation

We are performing a first accessibility review for the Segment Editor. 

We are fixing markup issues in this ticket.

Step by Step

• Navigate to Segments Editor
• Open axeDevTools
• Scan the page

Actual result

With no segments created, 10 issues are expected, 3 belongs to Segment Editor:

• Ensures buttons have discernible text for the Search icon (critical impact)
• Ensures every form element has a label fir the edit/view switch (critical impact)

• Ensures the order of headings is semantically correct for the property group (moderate impact)

With a segment created, a total of 15 errors are expected

• Ensures buttons have discernible text: we get two more of this errors, from each attribute you add
• Ensures every form element has a label: we get one more of this errors from the attribute input field (may vary depending of the attribute added, we should review all attributes)
• Ensures select element has an accessible name from the segment attribute select

• Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds from the segment attribute select

Update

After reevaluating the page with another tool, new errors appear, so do not take the above list too serious as it can be inconsistent depending of the tool used.

Expected

No AA issues from the Segment Editor