@jobber/components 8.26.3 → 8.27.0

package/dist/Select-es.js

@@ -0,0 +1,229 @@
+import React__default, { useState, useRef, useId, useImperativeHandle } from 'react';
+import { BREAKPOINT_SIZES, useWindowDimensions } from '@jobber/hooks';
+import classnames from 'classnames';
+import { S as SelectPrimitive } from './SelectPrimitive-es.js';
+import { a as BottomSheet } from './BottomSheet-es.js';
+import { I as Icon } from './Icon-es.js';
+import { H as HelperText } from './HelperText-es.js';
+import { F as FieldRoot, a as FieldLabel, b as FieldDescription, c as FieldError } from './FieldDescription-es.js';
+
+var styles = {"field":"cWI-uFeNWWw-","inline":"ddkBixixBz4-","control":"_-1-lIAkgLuo-","trigger":"_7rwBeCqTgRY-","small":"_5QeBX5VxX6o-","large":"Pp5nj1nxejw-","label":"M1IjAW17-OE-","hasLabel":"_1rx-nSAJT0U-","sheetListbox":"AVkCcDISAio-","sheetOption":"_35H33txs5QU-","sheetOptionLabel":"uL9j4OZn-3c-","sheetOptionIndicator":"_7NHtDHZnkG8-","sheetGroup":"UQ1tsDd1NFs-","sheetGroupLabel":"_0kBfkWoRI5c-","sheetSeparator":"RPsN9vqlzRw-","spinning":"oOACJmrVDf0-"};
+
+const SheetContext = React__default.createContext(null);
+function useSheetContext() {
+    const context = React__default.useContext(SheetContext);
+    if (!context) {
+        throw new Error("Select sheet parts must render inside the Select sheet");
+    }
+    return context;
+}
+const SheetGroupContext = React__default.createContext(null);
+function SheetOption({ value, children, className, style }) {
+    const { value: selectedValue, onSelect } = useSheetContext();
+    const selected = value === selectedValue;
+    return (React__default.createElement("div", { role: "option", "aria-selected": selected, "data-value": value, tabIndex: -1, className: classnames(styles.sheetOption, className), style: style, onClick: () => onSelect(value) },
+        React__default.createElement("span", { className: styles.sheetOptionLabel }, children),
+        selected && (React__default.createElement("span", { className: styles.sheetOptionIndicator, "aria-hidden": "true" },
+            React__default.createElement(Icon, { name: "checkmark", size: "small" })))));
+}
+function SheetGroup({ children, className, style }) {
+    const labelId = useId();
+    return (React__default.createElement(SheetGroupContext.Provider, { value: { labelId } },
+        React__default.createElement("div", { role: "group", "aria-labelledby": labelId, className: classnames(styles.sheetGroup, className), style: style }, children)));
+}
+function SheetGroupLabel({ children, className, style, }) {
+    const group = React__default.useContext(SheetGroupContext);
+    return (React__default.createElement("div", { id: group === null || group === void 0 ? void 0 : group.labelId, className: classnames(styles.sheetGroupLabel, className), style: style }, children));
+}
+function SheetSeparator({ className, style }) {
+    return (React__default.createElement("hr", { className: classnames(styles.sheetSeparator, className), style: style, "data-testid": "ATL-Select-SheetSeparator" }));
+}
+const selectBottomSheetShell = {
+    Item: SheetOption,
+    Group: SheetGroup,
+    GroupLabel: SheetGroupLabel,
+    Separator: SheetSeparator,
+};
+const OPTION_SELECTOR = '[role="option"]';
+function getOptions(list) {
+    if (!list)
+        return [];
+    return Array.from(list.querySelectorAll(OPTION_SELECTOR));
+}
+function handleListboxKeyDown(event) {
+    var _a, _b, _c, _d;
+    const options = getOptions(event.currentTarget);
+    if (options.length === 0)
+        return;
+    const active = document.activeElement;
+    const currentIndex = active ? options.indexOf(active) : -1;
+    switch (event.key) {
+        case "ArrowDown":
+            event.preventDefault();
+            (_a = options[(currentIndex + 1 + options.length) % options.length]) === null || _a === void 0 ? void 0 : _a.focus();
+            break;
+        case "ArrowUp":
+            event.preventDefault();
+            (_b = options[(currentIndex - 1 + options.length) % options.length]) === null || _b === void 0 ? void 0 : _b.focus();
+            break;
+        case "Home":
+            event.preventDefault();
+            (_c = options[0]) === null || _c === void 0 ? void 0 : _c.focus();
+            break;
+        case "End":
+            event.preventDefault();
+            (_d = options[options.length - 1]) === null || _d === void 0 ? void 0 : _d.focus();
+            break;
+        case "Enter":
+        case " ":
+            event.preventDefault();
+            active === null || active === void 0 ? void 0 : active.click();
+            break;
+    }
+}
+function SelectBottomSheetRoot({ value, onValueChange, onBlur, onFocus, disabled, invalid, renderValue, triggerId, triggerClassName, ariaLabel, children, }) {
+    const [open, setOpen] = useState(false);
+    const listRef = useRef(null);
+    const selectedValue = value !== null && value !== void 0 ? value : undefined;
+    const valueLabel = value != null ? renderValue(value) : undefined;
+    function select(optionValue) {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(optionValue);
+        setOpen(false);
+    }
+    function getInitialFocus() {
+        const options = getOptions(listRef.current);
+        const selected = options.find(option => option.dataset.value === selectedValue);
+        return selected !== null && selected !== void 0 ? selected : options[0];
+    }
+    return (React__default.createElement(SheetContext.Provider, { value: { value: selectedValue, onSelect: select } },
+        React__default.createElement(BottomSheet.Root, { open: open, onOpenChange: setOpen },
+            React__default.createElement(BottomSheet.Trigger, { render: React__default.createElement(SelectPrimitive.FieldTrigger, { id: triggerId, disabled: disabled, onBlur: onBlur, onFocus: onFocus, "data-placeholder": selectedValue ? undefined : "", "data-invalid": invalid ? "" : undefined, "data-popup-open": open ? "" : undefined, className: triggerClassName, valueSlot: React__default.createElement(SelectPrimitive.ValueText, null, valueLabel) }) }),
+            React__default.createElement(BottomSheet.Popup, { initialFocus: getInitialFocus },
+                React__default.createElement(BottomSheet.Content, null,
+                    React__default.createElement("div", { ref: listRef, role: "listbox", "aria-label": ariaLabel, className: styles.sheetListbox, onKeyDown: handleListboxKeyDown }, children))))));
+}
+
+function DropdownItem({ value, children, className, style }) {
+    return (React__default.createElement(SelectPrimitive.Item, { className: className, style: style, value: value },
+        React__default.createElement(SelectPrimitive.ItemText, null, children),
+        React__default.createElement(SelectPrimitive.ItemIndicator, null)));
+}
+function DropdownGroup({ children, className, style }) {
+    return (React__default.createElement(SelectPrimitive.Group, { className: className, style: style }, children));
+}
+function DropdownGroupLabel({ children, className, style, }) {
+    return (React__default.createElement(SelectPrimitive.GroupLabel, { className: className, style: style }, children));
+}
+function DropdownSeparator({ className, style }) {
+    return (React__default.createElement(SelectPrimitive.Separator, { className: className, style: style, orientation: "horizontal" }));
+}
+const selectDropdownShell = {
+    Item: DropdownItem,
+    Group: DropdownGroup,
+    GroupLabel: DropdownGroupLabel,
+    Separator: DropdownSeparator,
+};
+function SelectDropdownRoot({ value, onValueChange, onBlur, onFocus, disabled, renderValue, triggerId, triggerClassName, children, }) {
+    return (React__default.createElement(SelectPrimitive.Root, { value: value !== null && value !== void 0 ? value : null, onValueChange: newValue => {
+            if (typeof newValue === "string")
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+        }, disabled: disabled },
+        React__default.createElement(SelectPrimitive.Trigger, { className: triggerClassName, id: triggerId, onBlur: onBlur, onFocus: onFocus },
+            React__default.createElement(SelectPrimitive.Value, null, selectedValue => typeof selectedValue === "string"
+                ? renderValue(selectedValue)
+                : null)),
+        React__default.createElement(SelectPrimitive.Portal, null,
+            React__default.createElement(SelectPrimitive.Positioner, null,
+                React__default.createElement(SelectPrimitive.Popup, null,
+                    React__default.createElement(SelectPrimitive.List, null, children))))));
+}
+
+const SMALL_SCREEN_BREAKPOINT = BREAKPOINT_SIZES.sm;
+const SelectShellContext = React__default.createContext(null);
+function useSelectShell() {
+    const shell = React__default.useContext(SelectShellContext);
+    if (!shell) {
+        throw new Error("Select.* components must be rendered inside Select");
+    }
+    return shell;
+}
+/**
+ * Resolves the field's `id` (falling back to a generated id, since the id wires
+ * the label and imperative focus) and wires the imperative `focus()` handle to
+ * the trigger element. `name` is intentionally not synthesized: an unset `name`
+ * stays `undefined` so the field is simply excluded from form submission rather
+ * than submitted under a generated `useId()` value.
+ */
+function useSelectField(ref, idProp) {
+    const generatedId = useId();
+    const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            var _a;
+            if (typeof document !== "undefined") {
+                (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        },
+    }), [id]);
+    return { id };
+}
+/**
+ * A prop-driven, labelled Select. On small web screens the options open in a
+ * `BottomSheet` instead of an anchored dropdown.
+ */
+function Select({ label, description, error, invalid, value, onValueChange, onBlur, onFocus, renderValue, name, id: idProp, ref, disabled, size, inline, children, }) {
+    const { id } = useSelectField(ref, idProp);
+    const renderSelectedValue = renderValue !== null && renderValue !== void 0 ? renderValue : capitalize;
+    const hasError = Boolean(error);
+    const isInvalid = hasError || Boolean(invalid);
+    const showDescription = !inline && Boolean(description) && !hasError;
+    const showError = !inline && hasError;
+    const { width } = useWindowDimensions();
+    const isBottomSheet = width !== undefined && width <= SMALL_SCREEN_BREAKPOINT;
+    const shell = isBottomSheet ? selectBottomSheetShell : selectDropdownShell;
+    const ShellRoot = isBottomSheet ? SelectBottomSheetRoot : SelectDropdownRoot;
+    return (React__default.createElement(FieldRoot, { className: classnames(styles.field, inline && styles.inline, size && styles[size], label && styles.hasLabel), disabled: disabled, invalid: isInvalid || undefined, name: name },
+        React__default.createElement("div", { className: styles.control },
+            label && (React__default.createElement(FieldLabel, { className: styles.label, htmlFor: id }, label)),
+            React__default.createElement(SelectShellContext.Provider, { value: shell },
+                React__default.createElement(ShellRoot, { value: value, onValueChange: onValueChange, onBlur: onBlur, onFocus: onFocus, disabled: disabled, invalid: isInvalid, renderValue: renderSelectedValue, triggerId: id, triggerClassName: styles.trigger, ariaLabel: label }, children))),
+        showDescription && (React__default.createElement(FieldDescription, { render: React__default.createElement(HelperText, { message: description }) })),
+        showError && (React__default.createElement(FieldError, { match: true, render: React__default.createElement(HelperText, { message: error, status: "critical" }) }))));
+}
+/**
+ * Default value renderer for the closed trigger: capitalizes the value (e.g.
+ * `"active"` → `"Active"`). Consumers that need a different display pass
+ * `renderValue`.
+ */
+function capitalize(value) {
+    return value.length > 0
+        ? value.charAt(0).toUpperCase() + value.slice(1)
+        : value;
+}
+function SelectItem(props) {
+    const { Item } = useSelectShell();
+    return React__default.createElement(Item, Object.assign({}, props));
+}
+function SelectGroup(props) {
+    const { Group } = useSelectShell();
+    return React__default.createElement(Group, Object.assign({}, props));
+}
+function SelectGroupLabel(props) {
+    const { GroupLabel } = useSelectShell();
+    return React__default.createElement(GroupLabel, Object.assign({}, props));
+}
+function SelectSeparator(props) {
+    const { Separator } = useSelectShell();
+    return React__default.createElement(Separator, Object.assign({}, props));
+}
+Select.displayName = "Select";
+SelectItem.displayName = "Select.Item";
+SelectGroup.displayName = "Select.Group";
+SelectGroupLabel.displayName = "Select.GroupLabel";
+SelectSeparator.displayName = "Select.Separator";
+Select.Item = SelectItem;
+Select.Group = SelectGroup;
+Select.GroupLabel = SelectGroupLabel;
+Select.Separator = SelectSeparator;
+
+export { Select as S };

