[@mantine/core] Spoiler: Add aria-expanded and aria-controls attr…

…ibutes to show/hide control (#3183)
mantinedev · Sep 21, 2023 · 746a566 · 746a566
1 parent 6cf1409
commit 746a566
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/mantine-core/src/components/Spoiler/Spoiler.module.css b/src/mantine-core/src/components/Spoiler/Spoiler.module.css
@@ -1,5 +1,6 @@
 .root {
   position: relative;
+  margin-bottom: rem(24px);
 }
 
 .content {
@@ -13,4 +14,5 @@
   position: absolute;
   left: 0;
   top: 100%;
+  height: rem(24px);
 }
diff --git a/src/mantine-core/src/components/Spoiler/Spoiler.story.tsx b/src/mantine-core/src/components/Spoiler/Spoiler.story.tsx
@@ -63,8 +63,9 @@ export function Usage() {
         luctus. Donec vitae est id velit condimentum mollis id vel est. Sed eleifend interdum enim,
         a facilisis ex faucibus nec. Morbi vel est et mauris congue ullamcorper. Duis eget velit
         lacinia, consequat neque vel, dignissim massa.
-        <input />
+        <input aria-label="test-input" />
       </Spoiler>
+      <div>Some content after the spoiler</div>
     </div>
   );
 }
diff --git a/src/mantine-core/src/components/Spoiler/Spoiler.tsx b/src/mantine-core/src/components/Spoiler/Spoiler.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useElementSize } from '@mantine/hooks';
+import { useElementSize, useId } from '@mantine/hooks';
 import {
   Box,
   BoxProps,
@@ -78,6 +78,7 @@ export const Spoiler = factory<SpoilerFactory>((_props, ref) => {
     children,
     controlRef,
     transitionDuration,
+    id,
     ...others
   } = props;
 
@@ -94,6 +95,8 @@ export const Spoiler = factory<SpoilerFactory>((_props, ref) => {
     varsResolver,
   });
 
+  const _id = useId(id);
+  const regionId = `${_id}-region`;
   const [show, setShowState] = useState(initialState);
   const { ref: contentRef, height } = useElementSize();
   const spoiler = maxHeight! < height;
@@ -105,18 +108,21 @@ export const Spoiler = factory<SpoilerFactory>((_props, ref) => {
   };
 
   return (
-    <Box {...getStyles('root')} ref={ref} {...others}>
+    <Box {...getStyles('root')} id={_id} ref={ref} {...others}>
       {spoiler && (
         <Anchor
           component="button"
+          type="button"
           ref={controlRef}
           onClick={() => setShowState((opened) => !opened)}
+          aria-expanded={show}
+          aria-controls={regionId}
           {...getStyles('control')}
         >
           {spoilerMoreContent}
         </Anchor>
       )}
-      <div {...getStyles('content', { style: s })} data-reduce-motion>
+      <div {...getStyles('content', { style: s })} data-reduce-motion role="region" id={regionId}>
         <div ref={contentRef}>{children}</div>
       </div>
     </Box>