A11y-Update für DBSwitch #5624
A11y-Update für DBSwitch #5624
Conversation
…lity in DBSwitch component
github-project-automation
bot
moved this to 🏗 In progress
in UX Engineering Team Backlog
🦋 Changeset detectedLatest commit: 3406278 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
sarahbrng
moved this from 🏗 In progress
to 🎁 Ready for review
in UX Engineering Team Backlog
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…n in Windows/NVDA
…bel and improve comment capitalization
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…nt label handling
…pplied-to-elements' of https://github.com/db-ux-design-system/core-web into 5495-changing-language-with-aria-labels-not-correctly-applied-to-elements
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
@sarahbrng only making some of those |
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…correctly-applied-to-elements
…pplied-to-elements' of https://github.com/db-ux-design-system/core-web into 5495-changing-language-with-aria-labels-not-correctly-applied-to-elements
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…pplied-to-elements' of https://github.com/db-ux-design-system/core-web into 5495-changing-language-with-aria-labels-not-correctly-applied-to-elements
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…licts The onMount hook in switch.lite.tsx was using state._id immediately after setting it to construct derived IDs (_labelId, _messageId, etc.). In React, this compiled to useState setters which don't update values synchronously, causing all derived IDs to be based on undefined/_id instead of the new ID value. This resulted in all switches on a page sharing the same broken label IDs, making screen readers announce the first switch's label for all switches. Fix: Use a local const variable to hold the ID value, ensuring all derived IDs are correctly constructed from the same value in a single pass. Fixes rendering bug introduced in commit 040e72a which added aria-labelledby support.
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…licts The onMount hook in switch.lite.tsx was using state._id immediately after setting it to construct derived IDs (_labelId, _messageId, etc.). In React, this compiled to useState setters which don't update values synchronously, causing all derived IDs to be based on undefined/_id instead of the new ID value. This resulted in all switches on a page sharing the same broken label IDs, making screen readers announce the first switch's label for all switches. Fix: Use a local const variable to hold the ID value, ensuring all derived IDs are correctly constructed from the same value in a single pass. Fixes rendering bug introduced in commit 040e72a which added aria-labelledby support.
…pplied-to-elements' of https://github.com/db-ux-design-system/core-web into 5495-changing-language-with-aria-labels-not-correctly-applied-to-elements
github-project-automation
bot
moved this from 🎶 Waiting for feedback
to ⏰ready for release
in UX Engineering Team Backlog
There was a problem hiding this comment.
this is a fix we would like to communicate, so a changeset is missing in this.
There was a problem hiding this comment.
I'm struggling with the approach to only making some of those aria-*-HTML-attribute in one component in our system "reactive" to changes might not be intuitive to the developers. I would have assumed that the existing mechanism for pass-throughs of those attributes even already takes care of this stuff, elsewhere we should optimize that functionality from my point of view, as this missing functionality would be expected equally at other attributes as well.
|
@michaelmkraus @sarahbrng this PR is still draft, but approved. |
Yes, that is right:
I suggest: Keep this PR as-is (targeted fix for the immediate accessibility bug) and create a follow-up issue to address the architectural concern, what do you think @mfranzke ? |
A11y-Update für DBSwitch
github-actions
bot
added
the
📕documentation
Let's discuss in the team next week. Providing this fix in the meantime would introduce this "inconsistency" (not a huge thing, but still), and we would be able to wait for the big solution. |
Proposed changes
Das Problem: Bisher wurden ARIA-Labels beim Laden der Komponente einmalig gesetzt ("Snapshotted"). Bei dynamischen Änderungen zur Laufzeit (z. B. Sprachwechsel via i18n) blieb der Screenreader-Text veraltet.
Die Lösung: Die Inputs ariaLabel und ariaLabelledBy sind nun reaktive Props somit werden Änderungen sofort an das innere
input[type="checkbox"]weitergegeben. Der Accessible Name ist immer live aktuell.aria-labelbindet anariaLabel.aria-labelledbybindet anariaLabelledBy.resolves #5495
Types of changes
Further comments
🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/5495-changing-language-with-aria-labels-not-correctly-applied-to-elements