fix: Accordion/Disclosure fixes from testing #7218

reidbarber · 2024-10-21T23:20:53Z

From testing:

Remove UNSTABLE_ prefix
useDisclosure: add aria-hidden if disclosure is collapsed (avoid dup announcement in Talkback and VO)
S2 Accoridon: add controlled example and code to storybook
S2 Accordion: add active state from designs
v3 Accordion: Add hover state when open
v3 Accordion: Make non-quiet corners not rounded unless focused (DG)
v3 Accordion: HCM needs borders removed
v3 Accordion: fix Command+F not working in v3 accordion (remove display: none)

From review:

v3 Accordion: add background color change for keyboard focus and pressed state
Ignore repeat keydown events

From standup:

Switch keyboard trigger to use onPressStart
Add style props to v3 Disclosure, DisclosurePanel, and DisclosureHeader
Fix bottom border on S2 Disclosure when it has sibling elements and isn't in an Accordion
Fix bottom border on v3 Disclosure when it has sibling elements and isn't in an Accordion

Docs changes:

Disclosure docs: Add render props table to DisclosurePanel in DisclosureGroup
Disclosure docs: Add example to docs showing a button adjacent to heading
Disclosure docs: mention hidden=until-found in features section like hook docs. Also mention that a disclosure can be built with the HTML <details> and <summary> elements but there are styling limitations with things like adjacent buttons
Disclosure docs: Disclosure group example didn't render? Link
v3 Accordion docs: Disclosure, DisclosurePanel, DisclosureHeading should have prop tables if they have props that users can apply
Disclosure docs: Mention that expandedKeys must match the id prop of the Disclosure component
Disclosure docs: Fix anatomy svg size on mobile
useDisclosure docs: When tapping on the disclosure headers, an outline around the header appears.

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

rspbot · 2024-10-21T23:35:02Z

Build successful! 🎉

packages/@react-aria/disclosure/src/useDisclosure.ts

packages/@react-spectrum/s2/src/Accordion.tsx

packages/@react-spectrum/accordion/src/Accordion.tsx

packages/react-aria-components/docs/Disclosure.mdx

packages/react-aria-components/docs/DisclosureGroup.mdx

packages/react-aria-components/test/Disclosure.ssr.test.js

rspbot · 2024-10-22T03:44:19Z

Build successful! 🎉

snowystinger

nitpick on the test, otherwise looks good
tested in chrome

packages/@react-aria/disclosure/test/useDisclosure.test.ts

rspbot · 2024-10-22T04:37:26Z

Build successful! 🎉

rspbot · 2024-10-22T20:42:30Z

Build successful! 🎉

rspbot · 2024-10-22T21:45:47Z

Build successful! 🎉

packages/@react-spectrum/s2/src/Disclosure.tsx

packages/react-aria-components/test/Disclosure.test.js

…sting

rspbot · 2024-10-23T15:24:56Z

Build successful! 🎉

LFDanLu

Tested on Android and desktop, just two small comments

packages/@react-spectrum/s2/stories/Disclosure.stories.tsx

packages/@adobe/spectrum-css-temp/components/accordion/index.css

rspbot · 2024-10-23T18:25:18Z

Build successful! 🎉

* docs: follow-up on accordion docs from testing * updates svgs for mobile, follow up from reviews * prevent outline on header on android * fix examples in useDisclosure on mobile * update focus visible * add focusProps to disclosure group example * use merge props

rspbot · 2024-10-23T22:36:39Z

Build successful! 🎉

rspbot · 2024-10-23T22:36:41Z

## API Changes

react-aria-components

/react-aria-components:UNSTABLE_Disclosure

-UNSTABLE_Disclosure {
-  children?: ReactNode | ((DisclosureRenderProps & {
-    defaultChildren: ReactNode | undefined
-})) => ReactNode
-  className?: string | ((DisclosureRenderProps & {
-    defaultClassName: string | undefined
-})) => string
-  defaultExpanded?: boolean
-  id?: Key
-  isDisabled?: boolean
-  isExpanded?: boolean
-  onExpandedChange?: (boolean) => void
-  slot?: string | null
-  style?: CSSProperties | ((DisclosureRenderProps & {
-    defaultStyle: CSSProperties
-})) => CSSProperties | undefined
-}

