[a11y]: DatePicker - svg has no accessible name

[woodsja-ibm]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

v1.75.0

React version

v17.0.2

Automated testing tool and ruleset

IBM Accessibility Checker - Latest Deployment / IBM Accessibility v7.3

Assistive technology

No response

Description

The DatePicker previous/next buttons (svgs) for moving to the previous/next months have no accessible label ("The SVG element has no accessible name").

The checker says this is a violation of IBM 1.1.1 - https://www.ibm.com/able/requirements/requirements/#1_1_1

WCAG 2.1 Violation

No response

Reproduction/example

https://stackblitz.com/github/carbon-design-system/sandboxes/tree/main/react/latest/react-19-vite?file=src%2FApp.jsx

Steps to reproduce

Open up the picker then run the accessibility checker tool on the resulting screen.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[wkeese]

It's worse than that, the next/previous buttons aren't even buttons. They look like:

<span class="flatpickr-next-month">
  <svg width="16px" height="16px" viewBox="0 0 16 16">
    <polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "></polygon>
  </svg>
</span>

The whole DatePicker is a mess. It's not keyboard accessible at all, and hardly has any ARIA attributes, so I think the idea is that keyboard and screen reader users just use the <input> as though the dropdown didn't exist at all. The quick fix would probably be to replace the dropdown's aria-label with aria-hidden.