Dropdown, Dropdown Group, Dropdown - Ensure all interactive functionality is operable with the keyboard - (2047838678)

[dqateam]

Module:

43 Dropdown, Dropdown Group, Dropdown

Violation:

Ensure all interactive functionality is operable with the keyboard

WCAG Reference:

• 2.1.1 Keyboard

Instance ID:

2047838678

Severity:

8

Description:

Div Trigger

Grassland Forest Trail Park Lake Mountain River

Note:

This does not respond to enter or space

Media Type:

Keyboard Accessibility

Additional Resources:

• Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.

[geospatialem]

Might be out of scope for the component, but helpful in updating the documentation so developers ensure any use cases where a custom element is used (such as a div), accessibility must be carried out.

For instance, updating the code to accommodate for keyboard users:

html:

<h3>Div triggered dropdown</h3>
<calcite-dropdown>
  <div slot="dropdown-trigger" appearance="solid" tabindex="0" onkeypress="openDropdown(event)" onClick="openDropdown(event)">Div Trigger</div>
  <calcite-dropdown-group group-title="Div trigger">
    <calcite-dropdown-item>Grassland</calcite-dropdown-item>
    <calcite-dropdown-item active>Forest</calcite-dropdown-item>
    <calcite-dropdown-item>Trail</calcite-dropdown-item>
    <calcite-dropdown-item>Park</calcite-dropdown-item>
    <calcite-dropdown-item>Lake</calcite-dropdown-item>
    <calcite-dropdown-item>Mountain</calcite-dropdown-item>
    <calcite-dropdown-item>River</calcite-dropdown-item>
  </calcite-dropdown-group>
</calcite-dropdown>

javascript:

const dropdown = document.querySelector("calcite-dropdown");

function openDropdown(event) {
  if (
    (event.type === "keypress" && event.key === " ") ||
    (event.type === "keypress" && event.key === "Enter")
  ) {
    dropdown.toggleAttribute("open");
  }
}

[geospatialem]

Closing in favor of the created documentation issues to come to a resolution.