[wb-1797] Address cell color contrast a11y issues

.changeset/wise-actors-peel.md

@@ -0,0 +1,20 @@
+---
+"@khanacademy/wonder-blocks-cell": patch
+---
+
+DetailCell and CompactCell: update styling to address accessibility issues (color contrast and using color as the only visual indicator). Updated styles include:
+
+- General:
+  - Changing the grey used for subtitles
+  - Using `icon.primary` for the right accessory
+- Press state:
+  - Changing the background to `fadedBlue8`
+  - Adding a thin left border when clickable cells are pressed
+- Hover state:
+  - Changing the background to `fadedBlue8`
+- Disabled state:
+  - Changing the focus outline to `action.disabled.default`
+- Selected state (cells with `active=true`):
+  - Adding a thick left border
+  - Changing the text color to `action.primary.active`
+  - The styling no longer changes when a selected cell is hovered or pressed on

__docs__/wonder-blocks-cell/compact-cell-variants.stories.tsx

@@ -0,0 +1,120 @@
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+import type {Meta, StoryObj} from "@storybook/react";
+
+import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
+import {CompactCell} from "@khanacademy/wonder-blocks-cell";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
+import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
+
+/**
+ * The following stories are used to generate the pseudo states for the
+ * CompactCell component. This is only used for visual testing in Chromatic.
+ */
+export default {
+    title: "Packages / Cell / CompactCell / All Variants",
+    parameters: {
+        docs: {
+            autodocs: false,
+        },
+        backgrounds: {
+            default: "offWhite",
+        },
+    },
+} as Meta;
+
+type StoryComponentType = StoryObj<typeof CompactCell>;
+
+const states = [
+    {
+        label: "Default",
+        props: {},
+    },
+    {
+        label: "Disabled",
+        props: {disabled: true},
+    },
+    {
+        label: "Selected using active: true",
+        props: {active: true},
+    },
+];
+
+const defaultProps = {
+    title: "Title for article item",
+    leftAccessory: (
+        <PhosphorIcon icon={IconMappings.playCircle} size="medium" />
+    ),
+    rightAccessory: <PhosphorIcon icon={IconMappings.caretRight} />,
+};
+
+const States = (props: {label: string} & PropsFor<typeof CompactCell>) => {
+    return (
+        <View>
+            <View style={[styles.scenarios]}>
+                {states.map((scenario) => {
+                    return (
+                        <View style={styles.scenario} key={scenario.label}>
+                            <LabelSmall>
+                                {props.label} ({scenario.label})
+                            </LabelSmall>
+                            <CompactCell {...props} {...scenario.props} />
+                        </View>
+                    );
+                })}
+            </View>
+        </View>
+    );
+};
+
+const AllVariants = () => (
+    <View style={{gap: spacing.large_24}}>
+        <States label="Default" {...defaultProps} />
+        <States label="Clickable" {...defaultProps} onClick={() => {}} />
+        <States label="Link" {...defaultProps} href="/" />
+    </View>
+);
+
+export const Default: StoryComponentType = {
+    render: AllVariants,
+};
+
+export const Hover: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {hover: true}},
+};
+
+export const Focus: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {focusVisible: true}},
+};
+
+export const HoverFocus: StoryComponentType = {
+    name: "Hover + Focus",
+    render: AllVariants,
+    parameters: {pseudo: {hover: true, focusVisible: true}},
+};
+
+export const Active: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {active: true}},
+};
+
+const styles = StyleSheet.create({
+    statesContainer: {
+        padding: spacing.medium_16,
+    },
+    scenarios: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.xxxLarge_64,
+        flexWrap: "wrap",
+    },
+    scenario: {
+        gap: spacing.small_12,
+        overflow: "hidden",
+    },
+});

__docs__/wonder-blocks-cell/detail-cell-variants.stories.tsx

@@ -37,7 +37,7 @@ const states = [
         props: {disabled: true},
     },
     {
-        label: "Active",
+        label: "Selected using active: true",
         props: {active: true},
     },
 ];

packages/wonder-blocks-cell/src/components/detail-cell.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelSmall, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 
 import CellCore from "./internal/cell-core";
@@ -94,7 +94,7 @@ const DetailCell = function (props: DetailCellProps): React.ReactElement {
 
 const styles = StyleSheet.create({
     subtitle: {
-        color: color.offBlack64,
+        color: "#6D6F74", // TODO: use token
     },
 
     // This is to override the default padding of the CellCore innerWrapper.

packages/wonder-blocks-cell/src/components/internal/cell-core.tsx

@@ -6,7 +6,12 @@ import type {StyleType} from "@khanacademy/wonder-blocks-core";
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    border,
+    color,
+    semanticColor,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 
 import {CellMeasurements, getHorizontalRuleStyles} from "./common";
 
@@ -118,6 +123,7 @@ function CellInner(props: CellCoreProps): React.ReactElement {
                 // custom styles
                 style,
                 horizontalRuleStyles,
+                active && styles.activeInnerWrapper,
             ]}
         >
             {/* Left accessory */}
@@ -244,6 +250,18 @@ const styles = StyleSheet.create({
             }px`,
         },
     },
+    activeInnerWrapper: {
+        position: "relative",
+        ":before": {
+            content: "''",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            bottom: 0,
+            width: border.width.thick,
+            backgroundColor: semanticColor.surface.emphasis,
+        },
+    },
 
     content: {
         alignSelf: "center",
@@ -264,7 +282,7 @@ const styles = StyleSheet.create({
     accessoryRight: {
         // The right accessory will have this color by default. Unless the
         // accessory element overrides that color internally.
-        color: color.offBlack64,
+        color: semanticColor.icon.primary,
     },
 
     /**
@@ -309,28 +327,42 @@ const styles = StyleSheet.create({
             border: `${spacing.xxxxSmall_2}px solid ${color.blue}`,
             borderRadius: spacing.xxxSmall_4,
         },
+        [":focus-visible[aria-disabled=true]:after" as any]: {
+            borderColor: semanticColor.action.disabled.default,
+        },
 
         // hover + enabled
         [":hover[aria-disabled=false]" as any]: {
-            background: color.offBlack8,
+            background: color.fadedBlue8,
         },
 
         // pressed + enabled
         [":active[aria-disabled=false]" as any]: {
-            background: color.offBlack16,
+            background: color.fadedBlue8,
+            position: "relative",
+            ":before": {
+                content: "''",
+                position: "absolute",
+                top: 0,
+                left: 0,
+                bottom: 0,
+                width: border.width.thin,
+                backgroundColor: semanticColor.surface.emphasis,
+            },
         },
     },
 
     active: {
         background: color.fadedBlue8,
-        color: color.blue,
+        color: semanticColor.action.primary.active,
+        cursor: "default",
 
         [":hover[aria-disabled=false]" as any]: {
-            background: color.fadedBlue16,
+            background: color.fadedBlue8,
         },
 
         [":active[aria-disabled=false]" as any]: {
-            background: color.fadedBlue24,
+            background: color.fadedBlue8,
         },
     },
 

types/aphrodite.d.ts

@@ -68,6 +68,7 @@ declare module "aphrodite" {
         "::placeholder"?: _CSSProperties;
         ":active"?: _CSSProperties;
         ":after"?: _CSSProperties;
+        ":before"?: _CSSProperties;
         ":first-child"?: _CSSProperties;
         ":focus-visible"?: _CSSProperties;
         ":focus:not(:focus-visible)"?: _CSSProperties;