Axo dialog design updates & aria checks

Author: jamiebuilds-signal

.eslint/rules/file-suffix.js

@@ -150,6 +150,7 @@ const DOM_PACKAGES = new Set([
   'blob-util',
   'blueimp-load-image',
   'copy-text-to-clipboard',
+  'dom-accessibility-api',
   'fabric',
   'focus-trap-react',
   'radix-ui',

ACKNOWLEDGMENTS.md

@@ -3643,6 +3643,30 @@ Signal Desktop makes use of the following open source projects.
     TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
     SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+## dom-accessibility-api
+
+    MIT License
+
+    Copyright (c) 2020 Sebastian Silbermann
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.
+
 ## emoji-datasource
 
     The MIT License (MIT)

package.json

@@ -156,6 +156,7 @@
     "credit-card-type": "10.0.2",
     "dashdash": "2.0.0",
     "direction": "1.0.4",
+    "dom-accessibility-api": "0.7.0",
     "emoji-datasource": "16.0.0",
     "emoji-datasource-apple": "16.0.0",
     "emoji-regex": "10.4.0",

pnpm-lock.yaml

@@ -277,7 +277,7 @@
   --type-font-weight-title-small: var(--font-weight-semibold);
   --type-font-weight-body-large: var(--font-weight-regular);
   --type-font-weight-body-medium: var(--font-weight-regular);
-  --type-font-weight-body-small: var(--font-weight-medium);
+  --type-font-weight-body-small: var(--font-weight-regular);
   --type-font-weight-caption: var(--font-weight-regular);
   /* letter-spacing */
   --tracking-*: initial; /* reset defaults */

stylesheets/tailwind-config.css

@@ -78,11 +78,7 @@ function CardButton(props: {
 }) {
   return (
     <AriaClickable.SubWidget>
-      <AxoButton.Root
-        variant={props.variant}
-        size="medium"
-        onClick={props.onClick}
-      >
+      <AxoButton.Root variant={props.variant} size="md" onClick={props.onClick}>
         {props.children}
       </AxoButton.Root>
     </AriaClickable.SubWidget>

ts/axo/AriaClickable.dom.stories.tsx

@@ -20,7 +20,12 @@ const EXAMPLE_TITLE_LONG = (
   </>
 );
 
-const EXAMPLE_DESCRIPTION = <>Exporting chat</>;
+const EXAMPLE_DESCRIPTION = (
+  <>
+    Your chat will be downloaded in the background. You can continue to use
+    Signal during this process.
+  </>
+);
 const EXAMPLE_DESCRIPTION_LONG = (
   <>
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, amet aut
@@ -72,12 +77,11 @@ function Template(props: {
   return (
     <AxoAlertDialog.Root open={open} onOpenChange={setOpen}>
       <AxoAlertDialog.Trigger>
-        <AxoButton.Root variant="subtle-primary" size="medium">
+        <AxoButton.Root variant="subtle-primary" size="md">
           Open
         </AxoButton.Root>
       </AxoAlertDialog.Trigger>
       <AxoAlertDialog.Content
-        size="md"
         escape={
           props.requireExplicitChoice
             ? 'cancel-is-destructive'

ts/axo/AxoAlertDialog.dom.stories.tsx

@@ -12,7 +12,7 @@ import type { AxoSymbol } from './AxoSymbol.dom.js';
 
 const Namespace = 'AxoAlertDialog';
 
-const { useContentEscapeBehavior, useContentSize } = AxoBaseDialog;
+const { useContentEscapeBehavior } = AxoBaseDialog;
 
 /**
  * Displays a menu located at the pointer, triggered by a right click or a long press.
@@ -74,30 +74,29 @@ export namespace AxoAlertDialog {
    * --------------------------------
    */
 
-  export type ContentSize = AxoBaseDialog.ContentSize;
   export type ContentEscape = AxoBaseDialog.ContentEscape;
-  export type ContentProps = AxoBaseDialog.ContentProps;
+  export type ContentProps = Readonly<{
+    escape: ContentEscape;
+    children: ReactNode;
+  }>;
 
   export const Content: FC<ContentProps> = memo(props => {
-    const sizeConfig = AxoBaseDialog.ContentSizes[props.size];
     const handleContentEscapeEvent = useContentEscapeBehavior(props.escape);
     return (
-      <AxoBaseDialog.ContentSizeProvider value={props.size}>
-        <AlertDialog.Portal>
-          <AlertDialog.Overlay className={AxoBaseDialog.overlayStyles}>
-            <AlertDialog.Content
-              onEscapeKeyDown={handleContentEscapeEvent}
-              className={AxoBaseDialog.contentStyles}
-              style={{
-                minWidth: sizeConfig.minWidth,
-                width: sizeConfig.width,
-              }}
-            >
-              {props.children}
-            </AlertDialog.Content>
-          </AlertDialog.Overlay>
-        </AlertDialog.Portal>
-      </AxoBaseDialog.ContentSizeProvider>
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay className={AxoBaseDialog.overlayStyles}>
+          <AlertDialog.Content
+            onEscapeKeyDown={handleContentEscapeEvent}
+            className={AxoBaseDialog.contentStyles}
+            style={{
+              minWidth: 300,
+              width: 300,
+            }}
+          >
+            {props.children}
+          </AlertDialog.Content>
+        </AlertDialog.Overlay>
+      </AlertDialog.Portal>
     );
   });
 
@@ -113,14 +112,8 @@ export namespace AxoAlertDialog {
   }>;
 
   export const Body: FC<BodyProps> = memo(props => {
-    const contentSize = useContentSize();
-    const contentSizeConfig = AxoBaseDialog.ContentSizes[contentSize];
-
     return (
-      <AxoScrollArea.Root
-        maxHeight={contentSizeConfig.maxBodyHeight}
-        scrollbarWidth="none"
-      >
+      <AxoScrollArea.Root maxHeight={440} scrollbarWidth="none">
         <AxoScrollArea.Hint edge="bottom" />
         <AxoScrollArea.Viewport>
           <AxoScrollArea.Content>
@@ -208,7 +201,7 @@ export namespace AxoAlertDialog {
   export const Cancel: FC<CancelProps> = memo(props => {
     return (
       <AlertDialog.Cancel asChild>
-        <AxoButton.Root variant="secondary" size="medium" width="fill">
+        <AxoButton.Root variant="secondary" size="md" width="full">
           {props.children}
         </AxoButton.Root>
       </AlertDialog.Cancel>
@@ -239,8 +232,8 @@ export namespace AxoAlertDialog {
           variant={props.variant}
           symbol={props.symbol}
           arrow={props.arrow}
-          size="medium"
-          width="fill"
+          size="md"
+          width="full"
         >
           {props.children}
         </AxoButton.Root>

ts/axo/AxoAlertDialog.dom.tsx

@@ -145,23 +145,23 @@ const LONG_TEXT = (
 
 function Fit(props: { longText?: boolean }) {
   return (
-    <AxoButton.Root variant="primary" size="medium" width="fit">
+    <AxoButton.Root variant="primary" size="md" width="fit">
       Fit {props.longText && LONG_TEXT}
     </AxoButton.Root>
   );
 }
 
 function Grow(props: { longText?: boolean }) {
   return (
-    <AxoButton.Root variant="affirmative" size="medium" width="grow">
+    <AxoButton.Root variant="affirmative" size="md" width="grow">
       Grow {props.longText && LONG_TEXT}
     </AxoButton.Root>
   );
 }
 
-function Fill(props: { longText?: boolean }) {
+function Full(props: { longText?: boolean }) {
   return (
-    <AxoButton.Root variant="destructive" size="medium" width="fill">
+    <AxoButton.Root variant="destructive" size="md" width="full">
       Fill {props.longText && LONG_TEXT}
     </AxoButton.Root>
   );
@@ -180,7 +180,7 @@ function WidthTestTemplate(props: {
         <>
           <Fit />
           <Grow />
-          <Fill />
+          <Full />
         </>
       )}
 
@@ -239,26 +239,26 @@ function WidthTestTemplate(props: {
       <p>Fill</p>
       {props.children(
         <>
-          <Fill />
-          <Fill />
-          <Fill />
+          <Full />
+          <Full />
+          <Full />
         </>
       )}
-      <p>Fill: With long text</p>
+      <p>Full: With long text</p>
       {props.children(
         <>
-          <Fill longText />
-          <Fill longText />
-          <Fill longText />
+          <Full longText />
+          <Full longText />
+          <Full longText />
         </>
       )}
 
-      <p>Fill: With mixed length texts</p>
+      <p>Full: With mixed length texts</p>
       {props.children(
         <>
-          <Fill />
-          <Fill />
-          <Fill longText />
+          <Full />
+          <Full />
+          <Full longText />
         </>
       )}
     </div>

ts/axo/AxoButton.dom.stories.tsx

@@ -128,9 +128,9 @@ const AxoButtonVariants = {
 };
 
 const AxoButtonSizes = {
-  large: tw('min-w-16 px-4 py-2 type-body-medium font-medium'),
-  medium: tw('min-w-14 px-3 py-1.5 type-body-medium font-medium'),
-  small: tw('min-w-12 px-2 py-1 type-body-small font-medium'),
+  lg: tw('min-w-16 px-4 py-2 type-body-medium font-medium'),
+  md: tw('min-w-14 px-3 py-1.5 type-body-medium font-medium'),
+  sm: tw('min-w-12 px-2 py-1 type-body-small font-medium'),
 } as const satisfies Record<string, TailwindStyles>;
 
 type BaseButtonAttrs = Omit<
@@ -171,9 +171,9 @@ const AxoButtonSpinnerSizes: Record<
   AxoButtonSize,
   { size: number; strokeWidth: number }
 > = {
-  large: { size: 20, strokeWidth: 2 },
-  medium: { size: 20, strokeWidth: 2 },
-  small: { size: 16, strokeWidth: 1.5 },
+  lg: { size: 20, strokeWidth: 2 },
+  md: { size: 20, strokeWidth: 2 },
+  sm: { size: 16, strokeWidth: 1.5 },
 };
 
 type ExperimentalButtonSpinnerProps = Readonly<{
@@ -204,15 +204,15 @@ export namespace AxoButton {
   export type Variant = AxoButtonVariant;
   export type Size = AxoButtonSize;
 
-  export type Width = 'fit' | 'grow' | 'fill';
+  export type Width = 'fit' | 'grow' | 'full';
 
   const Widths: Record<Width, TailwindStyles> = {
     /* Always try to fit to the content of the button */
     fit: tw(''),
     /* Allow the button to grow within a flex container */
     grow: tw('grow'),
     /* Always try to fill the available space */
-    fill: tw('w-full'),
+    full: tw('w-full'),
   };
 
   export type RootProps = BaseButtonAttrs &