import InfoBox from '../components/InfoBox.astro';
import PullQuote from '../components/PullQuote.astro';

A player using an iOS browser reported missing the backspace key on the virtual keyboard because the key icon did not look like a delete button to them. What initially sounded like a personal preference led through research, two rounds of live layout prototyping, and a unified design specification covering both the icon artwork and key placement.

## Refreshing the pictogram

Researching standard symbol sets revealed that the shipped key used an older revision of Tabler's `backspace` icon, whose inner X and bounding box proportions made it ambiguous on lower-density screens. Updating to Tabler's current upstream SVG path brought the geometry into byte-for-byte alignment with Google's Material Symbols `backspace` icon.

```svelte
<!-- OnScreenKeyboard.svelte -->
<button class="key key--backspace" aria-label={strings.backspace}>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <path d="M20 6a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-11l-5 -5a1.5 1.5 0 0 1 0 -2l5 -5z" />
    <path d="M12 10l4 4m0 -4l-4 4" />
  </svg>
</button>
```

Refreshing the SVG path clarified the pictogram without changing any CSS tokens or color contracts established in [seven-phases-one-umbrella](/posts/seven-phases-one-umbrella#catching-contrast-on-press).

## Moving to the top row

The second part of the redesign evaluated key placement. The backspace button previously sat at the end of the middle QWERTY row, while Enter anchored the bottom row. Moving backspace to the end of the top row matched the standard QWERTY layout used by popular virtual keyboard libraries.

<InfoBox variant="note" title="Touch target headroom">
Shifting backspace to the top row reduced its rendered key width from 59px to 51px, remaining well above the 44px WCAG 2.5.5 minimum target size.
</InfoBox>

Live measurements confirmed that top-row placement preserved mis-tap separation between backspace and Enter, eliminating accidental submissions when a player meant to erase a letter.

## Cleaning up layout constants

During automated code review, a structural finding flagged how row indices were evaluated in the component template. The template previously checked `rowIndex === 2` for Enter while `keyGrid` computed `rows.length - 1`. If the row count ever changed, the two expressions would have silently drifted apart.

<PullQuote attribution="OnScreenKeyboard refactor">
keyGrid and the template share one source of truth instead of duplicating raw row literals.
</PullQuote>

Extracting `BACKSPACE_ROW_INDEX` and `enterRowIndex` as named constants bound the template directly to the grid definition. Unit tests in `OnScreenKeyboard.svelte.test.ts` were updated first under test-driven development, verifying red before the component changes landed.