/react-aria-components:UNSTABLE_DisclosureGroup

-UNSTABLE_DisclosureGroup {
-  allowsMultipleExpanded?: boolean
-  children?: ReactNode | ((DisclosureGroupRenderProps & {
-    defaultChildren: ReactNode | undefined
-})) => ReactNode
-  className?: string | ((DisclosureGroupRenderProps & {
-    defaultClassName: string | undefined
-})) => string
-  defaultExpandedKeys?: Iterable<Key>
-  expandedKeys?: Iterable<Key>
-  id?: string
-  isDisabled?: boolean
-  onExpandedChange?: (Set<Key>) => any
-  style?: CSSProperties | ((DisclosureGroupRenderProps & {
-    defaultStyle: CSSProperties
-})) => CSSProperties | undefined
-}

/react-aria-components:UNSTABLE_DisclosurePanel

-UNSTABLE_DisclosurePanel {
-  children: ReactNode
-  className?: string | ((DisclosurePanelRenderProps & {
-    defaultClassName: string | undefined
-})) => string
-  id?: string
-  role?: 'group' | 'region' = 'group'
-  style?: CSSProperties | ((DisclosurePanelRenderProps & {
-    defaultStyle: CSSProperties
-})) => CSSProperties | undefined
-}

/react-aria-components:Disclosure

