Add collapsible prop to AccordionSection
#2107
Conversation
🦋 Changeset detectedLatest commit: fc71e25 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
Size Change: +99 B (0%) Total Size: 92.3 kB
ℹ️ View Unchanged
|
Codecov Report
Additional details and impacted files@@ Coverage Diff @@
## main #2107 +/- ##
=======================================
Coverage 97.05% 97.05%
=======================================
Files 243 243
Lines 28055 28076 +21
Branches 2447 2373 -74
=======================================
+ Hits 27228 27249 +21
Misses 827 827
Continue to review full report in Codecov by Sentry.
|
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-kkmkvvhlps.chromatic.com/ Chromatic results:
|
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (d72f46d) and published all packages with changesets to npm. You can install the packages in webapp by running: ./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2107"Packages can also be installed manually by running: yarn add @khanacademy/wonder-blocks-<package-name>@PR2107 |
| @@ -20,6 +20,9 @@ type Props = { | |||
| caretPosition: "start" | "end"; | |||
| // Corner roundedness type. | |||
| cornerKind: AccordionCornerKindType; | |||
| // Whether the section is collapsible or not. If false, the header will | |||
| // not be clickable. | |||
There was a problem hiding this comment.
suggestion: maybe it would be good to include that the contents are visible/expanded all the time?
There was a problem hiding this comment.
Ah, I didn't include that here since the content panel is not part of the header. I'll still add it now though.
| @@ -53,6 +53,11 @@ type Props = AriaProps & { | |||
| * value is prioritized. | |||
| */ | |||
| cornerKind?: AccordionCornerKindType; | |||
| /** | |||
| * Whether this section is collapsible. If false, the header will not be | |||
| * clickable, and the section will be stay expanded at all times. | |||
There was a problem hiding this comment.
ah you mention it here! so probably worth copy pasting this in the other file.
Summary
In the event that an accordion section needs to stay open at all times, the user can now use
collapsible={false}to keep it open. This also sets the header button'saria-disabledtotrue, as outlined in the accessibility guidelines.Issue: https://khanacademy.atlassian.net/browse/WB-1585
Test plan
yarn jest packages/wonder-blocks-accordion/src/components/__tests__/accordion-section.test.tsxyarn jest packages/wonder-blocks-accordion/src/components/__tests__/accordion-section-header.test.tsxStorybook