[wb-1797] Address cell color contrast a11y issues

.changeset/shiny-chicken-speak.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tokens": minor
+---
+
+Adds `fadedOffBlack72` color primitive token and sets the `semanticColor.text.secondary` token to this primitive. The slightly darker gray has better color contrast on a variety of backgrounds, including the fadedBlue8 background

.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 `activeBlue`
+  - 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},
     },
 ];

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

@@ -3,8 +3,13 @@ import {StyleSheet} from "aphrodite";
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 import type {Meta, StoryObj} from "@storybook/react";
 
-import {View} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
+import {
+    border,
+    color,
+    semanticColor,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 
 import {DetailCell} from "@khanacademy/wonder-blocks-cell";
@@ -469,6 +474,82 @@ export const Scenarios = () => {
     );
 };
 
+/**
+ * Custom styling can be applied to the component using the `rootStyle` or
+ * `style` props.
+ */
+export const CustomRootStyle = {
+    args: {
+        title: "Title for article item",
+        subtitle1: "Subtitle for article item",
+        subtitle2: "Subtitle for article item",
+        leftAccessory: (
+            <PhosphorIcon icon={IconMappings.playCircle} size="medium" />
+        ),
+    },
+    render(args: PropsFor<typeof DetailCell>) {
+        return (
+            <View style={{gap: spacing.large_24}}>
+                Active (with rootStyle prop):
+                <DetailCell
+                    {...args}
+                    rootStyle={{borderRadius: border.radius.xLarge_12}}
+                    active={true}
+                />
+                Pressed (with rootStyle prop):
+                <DetailCell
+                    {...args}
+                    rootStyle={{borderRadius: border.radius.xLarge_12}}
+                />
+                Different content heights (with style prop)
+                <View
+                    style={{
+                        display: "grid",
+                        gridTemplateColumns: "1fr 1fr 1fr",
+                        gap: "16px",
+                    }}
+                >
+                    <DetailCell
+                        title="Title"
+                        subtitle1="Subtitle 1"
+                        subtitle2="Subtitle2"
+                        onClick={() => {}}
+                        style={[
+                            {
+                                border: `1px solid ${semanticColor.border.primary}`,
+                            },
+                        ]}
+                        horizontalRule={"none"}
+                    />
+                    <DetailCell
+                        title="Title"
+                        onClick={() => {}}
+                        style={[
+                            args.rootStyle,
+                            {
+                                border: `1px solid ${semanticColor.border.primary}`,
+                            },
+                        ]}
+                        horizontalRule={"none"}
+                    />
+                    <DetailCell
+                        title="Title"
+                        onClick={() => {}}
+                        style={[
+                            args.rootStyle,
+                            {
+                                border: `1px solid ${semanticColor.border.primary}`,
+                            },
+                        ]}
+                        horizontalRule={"none"}
+                    />
+                </View>
+            </View>
+        );
+    },
+    parameters: {pseudo: {active: true}},
+};
+
 const styles = StyleSheet.create({
     example: {
         backgroundColor: color.offWhite,

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 {semanticColor, 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: semanticColor.text.secondary,
     },
 
     // 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,7 +123,11 @@ function CellInner(props: CellCoreProps): React.ReactElement {
                 // custom styles
                 style,
                 horizontalRuleStyles,
+                active && styles.activeInnerWrapper,
             ]}
+            // Set className so we can set styles on the inner wrapper directly
+            // when the clickable element is pressed
+            className="inner-wrapper"
         >
             {/* Left accessory */}
             <LeftAccessory
@@ -235,6 +244,12 @@ const styles = StyleSheet.create({
         padding: `${CellMeasurements.cellPadding.paddingVertical}px ${CellMeasurements.cellPadding.paddingHorizontal}px`,
         flexDirection: "row",
         flex: 1,
+        borderRadius: "inherit",
+        // Hide overflow so that if custom styling applies a border radius, the
+        // left visual indicator for press/active states does not overflow
+        overflow: "hidden",
+        // Make sure inner wrapper is always the same height as parent
+        height: "100%",
 
         // Reduce the padding of the innerWrapper when the focus ring is
         // visible.
@@ -244,6 +259,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 +291,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 +336,52 @@ 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,
         },
+        // press + enabled + not currently selected (active prop: false)
+        // We apply the left bar indicator styles on the inner-wrapper element
+        // instead of the clickable element directly because we need to hide the
+        // left bar overflow when custom cell styles apply a border-radius. We
+        // have overflow: hidden on the inner wrapper instead of the clickable element
+        // because setting it on the clickable element causes issues with existing
+        // cases.
+        [":active[aria-disabled=false]:not([aria-current=true]) .inner-wrapper" as any]:
+            {
+                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: color.activeBlue,
+        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,
         },
     },