Card | Include aria-describedby in DismissProps

[gjf20]

Summary:

This PR exposes aria-describedby on the Card component's DismissButton. This will allow for adding additional context for screen reader use cases without making the button's aria label too long.

Issue: WB-2173

Test plan:

• unit tests
• manual testing via storybook:

Screenshot showing that the dismiss button's description can be set to the body text of the Card Component:

[changeset-bot]

🦋 Changeset detected

Latest commit: cd0fcce

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@khanacademy/wonder-blocks-card	Minor

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

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/wonder-blocks for changes to .changeset/eight-ladybugs-shave.md, __docs__/wonder-blocks-card/accessibility.mdx, __docs__/wonder-blocks-card/card.stories.tsx, packages/wonder-blocks-card/src/components/card.tsx, packages/wonder-blocks-card/src/components/dismiss-button.tsx, packages/wonder-blocks-card/src/__tests__/components/card.test.tsx, packages/wonder-blocks-card/src/__tests__/components/dismiss-button.test.tsx

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

Size Change: +21 B (+0.02%)

Total Size: 109 kB

Filename	Size	Change
packages/wonder-blocks-card/dist/es/index.js	1.08 kB	+21 B (+1.97%)

ℹ️ View Unchanged

Filename	Size
packages/wonder-blocks-accordion/dist/es/index.js	3 kB
packages/wonder-blocks-announcer/dist/es/index.js	1.74 kB
packages/wonder-blocks-badge/dist/es/index.js	2.02 kB
packages/wonder-blocks-banner/dist/es/index.js	2.01 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js	1.92 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js	755 B
packages/wonder-blocks-button/dist/es/index.js	4.25 kB
packages/wonder-blocks-cell/dist/es/index.js	2.18 kB
packages/wonder-blocks-clickable/dist/es/index.js	2.66 kB
packages/wonder-blocks-core/dist/es/index.js	2.48 kB
packages/wonder-blocks-data/dist/es/index.js	5.48 kB
packages/wonder-blocks-dropdown/dist/es/index.js	19.4 kB
packages/wonder-blocks-form/dist/es/index.js	6.2 kB
packages/wonder-blocks-grid/dist/es/index.js	1.24 kB
packages/wonder-blocks-icon-button/dist/es/index.js	3.2 kB
packages/wonder-blocks-icon/dist/es/index.js	1.91 kB
packages/wonder-blocks-labeled-field/dist/es/index.js	3.48 kB
packages/wonder-blocks-layout/dist/es/index.js	1.63 kB
packages/wonder-blocks-link/dist/es/index.js	1.52 kB
packages/wonder-blocks-modal/dist/es/index.js	7.06 kB
packages/wonder-blocks-pill/dist/es/index.js	1.31 kB
packages/wonder-blocks-popover/dist/es/index.js	4.3 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js	1.48 kB
packages/wonder-blocks-search-field/dist/es/index.js	1.1 kB
packages/wonder-blocks-styles/dist/es/index.js	464 B
packages/wonder-blocks-switch/dist/es/index.js	1.55 kB
packages/wonder-blocks-tabs/dist/es/index.js	3.74 kB
packages/wonder-blocks-testing-core/dist/es/index.js	3.25 kB
packages/wonder-blocks-testing/dist/es/index.js	978 B
packages/wonder-blocks-theming/dist/es/index.js	384 B
packages/wonder-blocks-timing/dist/es/index.js	1.37 kB
packages/wonder-blocks-tokens/dist/es/index.js	5.01 kB
packages/wonder-blocks-toolbar/dist/es/index.js	906 B
packages/wonder-blocks-tooltip/dist/es/index.js	6.4 kB
packages/wonder-blocks-typography/dist/es/index.js	1.57 kB

_{compressed-size-action}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 0.00%. Comparing base (cc99d84) to head (c756ebe).

Additional details and impacted files

@@     Coverage Diff      @@
##   main   #2890   +/-   ##
============================
============================

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cc99d84...c756ebe. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-lpejauhcya.chromatic.com/

Chromatic results:

Metric	Total
Captured snapshots	7
Tests with visual changes	0
Total stories	747
Inherited (not captured) snapshots [TurboSnap]	441
Tests on the build	448

[github-actions]

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (dbaf4a8) and published all packages with changesets to npm.

You can install the packages in frontend by running:

./dev/tools/deploy_wonder_blocks.js --tag="PR2890"

Packages can also be installed manually by running:

pnpm add @khanacademy/wonder-blocks-<package-name>@PR2890

[jandrade]

Changes look great! Just leaving a couple of suggestions especially to provide more a11y docs before landing. Thanks for adding this! 🚢

[jandrade]

suggestion: This looks great!. Just adding a separate suggestion as the related file is not modified in this PR:

Could you please add some minimal instructions to explain how/when to use this new prop here?

https://5e1bf4b385e3fb0020b7073c-beexwdbbro.chromatic.com/?path=/docs/packages-card-accessibility--docs#dismiss-button

This is the source file:

wonder-blocks/__docs__/wonder-blocks-card/accessibility.mdx

Line 29 in d36c492

## Dismiss Button