@carto/ps-react-ui 6.0.0 → 6.1.1

package/src/widgets/wrapper/widget-wrapper.test.tsx

@@ -112,11 +112,41 @@ describe('<Wrapper>', () => {
     )
     const actionBtn = screen.getByTestId('action-btn')
     const bodyContent = screen.getByTestId('body-content')
-    // The action lives inside the AccordionSummary, the body inside AccordionDetails.
-    expect(actionBtn.closest('.MuiAccordionSummary-root')).not.toBeNull()
+    // The action lives in the header row, beside the summary button rather
+    // than inside it (a <button> can't contain another); the body lives in
+    // AccordionDetails.
+    expect(actionBtn.closest('.widget-wrapper-header')).not.toBeNull()
+    expect(actionBtn.closest('.MuiAccordionSummary-root')).toBeNull()
     expect(bodyContent.closest('.MuiAccordionDetails-root')).not.toBeNull()
   })
 
+  it('never nests a button inside another', () => {
+    const { container } = render(
+      withProvider(
+        'wrap-6b',
+        <Wrapper title='t'>
+          <Actions>
+            <button type='button'>A</button>
+          </Actions>
+        </Wrapper>,
+      ),
+    )
+    expect(container.querySelector('button button')).toBeNull()
+  })
+
+  it('clicking the chevron toggles the wrapper', () => {
+    const { container } = render(
+      withProvider('wrap-6c', <Wrapper title='t'>body</Wrapper>),
+    )
+    const summary = screen.getByRole('button', { name: 'Collapse' })
+    expect(summary.getAttribute('aria-expanded')).toBe('true')
+    const chevron = container.querySelector(
+      '.widget-wrapper-header [aria-hidden]',
+    )
+    fireEvent.click(chevron!)
+    expect(summary.getAttribute('aria-expanded')).toBe('false')
+  })
+
   it('shows a LinearProgress at the top when the store reports isFetching', () => {
     render(
       withProvider(

package/src/widgets/wrapper/widget-wrapper.tsx

@@ -54,8 +54,8 @@ export interface WrapperProps {
   variant?: 'outlined' | 'elevation'
   labels?: Partial<WrapperLabels>
   /**
-   * Icon shown at the right edge of the summary row. Accordion rotates it
-   * 180° automatically when the wrapper expands. Default: `ExpandMoreIcon`.
+   * Icon shown at the right edge of the header row, rotated 180° while the
+   * wrapper is expanded. Default: `ExpandMoreIcon`.
    */
   expandIcon?: ComponentType<SvgIconProps>
   iconProps?: SvgIconProps
@@ -117,10 +117,23 @@ export function Wrapper({
 
   const ariaLabel = effectiveCollapsed ? _labels.expand : _labels.collapse
 
+  const expanded = !effectiveCollapsed
+  const toggle = useCallback(
+    () => handleAccordionToggle(null, !expanded),
+    [handleAccordionToggle, expanded],
+  )
+
+  // The header row is the Accordion's first child, which MUI treats as its
+  // summary slot. Only the title sits inside `<AccordionSummary>` — it
+  // renders as a `<button>`, and Actions / Options hold buttons of their
+  // own, which HTML doesn't allow inside another button. They sit next to
+  // it instead, followed by the chevron: a pointer shortcut for the same
+  // toggle, hidden from assistive tech since the summary button already
+  // carries it.
   return (
     <Accordion
       data-collapsed={effectiveCollapsed ? 'true' : undefined}
-      expanded={!effectiveCollapsed}
+      expanded={expanded}
       onChange={handleAccordionToggle}
       disableGutters
       elevation={0}
@@ -131,41 +144,54 @@ export function Wrapper({
         ...sx,
       }}
     >
-      {isFetching ? (
-        <LinearProgress sx={styles.loading} color='primary' />
-      ) : null}
-
-      <AccordionSummary
-        expandIcon={
-          disabled ? null : <ExpandIcon fontSize='small' {...iconProps} />
-        }
-        aria-label={ariaLabel}
-        aria-disabled={disabled || undefined}
-        sx={{
-          ...styles.summary,
-          ...(disabled ? styles.summaryDisabled : null),
-        }}
+      <Box
+        className='widget-wrapper-header'
+        sx={{ ...styles.header, ...(disabled && styles.headerNoIcon) }}
       >
-        <SmartTooltip title={title}>
-          {({ ref }) => (
-            <Box sx={styles.titleCell}>
-              <Typography
-                ref={ref}
-                variant='subtitle1'
-                sx={[
-                  {
-                    textTransform: 'none',
-                  },
-                  styles.titleText,
-                ]}
-              >
-                {title}
-              </Typography>
-            </Box>
-          )}
-        </SmartTooltip>
+        {isFetching ? (
+          <LinearProgress sx={styles.loading} color='primary' />
+        ) : null}
+        <AccordionSummary
+          // The chevron is rendered after Actions below; `null` also keeps
+          // a theme-level default icon out of the summary.
+          expandIcon={null}
+          aria-label={ariaLabel}
+          aria-disabled={disabled || undefined}
+          sx={{
+            ...styles.summary,
+            ...(disabled ? styles.summaryDisabled : null),
+          }}
+        >
+          <SmartTooltip title={title}>
+            {({ ref }) => (
+              <Box sx={styles.titleCell}>
+                <Typography
+                  ref={ref}
+                  variant='subtitle1'
+                  sx={[
+                    {
+                      textTransform: 'none',
+                    },
+                    styles.titleText,
+                  ]}
+                >
+                  {title}
+                </Typography>
+              </Box>
+            )}
+          </SmartTooltip>
+        </AccordionSummary>
         {summarySlots}
-      </AccordionSummary>
+        {disabled ? null : (
+          <Box
+            aria-hidden
+            onClick={toggle}
+            sx={{ ...styles.expandIcon, ...(expanded && styles.expanded) }}
+          >
+            <ExpandIcon fontSize='small' {...iconProps} />
+          </Box>
+        )}
+      </Box>
       <AccordionDetails sx={styles.detail}>{detailsSlots}</AccordionDetails>
     </Accordion>
   )