+Disclosure {
+  children?: ReactNode | ((DisclosureRenderProps & {
+    defaultChildren: ReactNode | undefined
+})) => ReactNode
+  className?: string | ((DisclosureRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  defaultExpanded?: boolean
+  id?: Key
+  isDisabled?: boolean
+  isExpanded?: boolean
+  onExpandedChange?: (boolean) => void
+  slot?: string | null
+  style?: CSSProperties | ((DisclosureRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

/react-aria-components:DisclosureGroup

+DisclosureGroup {
+  allowsMultipleExpanded?: boolean
+  children?: ReactNode | ((DisclosureGroupRenderProps & {
+    defaultChildren: ReactNode | undefined
+})) => ReactNode
+  className?: string | ((DisclosureGroupRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  defaultExpandedKeys?: Iterable<Key>
+  expandedKeys?: Iterable<Key>
+  id?: string
+  isDisabled?: boolean
+  onExpandedChange?: (Set<Key>) => any
+  style?: CSSProperties | ((DisclosureGroupRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

/react-aria-components:DisclosurePanel

+DisclosurePanel {
+  children: ReactNode
+  className?: string | ((DisclosurePanelRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  id?: string
+  role?: 'group' | 'region' = 'group'
+  style?: CSSProperties | ((DisclosurePanelRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

@react-spectrum/accordion

/@react-spectrum/accordion:Disclosure

 Disclosure {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
+  bottom?: Responsive<DimensionValue>
   children: React.ReactNode
   defaultExpanded?: boolean
+  end?: Responsive<DimensionValue>
+  flex?: Responsive<string | number | boolean>
+  flexBasis?: Responsive<number | string>
+  flexGrow?: Responsive<number>
+  flexShrink?: Responsive<number>
+  gridArea?: Responsive<string>
+  gridColumn?: Responsive<string>
+  gridColumnEnd?: Responsive<string>
+  gridColumnStart?: Responsive<string>
+  gridRow?: Responsive<string>
+  gridRowEnd?: Responsive<string>
+  gridRowStart?: Responsive<string>
+  height?: Responsive<DimensionValue>
   id?: Key
   isDisabled?: boolean
   isExpanded?: boolean
+  isHidden?: Responsive<boolean>
   isQuiet?: boolean
+  justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
+  left?: Responsive<DimensionValue>
+  margin?: Responsive<DimensionValue>
+  marginBottom?: Responsive<DimensionValue>
+  marginEnd?: Responsive<DimensionValue>
+  marginStart?: Responsive<DimensionValue>
+  marginTop?: Responsive<DimensionValue>
+  marginX?: Responsive<DimensionValue>
+  marginY?: Responsive<DimensionValue>
+  maxHeight?: Responsive<DimensionValue>
+  maxWidth?: Responsive<DimensionValue>
+  minHeight?: Responsive<DimensionValue>
+  minWidth?: Responsive<DimensionValue>
   onExpandedChange?: (boolean) => void
+  order?: Responsive<number>
+  position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
+  right?: Responsive<DimensionValue>
   slot?: string | null
+  start?: Responsive<DimensionValue>
+  top?: Responsive<DimensionValue>
+  width?: Responsive<DimensionValue>
+  zIndex?: Responsive<number>
 }

/@react-spectrum/accordion:DisclosureHeader

 DisclosureHeader {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
+  bottom?: Responsive<DimensionValue>
   children: React.ReactNode
+  end?: Responsive<DimensionValue>
+  flex?: Responsive<string | number | boolean>
+  flexBasis?: Responsive<number | string>
+  flexGrow?: Responsive<number>
+  flexShrink?: Responsive<number>
+  gridArea?: Responsive<string>
+  gridColumn?: Responsive<string>
+  gridColumnEnd?: Responsive<string>
+  gridColumnStart?: Responsive<string>
+  gridRow?: Responsive<string>
+  gridRowEnd?: Responsive<string>
+  gridRowStart?: Responsive<string>
+  height?: Responsive<DimensionValue>
   id?: string
+  isHidden?: Responsive<boolean>
+  justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
+  left?: Responsive<DimensionValue>
   level?: number = 3
+  margin?: Responsive<DimensionValue>
+  marginBottom?: Responsive<DimensionValue>
+  marginEnd?: Responsive<DimensionValue>
+  marginStart?: Responsive<DimensionValue>
+  marginTop?: Responsive<DimensionValue>
+  marginX?: Responsive<DimensionValue>
+  marginY?: Responsive<DimensionValue>
+  maxHeight?: Responsive<DimensionValue>
+  maxWidth?: Responsive<DimensionValue>
+  minHeight?: Responsive<DimensionValue>
+  minWidth?: Responsive<DimensionValue>
+  order?: Responsive<number>
+  position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
+  right?: Responsive<DimensionValue>
+  start?: Responsive<DimensionValue>
+  top?: Responsive<DimensionValue>
+  width?: Responsive<DimensionValue>
+  zIndex?: Responsive<number>
 }

/@react-spectrum/accordion:DisclosurePanel

 DisclosurePanel {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
+  bottom?: Responsive<DimensionValue>
   children: React.ReactNode
+  end?: Responsive<DimensionValue>
+  flex?: Responsive<string | number | boolean>
+  flexBasis?: Responsive<number | string>
+  flexGrow?: Responsive<number>
+  flexShrink?: Responsive<number>
+  gridArea?: Responsive<string>
+  gridColumn?: Responsive<string>
+  gridColumnEnd?: Responsive<string>
+  gridColumnStart?: Responsive<string>
+  gridRow?: Responsive<string>
+  gridRowEnd?: Responsive<string>
+  gridRowStart?: Responsive<string>
+  height?: Responsive<DimensionValue>
   id?: string
+  isHidden?: Responsive<boolean>
+  justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
+  left?: Responsive<DimensionValue>
+  margin?: Responsive<DimensionValue>
+  marginBottom?: Responsive<DimensionValue>
+  marginEnd?: Responsive<DimensionValue>
+  marginStart?: Responsive<DimensionValue>
+  marginTop?: Responsive<DimensionValue>
+  marginX?: Responsive<DimensionValue>
+  marginY?: Responsive<DimensionValue>
+  maxHeight?: Responsive<DimensionValue>
+  maxWidth?: Responsive<DimensionValue>
+  minHeight?: Responsive<DimensionValue>
+  minWidth?: Responsive<DimensionValue>
+  order?: Responsive<number>
+  position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
+  right?: Responsive<DimensionValue>
   role?: 'group' | 'region' = 'group'
+  start?: Responsive<DimensionValue>
+  top?: Responsive<DimensionValue>
+  width?: Responsive<DimensionValue>
+  zIndex?: Responsive<number>
 }

/@react-spectrum/accordion:SpectrumDisclosureProps

 SpectrumDisclosureProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
+  bottom?: Responsive<DimensionValue>
   children: React.ReactNode
   defaultExpanded?: boolean
+  end?: Responsive<DimensionValue>
+  flex?: Responsive<string | number | boolean>
+  flexBasis?: Responsive<number | string>
+  flexGrow?: Responsive<number>
+  flexShrink?: Responsive<number>
+  gridArea?: Responsive<string>
+  gridColumn?: Responsive<string>
+  gridColumnEnd?: Responsive<string>
+  gridColumnStart?: Responsive<string>
+  gridRow?: Responsive<string>
+  gridRowEnd?: Responsive<string>
+  gridRowStart?: Responsive<string>
+  height?: Responsive<DimensionValue>
   id?: Key
   isDisabled?: boolean
   isExpanded?: boolean
+  isHidden?: Responsive<boolean>
   isQuiet?: boolean
+  justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
+  left?: Responsive<DimensionValue>
+  margin?: Responsive<DimensionValue>
+  marginBottom?: Responsive<DimensionValue>
+  marginEnd?: Responsive<DimensionValue>
+  marginStart?: Responsive<DimensionValue>
+  marginTop?: Responsive<DimensionValue>
+  marginX?: Responsive<DimensionValue>
+  marginY?: Responsive<DimensionValue>
+  maxHeight?: Responsive<DimensionValue>
+  maxWidth?: Responsive<DimensionValue>
+  minHeight?: Responsive<DimensionValue>
+  minWidth?: Responsive<DimensionValue>
   onExpandedChange?: (boolean) => void
+  order?: Responsive<number>
+  position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
+  right?: Responsive<DimensionValue>
   slot?: string | null
+  start?: Responsive<DimensionValue>
+  top?: Responsive<DimensionValue>
+  width?: Responsive<DimensionValue>
+  zIndex?: Responsive<number>
 }

/@react-spectrum/accordion:SpectrumDisclosurePanelProps

 SpectrumDisclosurePanelProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
+  bottom?: Responsive<DimensionValue>
   children: React.ReactNode
+  end?: Responsive<DimensionValue>
+  flex?: Responsive<string | number | boolean>
+  flexBasis?: Responsive<number | string>
+  flexGrow?: Responsive<number>
+  flexShrink?: Responsive<number>
+  gridArea?: Responsive<string>
+  gridColumn?: Responsive<string>
+  gridColumnEnd?: Responsive<string>
+  gridColumnStart?: Responsive<string>
+  gridRow?: Responsive<string>
+  gridRowEnd?: Responsive<string>
+  gridRowStart?: Responsive<string>
+  height?: Responsive<DimensionValue>
   id?: string
+  isHidden?: Responsive<boolean>
+  justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
+  left?: Responsive<DimensionValue>
+  margin?: Responsive<DimensionValue>
+  marginBottom?: Responsive<DimensionValue>
+  marginEnd?: Responsive<DimensionValue>
+  marginStart?: Responsive<DimensionValue>
+  marginTop?: Responsive<DimensionValue>
+  marginX?: Responsive<DimensionValue>
+  marginY?: Responsive<DimensionValue>
+  maxHeight?: Responsive<DimensionValue>
+  maxWidth?: Responsive<DimensionValue>
+  minHeight?: Responsive<DimensionValue>
+  minWidth?: Responsive<DimensionValue>
+  order?: Responsive<number>
+  position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
+  right?: Responsive<DimensionValue>
   role?: 'group' | 'region' = 'group'
+  start?: Responsive<DimensionValue>
+  top?: Responsive<DimensionValue>
+  width?: Responsive<DimensionValue>
+  zIndex?: Responsive<number>
 }

/@react-spectrum/accordion:SpectrumDisclosureHeaderProps

 SpectrumDisclosureHeaderProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
+  bottom?: Responsive<DimensionValue>
   children: React.ReactNode
+  end?: Responsive<DimensionValue>
+  flex?: Responsive<string | number | boolean>
+  flexBasis?: Responsive<number | string>
+  flexGrow?: Responsive<number>
+  flexShrink?: Responsive<number>
+  gridArea?: Responsive<string>
+  gridColumn?: Responsive<string>
+  gridColumnEnd?: Responsive<string>
+  gridColumnStart?: Responsive<string>
+  gridRow?: Responsive<string>
+  gridRowEnd?: Responsive<string>
+  gridRowStart?: Responsive<string>
+  height?: Responsive<DimensionValue>
   id?: string
+  isHidden?: Responsive<boolean>
+  justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
+  left?: Responsive<DimensionValue>
   level?: number = 3
+  margin?: Responsive<DimensionValue>
+  marginBottom?: Responsive<DimensionValue>
+  marginEnd?: Responsive<DimensionValue>
+  marginStart?: Responsive<DimensionValue>
+  marginTop?: Responsive<DimensionValue>
+  marginX?: Responsive<DimensionValue>
+  marginY?: Responsive<DimensionValue>
+  maxHeight?: Responsive<DimensionValue>
+  maxWidth?: Responsive<DimensionValue>
+  minHeight?: Responsive<DimensionValue>
+  minWidth?: Responsive<DimensionValue>
+  order?: Responsive<number>
+  position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
+  right?: Responsive<DimensionValue>
+  start?: Responsive<DimensionValue>
+  top?: Responsive<DimensionValue>
+  width?: Responsive<DimensionValue>
+  zIndex?: Responsive<number>
 }

LFDanLu

Some small docs typos but approving for testing if you want to handle them in a follow up

LFDanLu · 2024-10-28T17:37:17Z

packages/react-aria-components/docs/DisclosureGroup.mdx


-
-Custom styled disclosure groups can be difficult to implement in an accessible way with the correct ARIA pattern. When implementing, you must manually ensure that the button and panel are semantically connected via ids for accessibility. `DisclosureGroup` helps with this and other accessibility features while allowing for custom styling.
+Accordions can be built by combing multiple disclosures built in HTML with the [&lt;details&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [&lt;summary&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) HTML element, but this can be difficult to style especially when adding adjacent interactive elements, like buttons, to the disclosure's heading. `Accordion` helps achieve accessible disclosures implemented with the correct ARIA pattern while making custom styling easy. 


Think this is supposed to reference 'DisclosureGroup' instead of accordion

LFDanLu · 2024-10-28T17:40:30Z

packages/@react-spectrum/accordion/docs/Accordion.mdx

 ```
 ## Props

+### Disclosure


Suggested change

### Disclosure

### Accordion

LFDanLu · 2024-10-28T17:41:02Z

packages/@react-spectrum/accordion/docs/Accordion.mdx

 import docs from 'docs:@react-spectrum/accordion';
 import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs';
 import packageData from '@react-spectrum/accordion/package.json';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';


Is this needed?

oh oops that's leftover from trying something else, i can follow-up on it

yihuiliao

approving for testing. i can make a follow-up for the docs stuff that Daniel commented about

reidbarber added 7 commits October 21, 2024 17:47

remove UNSTABLE_ prefix

71ab037

add aria-hidden to collapsed disclosure panels

e776c12

add controlled example to s2 docs

10a0386

update S2 Accordion down state

6f979ed

fix v3 styles (HCM, border-radius, hover when open)

5073f5c

remove display: none in v3

43689d1

lint

64cbce6

snowystinger reviewed Oct 22, 2024

View reviewed changes

reidbarber added 3 commits October 21, 2024 22:09

fix imports

7b1a284

fix v3 focus/down styles

de6de2f

ignore repeat keydown events

015855c

snowystinger previously approved these changes Oct 22, 2024

View reviewed changes

packages/@react-aria/disclosure/test/useDisclosure.test.ts Outdated Show resolved Hide resolved

fix acts

2af1286

reidbarber dismissed snowystinger’s stale review via 2af1286 October 22, 2024 04:28

snowystinger previously approved these changes Oct 22, 2024

View reviewed changes

reidbarber added 3 commits October 22, 2024 13:25

switch onKeyDown to onPressStart

8455326

add style props to v3 Disclosure, DisclosurePanel, and DisclosureHeader

83ba6b4

fix bottom border on individual disclosures

e19b861

reidbarber dismissed snowystinger’s stale review via e19b861 October 22, 2024 20:25

lint

fd02fec

fix same disclosure border top issue in v3

f0b6dbb

snowystinger reviewed Oct 22, 2024

View reviewed changes

packages/@react-spectrum/s2/src/Disclosure.tsx Outdated Show resolved Hide resolved

packages/react-aria-components/test/Disclosure.test.js Show resolved Hide resolved

reidbarber added 3 commits October 23, 2024 10:06

Merge remote-tracking branch 'origin/main' into disclosure-release-te…

a694a7d

…sting

use default case

dc8877e

release keydown event

96771e0

LFDanLu reviewed Oct 23, 2024

View reviewed changes

packages/@react-spectrum/s2/stories/Disclosure.stories.tsx Show resolved Hide resolved

packages/@adobe/spectrum-css-temp/components/accordion/index.css Show resolved Hide resolved

reidbarber added 2 commits October 23, 2024 13:07

fix storybook code output

d80763b

fix v3 quiet HCM

b5a412d

snowystinger previously approved these changes Oct 23, 2024

View reviewed changes

yihuiliao dismissed snowystinger’s stale review via 91c5127 October 23, 2024 22:26

yihuiliao added the in sprint label Oct 24, 2024

LFDanLu approved these changes Oct 28, 2024

View reviewed changes

yihuiliao approved these changes Oct 28, 2024

View reviewed changes

yihuiliao added this pull request to the merge queue Oct 28, 2024

Merged via the queue into main with commit 6607108 Oct 28, 2024
32 checks passed

yihuiliao deleted the disclosure-release-testing branch October 28, 2024 18:38



		Custom styled disclosure groups can be difficult to implement in an accessible way with the correct ARIA pattern. When implementing, you must manually ensure that the button and panel are semantically connected via ids for accessibility. `DisclosureGroup` helps with this and other accessibility features while allowing for custom styling.
		Accordions can be built by combing multiple disclosures built in HTML with the [<details>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [<summary>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) HTML element, but this can be difficult to style especially when adding adjacent interactive elements, like buttons, to the disclosure's heading. `Accordion` helps achieve accessible disclosures implemented with the correct ARIA pattern while making custom styling easy.

fix: Accordion/Disclosure fixes from testing #7218

fix: Accordion/Disclosure fixes from testing #7218

Uh oh!

Conversation

reidbarber commented Oct 21, 2024 • edited by yihuiliao Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Oct 21, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rspbot commented Oct 22, 2024

Uh oh!

snowystinger left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rspbot commented Oct 22, 2024

Uh oh!

rspbot commented Oct 22, 2024

Uh oh!

rspbot commented Oct 22, 2024

Uh oh!

Uh oh!

Uh oh!

rspbot commented Oct 23, 2024

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

rspbot commented Oct 23, 2024

Uh oh!

rspbot commented Oct 23, 2024

Uh oh!

rspbot commented Oct 23, 2024

react-aria-components

/react-aria-components:UNSTABLE_Disclosure

/react-aria-components:UNSTABLE_DisclosureGroup

/react-aria-components:UNSTABLE_DisclosurePanel

/react-aria-components:Disclosure

/react-aria-components:DisclosureGroup

/react-aria-components:DisclosurePanel

@react-spectrum/accordion

/@react-spectrum/accordion:Disclosure

/@react-spectrum/accordion:DisclosureHeader

/@react-spectrum/accordion:DisclosurePanel

/@react-spectrum/accordion:SpectrumDisclosureProps

/@react-spectrum/accordion:SpectrumDisclosurePanelProps

/@react-spectrum/accordion:SpectrumDisclosureHeaderProps

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

LFDanLu Oct 28, 2024

Choose a reason for hiding this comment

Uh oh!

LFDanLu Oct 28, 2024

Choose a reason for hiding this comment

Uh oh!

LFDanLu Oct 28, 2024

Choose a reason for hiding this comment

Uh oh!

yihuiliao Oct 28, 2024

Choose a reason for hiding this comment

Uh oh!

yihuiliao left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

reidbarber commented Oct 21, 2024 •

edited by yihuiliao

Loading