Add dialog role to Popover (#1420)

Co-authored-by: Mayank <[email protected]>

Author: jasonjwichert

.changeset/odd-bugs-mate.md

@@ -0,0 +1,5 @@
+---
+"@stratakit/mui": patch
+---
+
+Add `role="dialog"` to `Popover`'s `paper` slot.

apps/website/src/content/docs/components/mui/Popover.md

@@ -7,3 +7,15 @@ links:
 ---
 
 ::example{src="mui/Popover.default"}
+
+## StrataKit MUI modifications
+
+- Added [`role="dialog"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/dialog_role) to the `paper` slot.
+
+## ✅ Do
+
+- [Label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/dialog_role#labeling) the **Popover's** `paper` slot using an `aria-labelledby` attribute pointing to a heading inside the popover or the trigger element's `id`.
+
+## 🚫 Don't
+
+- Don't forget to provide an accessible [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/dialog_role#labeling)

examples/mui/Popover.default.tsx

@@ -15,23 +15,18 @@ export default () => {
 	);
 	const [open, setOpen] = React.useState(false);
 	const buttonId = React.useId();
-	const dialogId = React.useId();
 	return (
 		<>
 			<Button
 				id={buttonId}
 				aria-haspopup="dialog"
-				aria-controls={dialogId}
 				aria-expanded={open}
 				onClick={() => setOpen(true)}
 				ref={setAnchorEl}
 			>
 				Open popover
 			</Button>
 			<Popover
-				id={dialogId}
-				role="dialog"
-				aria-labelledby={buttonId}
 				open={open}
 				anchorEl={anchorEl}
 				onClose={() => setOpen(false)}
@@ -42,6 +37,9 @@ export default () => {
 				slotProps={{
 					paper: {
 						className: styles.popover,
+						// note that the paper slot gets role="dialog" from the theme, so labelling by the button
+						// ensures that the dialog is labeled by the button text
+						"aria-labelledby": buttonId,
 					},
 				}}
 			>

packages/mui/src/~createTheme.tsx

@@ -363,7 +363,12 @@ function createTheme() {
 				},
 			},
 			MuiPaper: { defaultProps: { component: Role.div } },
-			MuiPopover: { defaultProps: { component: Role.div } },
+			MuiPopover: {
+				defaultProps: {
+					component: Role.div,
+					slotProps: { paper: { role: "dialog" } },
+				},
+			},
 			MuiRadio: {
 				defaultProps: {
 					component: Role.span,