package/dist/SelectPrimitive-cjs.js

@@ -22,19 +22,32 @@ function mergeClassName(baseClassName, className) {
  */
 const SELECT_OFFSET = 6;
 // ─── Trigger ─────────────────────────────────────────────────────────────────
+function TriggerChevron() {
+    return (React.createElement("span", { "aria-hidden": "true", className: styles.iconWrapper },
+        React.createElement("span", { className: styles.iconRotate },
+            React.createElement(Icon.Icon, { color: "greyBlue", name: "arrowDown", size: "base" }))));
+}
+function SelectPrimitiveFieldTrigger(_a) {
+    var { valueSlot, className } = _a, props = tslib_es6.__rest(_a, ["valueSlot", "className"]);
+    return (React.createElement("button", Object.assign({ type: "button", className: classnames(styles.trigger, className) }, props),
+        valueSlot,
+        React.createElement(TriggerChevron, null)));
+}
 function SelectPrimitiveTrigger(_a) {
     var { className, children } = _a, props = tslib_es6.__rest(_a, ["className", "children"]);
     return (React.createElement(SelectGroupLabel.SelectTrigger, Object.assign({ className: mergeClassName(styles.trigger, className) }, props),
         children,
-        React.createElement("span", { "aria-hidden": "true", className: styles.iconWrapper },
-            React.createElement("span", { className: styles.iconRotate },
-                React.createElement(Icon.Icon, { color: "greyBlue", name: "arrowDown", size: "base" })))));
+        React.createElement(TriggerChevron, null)));
 }
 // ─── Value ───────────────────────────────────────────────────────────────────
 function SelectPrimitiveValue(_a) {
     var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
     return (React.createElement(SelectGroupLabel.SelectValue, Object.assign({ className: mergeClassName(styles.value, className) }, props)));
 }
