(Accessibility) [Stack Monitoring] Ensures <dl> elements are structured correctly

[rashmivkulkarni]

Stack Monitoring > Alerts Page > a11y violation seen

       Alerts Page:

      Error: a11y report:
 
 VIOLATION
   [definition-list]: Ensures <dl> elements are structured correctly
     Impact: serious
     Help: https://dequeuniversity.com/rules/axe/4.0/definition-list?application=axeAPI
     Elements:
       - <dl class="euiDescriptionList euiDescriptionList--row">
       at AccessibilityService.assertValidAxeReport (/Users/rashmikulkarni/Documents/kibana/test/accessibility/services/a11y/a11y.ts:76:13)
       at AccessibilityService.testAppSnapshot (/Users/rashmikulkarni/Documents/kibana/test/accessibility/services/a11y/a11y.ts:49:10)
       at processTicksAndRejections (node:internal/process/task_queues:96:5)
       at Context.<anonymous> (test/accessibility/apps/stack_monitoring.ts:52:5)
       at Object.apply (/Users/rashmikulkarni/Documents/kibana/node_modules/@kbn/test/target_node/functional_test_runner/lib/mocha/wrap_function.js:87:16)

It looks like this is because of the Logs panel. We've got a dl with a callout div as a child instead of a dt.

Screenshot from lighthouse:

This happens here

kibana/x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js

Lines 94 to 100 in 64c6651

	if (!props.logs.enabled) {
	return (
	<EuiDescriptionList>
	<Reason reason={props.logs.reason} />
	</EuiDescriptionList>
	);
	}

by having the Reason component as a child of the EuiDescriptionList.

✔️ Acceptance Criteria

• Accessibility test pass
• Callout renders correctly

[elasticmachine]

Pinging @elastic/kibana-accessibility (Project:Accessibility)

[elasticmachine]

Pinging @elastic/infra-monitoring-ui (Team:Infra Monitoring UI)

[smith]

@rashmivkulkarni I'm not sure which page you're looking at (I don't see any top-level navigation for "Alerts Page" in Stack Monitoring.) Could you please provide some more information and/or a screenshot?

[rashmivkulkarni]

The URL while this a11y violation happens is: http://localhost:5620/app/monitoring#/overview?_g=(cluster_uuid:Ne-khZBvQKWxlfCZoZQX2w,refreshInterval:(pause:!f,value:10000),time:(from:now-15m,to:now))
Screenshot here: violation happens right when am clicking [data-test-subj="alerts-modal-remind-later-button"]'

[rashmivkulkarni]

serious
Found on:
6/13/2022 at 12:42 PM
Found:
Automatically
Issue Tags:
cat.structure
wcag2a
wcag131
Issue Description
Ensures <dl> elements are structured correctly

Element location
.euiDescriptionList--row
Element source
<dl class="euiDescriptionList euiDescriptionList--row">
To solve this issue, you need to...
Fix the following:
List element has direct children that are not allowed inside <dt> or <dd> elements

This is the result which I got after running the axeTool on the page.

[elasticmachine]

Pinging @elastic/apm-ui (Team:apm)

[smith]

It looks like this is because of the Logs panel. We've got a dl with a callout div as a child instead of a dt.

Screenshot from lighthouse:

This happens here

kibana/x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js

Lines 94 to 100 in 64c6651

	if (!props.logs.enabled) {
	return (
	<EuiDescriptionList>
	<Reason reason={props.logs.reason} />
	</EuiDescriptionList>
	);
	}

by having the Reason component as a child of the EuiDescriptionList.

[smith]

I updated the issue description to show the problem and steps to fix.