Skip to content

Month and year dropdowns do not have an accessible name #6223

@jamesonhill

Description

@jamesonhill

Describe the bug
Currently, the year and month dropdowns (there may be others but these are the ones i've been flagged with) within the popover element render select elements, but they do not have an accessible name and there are no props exposed to add the necessary attributes and/or elements to satisfy WCAG 2.1 (A). See more info here on how a select is expected to have an associated label: https://dequeuniversity.com/rules/axe/4.9/select-name?application=axeAPI

To Reproduce
Steps to reproduce the behavior:

  1. Render the datepicker with the props showMonthDropdown and showYearDropdown set to true
  2. Open the popover
  3. Inspect the dropdown menu

Expected behavior
There are several ways to associate a label with a select. One such example is <select aria-label="select a year">...</select>

Screenshots

Image

Desktop (please complete the following information):

  • OS: MacOS Sequoia 15.5
  • Browser: all (screenshot is from Chrome)
  • Version 143.0.7499.169 (Official Build) (arm64)

Additional context
Add any other context about the problem here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions