Problem/Motivation

Having multiple elements with the same ID causes issues for screen readers.
When a label has a for attribute associated with the date picker.

Steps to reproduce

1. Use a screen reader to read the date picker.
2. The screen reader will not read the text the label is associated with since multiple IDs exist.

Proposed resolution

Use a different ID for the duet-date-picker element and the input element.

Example

<duet-date-picker identifier="after" name="after" id="after" value="2025-03-27" min="2025-03-27" max="2025-04-02" class="hydrated" data-once="duet-date-picker-locale">
<div class="duet-date__input-wrapper">
<input class="duet-date__input" placeholder="YYYY-MM-DD" id="after" aria-autocomplete="none" autocomplete="off" tabindex="-1" data-once="input-typing-handler">
   ...
</div>
</duet-date-picker identifier>

Issue fork duet_date_picker-3516919

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

sstapleton created an issue. See original summary.

sstapleton’s picture

sstapleton commented
Issue summary: View changes
sstapleton’s picture

sstapleton commented
Issue summary: View changes

bbu23 made their first commit to this issue’s fork.

bbu23 opened merge request !9

bbu23’s picture

bbu23
Location 🇪🇺🇪🇺🇪🇺
commented
Status: Active » Needs review

This can be solved by overriding the template, but I'm creating a merge request to fix the module's template as well.

As per documentation, it is not recommended to use the id attribute, but instead to use the identifier:

Adds a unique identifier for the date picker input. Use this instead of html id attribute.

I'm also removing the label, since my exposed filter already has a label. If this affects other places, then it needs to be addressed, but usually labels should be separate.

  • bbu23 committed 191aa19d on 1.0.x 
    [#3516919] fix: Duplicate IDs cause screen reader to not read associated...
classiccut’s picture

classiccut commented

Thanks @bbu23!

classiccut’s picture

classiccut commented
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

bbu23’s picture

bbu23
Location 🇪🇺🇪🇺🇪🇺
commented

Great!
P.S. I would appreciate the contribution record update.

classiccut’s picture

classiccut commented

Of course! My apologies, I thought I had double checked the contribution but I guess I didn't set it correctly. I believe it should be good now, but if it's not please let me know. Thanks!

bbu23’s picture

bbu23
Location 🇪🇺🇪🇺🇪🇺
commented

Hehe, don't worry!
It looks good now, thank you!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.