Skip to content

D9Label help text is easier to read and has an id (<id>-help); D9Select passes aria-describedby to its button - #28

Merged
PhilReinking merged 4 commits into
mainfrom
fix/bits-289-label-help-text
Oct 17, 2026
Merged

PhilReinking merged 4 commits into
mainfrom
fix/bits-289-label-help-text

Conversation

@PhilReinking

Copy link
Copy Markdown
Contributor

D9Label's help text is now readable, and a field can point at it with aria-describedby. The help text gets the id <id>-help (none without an id) and the color grey-500. Contrast is 4.76:1 on white and 4.55:1 on grey-50 (before: 2.56:1 and 2.45:1).

  • New story "Forms/Label → Linked to field" shows aria-describedby="name-help" on a D9Input.
  • D9Select now puts aria-describedby on its button. class, style, data-* and other attrs stay on the wrapper as before.

Fixes BITS-289

Tested: check, lint, test, build pass; the new Label and Select specs fail on main. Headless Brave accessibility tree reads the help text for Input, Textarea and Select.

After merge: Input needs an @deck9/ui bump and aria-describedby="<id>-help" on its fields.

🤖 Generated with Claude Code

PhilReinking and others added 3 commits October 17, 2026 19:30
…289)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

@PhilReinking PhilReinking left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK at 1ed38aa, CI green. Help text is 4.76:1 on white and 4.55:1 on grey-50 (dark: 5.71:1 on grey-800). Packed .d.ts files match main. class and id on D9Select land where they did; Input's calls don't change. Headless Chrome reads the help text as the Select button's description. One should inline. The title could also name the D9Select fix: "…; D9Select passes aria-describedby to its button".

Comment thread src/Select/Select.vue Outdated
Comment on lines +169 to +173
const wrapperAttrs = computed(() =>
Object.fromEntries(
Object.entries(attrs).filter(([name]) => name !== "aria-describedby")
)
);

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A computed over useAttrs() only re-runs if it read an attr. If D9Select first renders with no attrs and gets a class later, the class never reaches the wrapper (on main it does). Make it a plain function and bind it as v-bind="wrapperAttrs()" on line 8.

Suggested change
const wrapperAttrs = computed(() =>
Object.fromEntries(
Object.entries(attrs).filter(([name]) => name !== "aria-describedby")
)
);
const wrapperAttrs = () =>
Object.fromEntries(
Object.entries(attrs).filter(([name]) => name !== "aria-describedby")
);

…289)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@PhilReinking PhilReinking changed the title D9Label help text is easier to read and has an id (<id>-help) for aria-describedby D9Label help text is easier to read and has an id (<id>-help); D9Select passes aria-describedby to its button Oct 17, 2026

@PhilReinking PhilReinking left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK at fe3015b, CI green. The Select fix holds: a class or aria-describedby set after the first render now lands on the wrapper and the button. The new spec fails on 1ed38aa and passes here. npm test 16, check, lint, build pass. Packed .d.ts files still match main. Title names the D9Select change.

@PhilReinking
PhilReinking merged commit 46d32f6 into main Oct 17, 2026
1 check passed
@PhilReinking
PhilReinking deleted the fix/bits-289-label-help-text branch October 17, 2026 18:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant