fix(core): wire aria-describedby and aria-busy on DateTimeInput time input#3716
Open
bhamodi wants to merge 1 commit into
Open
fix(core): wire aria-describedby and aria-busy on DateTimeInput time input#3716bhamodi wants to merge 1 commit into
bhamodi wants to merge 1 commit into
Conversation
|
@bhamodi is attempting to deploy a commit to the Meta Open Source Team on Vercel. A member of the Team first needs to authorize it. |
2b4070e to
6d7e9f2
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
In
packages/core/src/DateTimeInput/DateTimeInput.tsxthe field's description, status message, and disabled-reason are collected into a singleariaDescribedBystring (around line 478), and the field's busy state intoisBusy(line 444). The date input wires both:aria-describedby={ariaDescribedBy}(line 911) andaria-busy={isBusy || undefined}(line 916). The embedded time input (around lines 973-999) setaria-label,aria-required,aria-invalid, andaria-disabled— but neitheraria-describedbynoraria-busy.Both halves live under one
Fieldlabel, so the description, status message, and disabled message describe the whole control. Because only the date input carriedaria-describedby, a screen-reader user who tabbed into the time half lost access to all three, and never heard the field announced as busy during an async change. This is a WCAG 1.3.1 Info and Relationships gap for the time input.The fix adds the same two attributes to the time input, reusing the existing
ariaDescribedByandisBusyvalues so the two halves stay in parity.Changes
packages/core/src/DateTimeInput/DateTimeInput.tsx: addaria-describedby={ariaDescribedBy}andaria-busy={isBusy || undefined}to the time<input>.packages/core/src/DateTimeInput/DateTimeInput.test.tsx: added tests asserting the time input'saria-describedbyresolves to the description, the status message, and the disabled reason, plusaria-busyparity with the date input (set whenisLoading, absent otherwise).Test plan
node_modules/.bin/vitest run --root . packages/core/src/DateTimeInput— 62 pass (was 58), including the 5 new tests.aria-describedbytests and thearia-busytime-input test all failed (aria-describedby/aria-busywasnullon the time input), proving they catch the gap.node_modules/.bin/tsc --project packages/core/tsconfig.json --noEmit— clean.node_modules/.bin/eslint packages/core/src/DateTimeInput/DateTimeInput.tsx packages/core/src/DateTimeInput/DateTimeInput.test.tsx— clean.Notes
Found during a broader a11y audit of the DateTimeInput component. Scoped to these two attributes on the time input plus tests.
DateTimeInput.doc.mjsdoesn't documentaria-describedby/aria-busy, so no doc change was needed.