+function SelectPrimitiveValueText(_a) {
+    var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
+    return React.createElement("span", Object.assign({ className: classnames(styles.value, className) }, props));
+}
 // ─── Positioner ───────────────────────────────────────────────────────────────
 function SelectPrimitivePositioner(_a) {
     var { className, sideOffset = SELECT_OFFSET, alignItemWithTrigger = false } = _a, props = tslib_es6.__rest(_a, ["className", "sideOffset", "alignItemWithTrigger"]);
@@ -82,7 +95,9 @@ function SelectPrimitiveSeparator(_a) {
 }
 // ─── Display names ───────────────────────────────────────────────────────────
 SelectPrimitiveTrigger.displayName = "SelectPrimitive.Trigger";
+SelectPrimitiveFieldTrigger.displayName = "SelectPrimitive.FieldTrigger";
 SelectPrimitiveValue.displayName = "SelectPrimitive.Value";
+SelectPrimitiveValueText.displayName = "SelectPrimitive.ValueText";
 SelectPrimitivePositioner.displayName = "SelectPrimitive.Positioner";
 SelectPrimitivePopup.displayName = "SelectPrimitive.Popup";
 SelectPrimitiveList.displayName = "SelectPrimitive.List";
@@ -96,7 +111,9 @@ SelectPrimitiveSeparator.displayName = "SelectPrimitive.Separator";
 const SelectPrimitive = {
     Root: SelectGroupLabel.SelectRoot,
     Trigger: SelectPrimitiveTrigger,
+    FieldTrigger: SelectPrimitiveFieldTrigger,
     Value: SelectPrimitiveValue,
+    ValueText: SelectPrimitiveValueText,
     Portal: SelectGroupLabel.SelectPortal,
     Positioner: SelectPrimitivePositioner,
     Popup: SelectPrimitivePopup,

package/dist/SelectPrimitive-es.js

@@ -20,19 +20,32 @@ function mergeClassName(baseClassName, className) {
  */
 const SELECT_OFFSET = 6;
 // ─── Trigger ─────────────────────────────────────────────────────────────────
+function TriggerChevron() {
+    return (React__default.createElement("span", { "aria-hidden": "true", className: styles.iconWrapper },
+        React__default.createElement("span", { className: styles.iconRotate },
+            React__default.createElement(Icon, { color: "greyBlue", name: "arrowDown", size: "base" }))));
+}
+function SelectPrimitiveFieldTrigger(_a) {
+    var { valueSlot, className } = _a, props = __rest(_a, ["valueSlot", "className"]);
+    return (React__default.createElement("button", Object.assign({ type: "button", className: classnames(styles.trigger, className) }, props),
+        valueSlot,
+        React__default.createElement(TriggerChevron, null)));
+}
 function SelectPrimitiveTrigger(_a) {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
     return (React__default.createElement(SelectTrigger, Object.assign({ className: mergeClassName(styles.trigger, className) }, props),
         children,
-        React__default.createElement("span", { "aria-hidden": "true", className: styles.iconWrapper },
-            React__default.createElement("span", { className: styles.iconRotate },
-                React__default.createElement(Icon, { color: "greyBlue", name: "arrowDown", size: "base" })))));
+        React__default.createElement(TriggerChevron, null)));
 }
 // ─── Value ───────────────────────────────────────────────────────────────────
 function SelectPrimitiveValue(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (React__default.createElement(SelectValue, Object.assign({ className: mergeClassName(styles.value, className) }, props)));
 }
+function SelectPrimitiveValueText(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return React__default.createElement("span", Object.assign({ className: classnames(styles.value, className) }, props));
+}
 // ─── Positioner ───────────────────────────────────────────────────────────────
 function SelectPrimitivePositioner(_a) {
     var { className, sideOffset = SELECT_OFFSET, alignItemWithTrigger = false } = _a, props = __rest(_a, ["className", "sideOffset", "alignItemWithTrigger"]);
@@ -80,7 +93,9 @@ function SelectPrimitiveSeparator(_a) {
 }
 // ─── Display names ───────────────────────────────────────────────────────────
 SelectPrimitiveTrigger.displayName = "SelectPrimitive.Trigger";
+SelectPrimitiveFieldTrigger.displayName = "SelectPrimitive.FieldTrigger";
 SelectPrimitiveValue.displayName = "SelectPrimitive.Value";
+SelectPrimitiveValueText.displayName = "SelectPrimitive.ValueText";
 SelectPrimitivePositioner.displayName = "SelectPrimitive.Positioner";
 SelectPrimitivePopup.displayName = "SelectPrimitive.Popup";
 SelectPrimitiveList.displayName = "SelectPrimitive.List";
@@ -94,7 +109,9 @@ SelectPrimitiveSeparator.displayName = "SelectPrimitive.Separator";
 const SelectPrimitive = {
     Root: SelectRoot,
     Trigger: SelectPrimitiveTrigger,
+    FieldTrigger: SelectPrimitiveFieldTrigger,
     Value: SelectPrimitiveValue,
+    ValueText: SelectPrimitiveValueText,
     Portal: SelectPortal,
     Positioner: SelectPrimitivePositioner,
     Popup: SelectPrimitivePopup,

package/dist/docs/Dialog/Dialog.md

@@ -2,10 +2,9 @@
 
 ## Summary
 
-The dialog displays content in a layer above the page, focusing the user on a
-single task or decision. It is activated by an interactive element such as a
-button or icon button. On large screens it appears as a centered modal; on small
-screens it appears as a sheet anchored to the bottom of the screen.
+Dialog is a modal surface that presents a single, focused task or decision above
+the page. On large screens it appears as a centered modal; on small screens it
+appears as a sheet anchored to the bottom of the screen.
 
 ## Anatomy
 
@@ -23,7 +22,7 @@ screens it appears as a sheet anchored to the bottom of the screen.
 
 ## Behavior
 
-#### Opening and closing the dialog
+#### Opening and closing
 
 The dialog opens when:
 
@@ -40,14 +39,6 @@ The dialog closes when:
 An `alertdialog` is the exception: it ignores outside and backdrop dismissal, so
 the user must choose an action to resolve it. ESC still closes it.
 
-#### Width
-
-Dialog width defaults to `base` (720px). It can be set to `small` (440px),
-`large` (1032px), or `fullScreen`. These are max widths — the dialog narrows to
-fit smaller viewports. `fullScreen` fills the viewport on large screens (squared
-corners) and becomes a full-height sheet on small screens. See [Size](#size) for
-when to use each.
-
 #### Scrolling
 
 The `Dialog.Body` is the default scroll region, while the header and footer stay
@@ -55,12 +46,11 @@ pinned as the content scrolls. Which region scrolls is decided by composition,
 not a prop — wrap parts in a `Dialog.ScrollArea` when a header or footer should
 scroll with the content instead of pinning.
 
-#### Focus
+#### Nested dialog
 
-While the dialog is open, focus is trapped inside it. When it closes, focus
-returns to the trigger. Focus can be directed elsewhere when the trigger is
-removed while the dialog is open (for example, a "Create…" action whose trigger
-is replaced by a card on save).
+A dialog can open a second dialog, which layers on top of the first. The
+underlying dialog stays in place behind the new overlay and returns when the top
+one closes.
 
 #### Small screens
 
@@ -114,9 +104,72 @@ instead.
 ## Content Guidelines
 
 These build on the general [Voice & tone](../voice-and-tone/voice-and-tone.md) and
-[Formatting](../formatting/formatting.md) guidelines. A dialog interrupts the user, so
-every word should earn its place: name the task, state the outcome, and give a
-clear way out.
+[Formatting](../formatting/formatting.md) guidelines.
+
+A dialog interrupts the user, so every word should earn its place:
+name the task, state the outcome, and give a clear way out.
+
+#### Title
+
+The title names the task as opposed to the component. Use verbs when the
+dialog is asking the user to actually do something. Be specific. Use a noun
+when you're presenting information. Don't phrase confirmation requests as questions.
+
+| Do                 | Don't                                        |
+| ------------------ | -------------------------------------------- |
+| Delete client      | Are you sure you want to delete this client? |
+| Edit job details   | Job Editor                                   |
+| Assign team member | Assign                                       |
+| Send invoice       | Send                                         |
+| Client information | Info                                         |
+
+#### Body
+
+Body copy needs to expand on the title by providing what the title can't. It shouldn't
+repeat the title and should provide useful information such as explaining the impact of
+any action the user might be taking. For a routine task, one short sentence is often enough.
+
+| Do                                             | Don't                                                          |
+| ---------------------------------------------- | -------------------------------------------------------------- |
+| This will remove the discount from the invoice | This will let you remove the discount that's currently applied |
+
+#### Actions
+
+Primary action lables will need to lead with a verb and match the action taking place.
+They shouldn't be generic such as "Confirm" or "Yes". The action needs to be clearly
+intentional. Also, remember that buttons are title case.
+
+| Do                  | Don't   |
+| ------------------- | ------- |
+| Cancel Subscription | Confirm |
+| Sync QuickBooks     | Next    |
+| Delete 3 Files      | Delete  |
+
+#### Alert dialogs
+
+As `alertdialog` can't be dismissed by clicking outside, the way out needs to be clear. We should not be reliant on
+users pressing ESC. When relevant, cancel actions need to be considered alonsgside confirmation actions and
+should be just as easy to find. Ideally via secondary CTAs.
+
+## Do's and Don'ts
+
+Here are some general rules to follow when working with the dialog component:
+
+#### Do:
+
+* ✅ Give every dialog a clear title that names the task
+* ✅ Keep a dialog focused on a single task or decision
+* ✅ Use an alert dialog for destructive or irreversible actions, and always
+  offer a way to cancel
+* ✅ Lead with a short, action-oriented primary button label
+* ✅ Choose the size that comfortably fits the content
+
+#### Don't:
+
+* ❌ Combine multiple unrelated tasks in one dialog
+* ❌ Use a dialog for long or multi-step flows that belong on their own page
+* ❌ Use a nested dialog unless the flow genuinely requires it
+* ❌ Remove the ability to dismiss without offering an explicit action to leave
 
 ## Accessibility