Split TokenChip into word and inert variants; convert PhraseBox to label

- Extract `InertTokenChip` / `MemoizedInertTokenChip` for non-word tokens, removing the punctuation branch from `TokenChip` so it only handles words
- Convert `PhraseBox` from a `<button>` to a `<label>` so clicking anywhere on the phrase focuses the first gloss input natively
- Rename prop `onClick` → `onFocusPhrase` on `PhraseBox` to reflect the narrowed trigger (gloss-input focus only, not arbitrary clicks)
- Update `ContinuousView` and `SegmentView` to import `MemoizedInertTokenChip` and pass `onFocusPhrase` instead of `onClick`
- Update all test mocks and assertions to match the new component shapes

Author: alex-rawlings-yyc

src/__tests__/components/ContinuousView.test.tsx

@@ -25,23 +25,30 @@ jest.mock('../../components/GlossStore', () => ({
 /** Render options that wrap every test render in a `GlossStoreProvider`. */
 const withGlossStore = { wrapper: GlossStoreProvider };
 
+jest.mock('../../components/TokenChip', () => ({
+  __esModule: true,
+  MemoizedInertTokenChip({ token }: Readonly<{ token: Token }>) {
+    return <span>{token.surfaceText}</span>;
+  },
+}));
+
 jest.mock('../../components/PhraseBox', () => ({
   __esModule: true,
   default: ({
-    isFocused = false,
     index,
-    onClick,
+    isFocused = false,
+    onFocusPhrase,
     tokens,
   }: Readonly<{
-    isFocused: boolean;
     index?: number;
-    onClick?: (index?: number) => void;
+    isFocused: boolean;
+    onFocusPhrase?: (index?: number) => void;
     tokens: Token[];
   }>) => (
     <button
       data-focus-state={isFocused ? 'focused' : 'default'}
       data-phrase-box="true"
-      onClick={() => onClick?.(index)}
+      onClick={() => onFocusPhrase?.(index)}
       type="button"
     >
       {tokens.map((t) => (
@@ -51,12 +58,6 @@ jest.mock('../../components/PhraseBox', () => ({
   ),
 }));
 
-jest.mock('../../components/TokenChip', () => ({
-  __esModule: true,
-  default: ({ token }: { token: Token }) => <span>{token.surfaceText}</span>,
-  TokenChip: ({ token }: { token: Token }) => <span>{token.surfaceText}</span>,
-}));
-
 // ---------------------------------------------------------------------------
 // Test fixtures
 // ---------------------------------------------------------------------------
@@ -301,8 +302,8 @@ function makeLargeBook(count: number): Book {
         {
           id: `large-tok-${i}`,
           surfaceText: `word${i}`,
-          writingSystem: 'en' as const,
-          type: 'word' as const,
+          writingSystem: 'en',
+          type: 'word',
           charStart: 0,
           charEnd: String(`word${i}`).length,
         },
@@ -322,14 +323,14 @@ const scrollIntoViewMock = jest.fn();
  * @returns An object containing all required ContinuousView props set to no-op stubs.
  */
 function requiredProps(): {
-  activeVerse: ScriptureRef;
   activePhraseIndex: undefined;
+  activeVerse: ScriptureRef;
   onFocusPhraseIndexChange: jest.Mock;
   onVerseChange: jest.Mock;
 } {
   return {
-    activeVerse: { book: 'GEN', chapter: 1, verse: 1 },
     activePhraseIndex: undefined,
+    activeVerse: { book: 'GEN', chapter: 1, verse: 1 },
     onFocusPhraseIndexChange: jest.fn(),
     onVerseChange: jest.fn(),
   };
@@ -375,11 +376,11 @@ describe('ContinuousView initial render', () => {
     expect(screen.getByRole('button', { name: 'Next token' })).toBeInTheDocument();
   });
 
-  it('renders a non-word token via TokenChip within the strip', () => {
+  it('renders a non-word token via InertTokenChip within the strip', () => {
     // makeMixedBook: GEN 1:1 has a word token; GEN 1:2 has a punctuation token
     render(<ContinuousView book={makeMixedBook()} {...requiredProps()} />, withGlossStore);
 
-    // Both the word chip ("In") and the punctuation chip (".") must appear
+    // Both the word chip ("In") and the inert chip (".") must appear
     expect(screen.getByText('In')).toBeInTheDocument();
     expect(screen.getByText('.')).toBeInTheDocument();
   });

src/__tests__/components/PhraseBox.test.tsx

@@ -101,7 +101,7 @@ const TEST_TOKEN_2 = {
 type PhraseBoxTestProps = {
   index: number | undefined;
   isFocused: boolean;
-  onClick: (index?: number) => void;
+  onFocusPhrase: (index?: number) => void;
   tokens: (Token & { type: 'word' })[];
 };
 
@@ -115,22 +115,21 @@ function requiredProps(): PhraseBoxTestProps {
   return {
     index: undefined,
     isFocused: false,
-    onClick: jest.fn(),
+    onFocusPhrase: jest.fn(),
     tokens: [TEST_TOKEN],
   };
 }
 
 describe('PhraseBox', () => {
-  it('renders as a button', () => {
+  it('renders as a label', () => {
     render(
       <GlossStoreProvider>
         <PhraseBox {...requiredProps()} />
       </GlossStoreProvider>,
     );
 
     const phraseBox = document.querySelector('[data-phrase-box="true"]');
-    expect(phraseBox?.tagName).toBe('BUTTON');
-    expect(phraseBox).toHaveAttribute('type', 'button');
+    expect(phraseBox?.tagName).toBe('LABEL');
   });
 
   it('renders one TokenChip per token in the tokens array', () => {
@@ -144,18 +143,17 @@ describe('PhraseBox', () => {
     expect(screen.getByTestId('token-token-2')).toBeInTheDocument();
   });
 
-  it('calls onClick when button is clicked', async () => {
-    const mockOnClick = jest.fn();
+  it('clicking the outer container focuses the first gloss input', async () => {
     render(
       <GlossStoreProvider>
-        <PhraseBox {...requiredProps()} onClick={mockOnClick} />
+        <PhraseBox {...requiredProps()} tokens={[TEST_TOKEN, TEST_TOKEN_2]} />
       </GlossStoreProvider>,
     );
 
-    const button = screen.getByRole('button');
-    await userEvent.click(button);
+    const phraseBox = document.querySelector('[data-phrase-box="true"]');
+    await userEvent.click(phraseBox ?? document.body);
 
-    expect(mockOnClick).toHaveBeenCalledTimes(1);
+    expect(screen.getByRole('textbox', { name: 'Gloss for Hello' })).toHaveFocus();
   });
 
   it('applies focused border and background when isFocused is true', () => {
@@ -186,27 +184,15 @@ describe('PhraseBox', () => {
     expect(phraseBox).toHaveClass('tw:bg-muted/20');
   });
 
-  it('button always has cursor-pointer and text-left classes', () => {
+  it('phrase box does not override cursor on gap areas', () => {
     render(
       <GlossStoreProvider>
         <PhraseBox {...requiredProps()} isFocused />
       </GlossStoreProvider>,
     );
 
-    const button = screen.getByRole('button');
-    expect(button).toHaveClass('tw:cursor-pointer');
-    expect(button).toHaveClass('tw:text-left');
-  });
-
-  it('button always has hover styling classes', () => {
-    render(
-      <GlossStoreProvider>
-        <PhraseBox {...requiredProps()} />
-      </GlossStoreProvider>,
-    );
-
-    const button = screen.getByRole('button');
-    expect(button).toHaveClass('tw:hover:bg-muted/30');
+    const phraseBox = document.querySelector('[data-phrase-box="true"]');
+    expect(phraseBox).not.toHaveClass('tw:cursor-text');
   });
 
   it('renders tokens in the order they appear in the tokens array', () => {
@@ -257,38 +243,28 @@ describe('PhraseBox', () => {
     expect(spy).toHaveBeenNthCalledWith(2, 'token-1', 'hi');
   });
 
-  it('calls onClick with index when a gloss input receives focus', async () => {
-    const handleClick = jest.fn();
+  it('calls onFocusPhrase with index when a gloss input receives focus', async () => {
+    const handleFocus = jest.fn();
     render(
       <GlossStoreProvider>
-        <PhraseBox {...requiredProps()} onClick={handleClick} index={2} />
+        <PhraseBox {...requiredProps()} onFocusPhrase={handleFocus} index={2} />
       </GlossStoreProvider>,
     );
 
     await userEvent.click(screen.getByRole('textbox', { name: 'Gloss for Hello' }));
 
-    expect(handleClick).toHaveBeenCalledWith(2);
-  });
-
-  it('button always has tabIndex -1 so tab focus goes only to gloss inputs', () => {
-    render(
-      <GlossStoreProvider>
-        <PhraseBox {...requiredProps()} />
-      </GlossStoreProvider>,
-    );
-
-    expect(screen.getByRole('button')).toHaveAttribute('tabindex', '-1');
+    expect(handleFocus).toHaveBeenCalledWith(2);
   });
 
-  it('button always has padding and gap spacing classes', () => {
+  it('phrase box always has padding and gap spacing classes', () => {
     render(
       <GlossStoreProvider>
         <PhraseBox {...requiredProps()} />
       </GlossStoreProvider>,
     );
 
-    const button = screen.getByRole('button');
-    expect(button).toHaveClass('tw:px-1');
-    expect(button).toHaveClass('tw:py-0.5');
+    const phraseBox = document.querySelector('[data-phrase-box="true"]');
+    expect(phraseBox).toHaveClass('tw:px-1');
+    expect(phraseBox).toHaveClass('tw:py-0.5');
   });
 });

src/__tests__/components/SegmentView.test.tsx

@@ -22,24 +22,31 @@ jest.mock('../../components/GlossStore', () => ({
   useGlossDispatch: () => () => {},
 }));
 
+jest.mock('../../components/TokenChip', () => ({
+  __esModule: true,
+  MemoizedInertTokenChip({ token }: Readonly<{ token: Token }>) {
+    return <span>{token.surfaceText}</span>;
+  },
+}));
+
 jest.mock('../../components/PhraseBox', () => ({
   __esModule: true,
   default: ({
     index,
     isFocused = false,
-    onClick,
+    onFocusPhrase,
     tokens,
   }: Readonly<{
     index?: number;
     isFocused: boolean;
-    onClick?: (index?: number) => void;
+    onFocusPhrase?: (index?: number) => void;
     tokens: Token[];
   }>) => (
     <span data-focus-state={isFocused ? 'focused' : 'default'}>
       {tokens.map((t) => (
         <span key={t.id}>
-          {onClick ? (
-            <button onClick={() => onClick(index)} type="button">
+          {onFocusPhrase ? (
+            <button onClick={() => onFocusPhrase(index)} type="button">
               {t.surfaceText}
             </button>
           ) : (
@@ -51,12 +58,6 @@ jest.mock('../../components/PhraseBox', () => ({
   ),
 }));
 
-jest.mock('../../components/TokenChip', () => ({
-  __esModule: true,
-  default: ({ token }: Readonly<{ token: Token }>) => <span>{token.surfaceText}</span>,
-  TokenChip: ({ token }: Readonly<{ token: Token }>) => <span>{token.surfaceText}</span>,
-}));
-
 /** A word token segment. */
 const WORD_SEGMENT: Segment = {
   id: 'GEN 1:1',