The icon nobody recognized

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.

<!-- 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.

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.

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.

keyGrid and the template share one source of truth instead of duplicating raw row literals.

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.