@scrabble-solver/scrabble-solver 2.10.6 → 2.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.6",
+  "version": "2.10.7",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -31,13 +31,13 @@
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.10.6",
-    "@scrabble-solver/constants": "^2.10.6",
-    "@scrabble-solver/dictionaries": "^2.10.6",
-    "@scrabble-solver/logger": "^2.10.6",
-    "@scrabble-solver/solver": "^2.10.6",
-    "@scrabble-solver/types": "^2.10.6",
-    "@scrabble-solver/word-definitions": "^2.10.6",
+    "@scrabble-solver/configs": "^2.10.7",
+    "@scrabble-solver/constants": "^2.10.7",
+    "@scrabble-solver/dictionaries": "^2.10.7",
+    "@scrabble-solver/logger": "^2.10.7",
+    "@scrabble-solver/solver": "^2.10.7",
+    "@scrabble-solver/types": "^2.10.7",
+    "@scrabble-solver/word-definitions": "^2.10.7",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
@@ -76,5 +76,5 @@
     "sass": "^1.58.3",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "188bb77933a4e88af88b05063a4977c50c788071"
+  "gitHead": "4d40b64882d1b9866d70ebe6a239d7d018b0cd18"
 }

package/src/components/Board/components/Cell/Button.tsx

@@ -6,6 +6,7 @@ import { useTooltip } from '../../../Tooltip';
 import styles from './Cell.module.scss';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  'aria-label': string;
   onClick: MouseEventHandler<HTMLButtonElement>;
   tooltip: ReactNode;
 }

package/src/components/Board/components/Cell/Cell.tsx

@@ -10,6 +10,7 @@ import {
   selectCellBonus,
   selectCellIsFiltered,
   selectCellIsValid,
+  selectLocale,
   selectTilePoints,
   useTranslate,
   useTypedSelector,
@@ -47,6 +48,7 @@ const Cell: FunctionComponent<Props> = ({
   const { tile, x, y } = cell;
   const dispatch = useDispatch();
   const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
   const bonus = useTypedSelector((state) => selectCellBonus(state, cell));
   const points = useTypedSelector((state) => selectTilePoints(state, cell.tile));
   const isFiltered = useTypedSelector((state) => selectCellIsFiltered(state, cell));
@@ -83,6 +85,10 @@ const Cell: FunctionComponent<Props> = ({
 
   return (
     <CellPure
+      aria-label={translate('cell.tile.location', {
+        x: (x + 1).toLocaleString(locale),
+        y: (y + 1).toLocaleString(locale),
+      })}
       bonus={bonus}
       cell={cell}
       className={className}

package/src/components/Board/components/Cell/CellPure.tsx

@@ -20,6 +20,7 @@ import styles from './Cell.module.scss';
 import { getBonusClassname } from './lib';
 
 interface Props {
+  'aria-label': string;
   bonus: Bonus | undefined;
   cell: Cell;
   className?: string;
@@ -44,6 +45,7 @@ interface Props {
 }
 
 const CellPure: FunctionComponent<Props> = ({
+  'aria-label': ariaLabel,
   bonus,
   cell,
   className,
@@ -87,6 +89,7 @@ const CellPure: FunctionComponent<Props> = ({
     )}
 
     <Tile
+      aria-label={ariaLabel}
       className={styles.tile}
       character={isEmpty ? undefined : tile.character}
       highlighted={cell.isCandidate()}
@@ -103,7 +106,11 @@ const CellPure: FunctionComponent<Props> = ({
 
     {!cell.isCandidate() && (
       <div className={styles.actions}>
-        <Button tooltip={translate('cell.toggle-direction')} onClick={onDirectionToggleClick}>
+        <Button
+          aria-label={translate('cell.toggle-direction')}
+          tooltip={translate('cell.toggle-direction')}
+          onClick={onDirectionToggleClick}
+        >
           <ArrowDown
             className={classNames(styles.toggleDirection, {
               [styles.right]: direction === 'horizontal',
@@ -113,6 +120,7 @@ const CellPure: FunctionComponent<Props> = ({
 
         {isEmpty && (
           <Button
+            aria-label={translate('cell.filter-cell')}
             className={classNames(styles.filterCell, {
               [styles.filtered]: isFiltered,
             })}
@@ -125,6 +133,7 @@ const CellPure: FunctionComponent<Props> = ({
 
         {!isEmpty && (
           <Button
+            aria-label={tile.isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
             className={classNames(styles.blank, {
               [styles.active]: tile.isBlank,
             })}

package/src/components/Button/Button.tsx

@@ -7,6 +7,7 @@ import styles from './Button.module.scss';
 import Link from './Link';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  'aria-label': string;
   Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
   iconClassName?: string;
   tooltip?: ReactNode;

package/src/components/Button/Link.tsx

@@ -6,6 +6,7 @@ import { useTooltip } from '../Tooltip';
 import styles from './Button.module.scss';
 
 interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  'aria-label': string;
   href: string;
   Icon: FunctionComponent<SVGAttributes<SVGElement>>;
   iconClassName?: string;

package/src/components/{SquareButton/SquareButton.module.scss → IconButton/IconButton.module.scss}

@@ -1,6 +1,6 @@
 @import 'styles/mixins';
 
-.squareButton {
+.iconButton {
   @include button-reset;
   @include focus-effect;
 

package/src/components/{SquareButton/SquareButton.tsx → IconButton/IconButton.tsx}

@@ -1,23 +1,24 @@
 import classNames from 'classnames';
-import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, ReactNode, SVGAttributes } from 'react';
+import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, SVGAttributes } from 'react';
 
 import { useTooltip } from '../Tooltip';
 
+import styles from './IconButton.module.scss';
 import Link from './Link';
-import styles from './SquareButton.module.scss';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  'aria-label': string;
   children?: never;
   Icon: FunctionComponent<SVGAttributes<SVGElement>>;
-  tooltip: ReactNode;
+  tooltip: string;
   onClick: MouseEventHandler<HTMLButtonElement>;
 }
 
-const SquareButton: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props }) => {
+const IconButton: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props }) => {
   const triggerProps = useTooltip(tooltip, props);
 
   return (
-    <button className={classNames(styles.squareButton, className)} type="button" {...props} {...triggerProps}>
+    <button className={classNames(styles.iconButton, className)} type="button" {...props} {...triggerProps}>
       <span className={styles.content}>
         <Icon className={styles.icon} />
       </span>
@@ -25,6 +26,6 @@ const SquareButton: FunctionComponent<Props> = ({ className, Icon, tooltip, ...p
   );
 };
 
-export default Object.assign(SquareButton, {
+export default Object.assign(IconButton, {
   Link,
 });

package/src/components/{SquareButton → IconButton}/Link.tsx

@@ -3,9 +3,10 @@ import { AnchorHTMLAttributes, FunctionComponent, SVGAttributes } from 'react';
 
 import { useTooltip } from '../Tooltip';
 
-import styles from './SquareButton.module.scss';
+import styles from './IconButton.module.scss';
 
 interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  'aria-label': string;
   children?: never;
   href: string;
   Icon: FunctionComponent<SVGAttributes<SVGElement>>;
@@ -16,7 +17,7 @@ const Link: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props })
   const triggerProps = useTooltip(tooltip, props);
 
   return (
-    <a className={classNames(styles.squareButton, className)} {...props} {...triggerProps}>
+    <a className={classNames(styles.iconButton, className)} {...props} {...triggerProps}>
       <span className={styles.content}>
         <Icon className={styles.icon} />
       </span>

package/src/components/IconButton/index.ts

@@ -0,0 +1 @@
+export { default } from './IconButton';

package/src/components/Logo/Logo.svg

@@ -1,62 +1,91 @@
 <svg viewBox="0 0 682 166" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <!-- S -->
   <g transform="rotate(0, 40, 40)">
     <path fill="#efe3ae" d="M 0,0 H 80 V 80 H 0 Z" />
-    <path aria-label="S" d="m 51.167969,47.628907 q 0,3.046875 -1.476563,5.296875 -1.476562,2.25 -4.3125,3.46875 -2.8125,1.21875 -6.84375,1.21875 -1.78125,0 -3.492187,-0.234375 -1.6875,-0.234375 -3.257813,-0.679687 -1.546875,-0.46875 -2.953125,-1.148438 v -6.75 q 2.4375,1.078125 5.0625,1.945313 2.625,0.867187 5.203125,0.867187 1.78125,0 2.859375,-0.46875 1.101563,-0.46875 1.59375,-1.289062 0.492188,-0.820313 0.492188,-1.875 0,-1.289063 -0.867188,-2.203125 -0.867187,-0.914063 -2.390625,-1.710938 -1.5,-0.796875 -3.398437,-1.710937 -1.195313,-0.5625 -2.601563,-1.359375 -1.40625,-0.820313 -2.671875,-1.992188 -1.265625,-1.171875 -2.085937,-2.835937 -0.796875,-1.6875 -0.796875,-4.03125 0,-3.070313 1.40625,-5.25 1.40625,-2.179688 4.007812,-3.328125 2.625,-1.171875 6.1875,-1.171875 2.671875,0 5.085938,0.632812 2.4375,0.609375 5.085937,1.78125 l -2.34375,5.648438 q -2.367187,-0.960938 -4.242187,-1.476563 -1.875,-0.539062 -3.820313,-0.539062 -1.359375,0 -2.320312,0.445312 -0.960938,0.421875 -1.453125,1.21875 -0.492188,0.773438 -0.492188,1.804688 0,1.21875 0.703125,2.0625 0.726563,0.820312 2.15625,1.59375 1.453125,0.773437 3.609375,1.804687 2.625,1.242188 4.476563,2.601563 1.875,1.335937 2.882812,3.164062 1.007813,1.804688 1.007813,4.5 z" />
+    <path d="m 51.167969,47.628907 q 0,3.046875 -1.476563,5.296875 -1.476562,2.25 -4.3125,3.46875 -2.8125,1.21875 -6.84375,1.21875 -1.78125,0 -3.492187,-0.234375 -1.6875,-0.234375 -3.257813,-0.679687 -1.546875,-0.46875 -2.953125,-1.148438 v -6.75 q 2.4375,1.078125 5.0625,1.945313 2.625,0.867187 5.203125,0.867187 1.78125,0 2.859375,-0.46875 1.101563,-0.46875 1.59375,-1.289062 0.492188,-0.820313 0.492188,-1.875 0,-1.289063 -0.867188,-2.203125 -0.867187,-0.914063 -2.390625,-1.710938 -1.5,-0.796875 -3.398437,-1.710937 -1.195313,-0.5625 -2.601563,-1.359375 -1.40625,-0.820313 -2.671875,-1.992188 -1.265625,-1.171875 -2.085937,-2.835937 -0.796875,-1.6875 -0.796875,-4.03125 0,-3.070313 1.40625,-5.25 1.40625,-2.179688 4.007812,-3.328125 2.625,-1.171875 6.1875,-1.171875 2.671875,0 5.085938,0.632812 2.4375,0.609375 5.085937,1.78125 l -2.34375,5.648438 q -2.367187,-0.960938 -4.242187,-1.476563 -1.875,-0.539062 -3.820313,-0.539062 -1.359375,0 -2.320312,0.445312 -0.960938,0.421875 -1.453125,1.21875 -0.492188,0.773438 -0.492188,1.804688 0,1.21875 0.703125,2.0625 0.726563,0.820312 2.15625,1.59375 1.453125,0.773437 3.609375,1.804687 2.625,1.242188 4.476563,2.601563 1.875,1.335937 2.882812,3.164062 1.007813,1.804688 1.007813,4.5 z" />
   </g>
+
+  <!-- C -->
   <g transform="rotate(0, 126, 40)">
     <path fill="#c7d8f9" d="m 86,0 h 80 V 80 H 86 Z" />
-    <path aria-label="C" d="m 129.57422,28.433595 q -2.08594,0 -3.70313,0.820312 -1.59375,0.796875 -2.69531,2.320313 -1.07812,1.523437 -1.64062,3.679687 -0.5625,2.15625 -0.5625,4.851563 0,3.632812 0.89062,6.210937 0.91406,2.554688 2.8125,3.914063 1.89844,1.335937 4.89844,1.335937 2.08594,0 4.17187,-0.46875 2.10938,-0.46875 4.57032,-1.335937 v 6.09375 q -2.27344,0.9375 -4.47657,1.335937 -2.20312,0.421875 -4.94531,0.421875 -5.29687,0 -8.71875,-2.179687 -3.39844,-2.203125 -5.03906,-6.140625 -1.64063,-3.960938 -1.64063,-9.234375 0,-3.890625 1.05469,-7.125 1.05469,-3.234375 3.09375,-5.601563 2.03906,-2.367187 5.03906,-3.65625 3,-1.289062 6.89063,-1.289062 2.55469,0 5.10937,0.65625 2.57813,0.632812 4.92188,1.757812 l -2.34375,5.90625 q -1.92188,-0.914062 -3.86719,-1.59375 -1.94531,-0.679687 -3.82031,-0.679687 z" />
+    <path d="m 129.57422,28.433595 q -2.08594,0 -3.70313,0.820312 -1.59375,0.796875 -2.69531,2.320313 -1.07812,1.523437 -1.64062,3.679687 -0.5625,2.15625 -0.5625,4.851563 0,3.632812 0.89062,6.210937 0.91406,2.554688 2.8125,3.914063 1.89844,1.335937 4.89844,1.335937 2.08594,0 4.17187,-0.46875 2.10938,-0.46875 4.57032,-1.335937 v 6.09375 q -2.27344,0.9375 -4.47657,1.335937 -2.20312,0.421875 -4.94531,0.421875 -5.29687,0 -8.71875,-2.179687 -3.39844,-2.203125 -5.03906,-6.140625 -1.64063,-3.960938 -1.64063,-9.234375 0,-3.890625 1.05469,-7.125 1.05469,-3.234375 3.09375,-5.601563 2.03906,-2.367187 5.03906,-3.65625 3,-1.289062 6.89063,-1.289062 2.55469,0 5.10937,0.65625 2.57813,0.632812 4.92188,1.757812 l -2.34375,5.90625 q -1.92188,-0.914062 -3.86719,-1.59375 -1.94531,-0.679687 -3.82031,-0.679687 z" />
   </g>
+
+  <!-- R -->
   <g transform="rotate(0, 212, 40)">
     <path fill="#efe3ae" d="m 172,0 h 80 v 80 h -80 z" />
-    <path aria-label="R" d="m 210.45312,22.867188 q 4.66407,0 7.6875,1.125 3.04688,1.125 4.52344,3.398438 1.47656,2.273437 1.47656,5.742187 0,2.34375 -0.89062,4.101563 -0.89063,1.757812 -2.34375,2.976562 -1.45313,1.21875 -3.14063,1.992188 l 10.07813,14.929687 h -8.0625 l -8.17969,-13.148437 h -3.86719 v 13.148437 h -7.26562 V 22.867188 Z m -0.51562,5.953125 h -2.20313 v 9.257813 h 2.34375 q 3.60938,0 5.15625,-1.195313 1.57032,-1.21875 1.57032,-3.5625 0,-2.4375 -1.6875,-3.46875 -1.66407,-1.03125 -5.17969,-1.03125 z" />
+    <path d="m 210.45312,22.867188 q 4.66407,0 7.6875,1.125 3.04688,1.125 4.52344,3.398438 1.47656,2.273437 1.47656,5.742187 0,2.34375 -0.89062,4.101563 -0.89063,1.757812 -2.34375,2.976562 -1.45313,1.21875 -3.14063,1.992188 l 10.07813,14.929687 h -8.0625 l -8.17969,-13.148437 h -3.86719 v 13.148437 h -7.26562 V 22.867188 Z m -0.51562,5.953125 h -2.20313 v 9.257813 h 2.34375 q 3.60938,0 5.15625,-1.195313 1.57032,-1.21875 1.57032,-3.5625 0,-2.4375 -1.6875,-3.46875 -1.66407,-1.03125 -5.17969,-1.03125 z" />
   </g>
+
+  <!-- A -->
   <g transform="rotate(0, 298, 40)">
     <path fill="#efe3ae" d="m 258,0 h 80 v 80 h -80 z" />
-    <path aria-label="A" d="m 306.73047,57.203126 -2.48438,-8.15625 h -12.49218 l -2.48438,8.15625 h -7.82812 l 12.09375,-34.40625 h 8.88281 l 12.14062,34.40625 z m -4.21875,-14.25 -2.48438,-7.96875 q -0.23437,-0.796875 -0.63281,-2.039063 -0.375,-1.265625 -0.77344,-2.554687 -0.375,-1.3125 -0.60937,-2.273438 -0.23438,0.960938 -0.65625,2.390625 -0.39844,1.40625 -0.77344,2.671875 -0.375,1.265625 -0.53906,1.804688 l -2.46094,7.96875 z" />
+    <path d="m 306.73047,57.203126 -2.48438,-8.15625 h -12.49218 l -2.48438,8.15625 h -7.82812 l 12.09375,-34.40625 h 8.88281 l 12.14062,34.40625 z m -4.21875,-14.25 -2.48438,-7.96875 q -0.23437,-0.796875 -0.63281,-2.039063 -0.375,-1.265625 -0.77344,-2.554687 -0.375,-1.3125 -0.60937,-2.273438 -0.23438,0.960938 -0.65625,2.390625 -0.39844,1.40625 -0.77344,2.671875 -0.375,1.265625 -0.53906,1.804688 l -2.46094,7.96875 z" />
   </g>
+
+  <!-- B -->
   <g transform="rotate(0, 384, 40)">
     <path fill="#c7d8f9" d="m 344,0 h 80 v 80 h -80 z" />
-    <path aria-label="B" d="m 372.1875,22.867188 h 10.66406 q 6.84375,0 10.35938,1.921875 3.51562,1.921875 3.51562,6.75 0,1.945313 -0.63281,3.515625 -0.60938,1.570313 -1.78125,2.578125 -1.17188,1.007813 -2.85938,1.3125 v 0.234375 q 1.71094,0.351563 3.09375,1.21875 1.38282,0.84375 2.20313,2.484375 0.84375,1.617188 0.84375,4.3125 0,3.117188 -1.52344,5.34375 -1.52344,2.226563 -4.35937,3.421875 -2.8125,1.171875 -6.70313,1.171875 H 372.1875 Z m 7.26562,13.570313 h 4.21875 q 3.16407,0 4.38282,-0.984375 1.21875,-1.007813 1.21875,-2.953125 0,-1.96875 -1.45313,-2.8125 -1.42969,-0.867188 -4.54687,-0.867188 h -3.82032 z m 0,5.765625 v 8.929687 h 4.73438 q 3.28125,0 4.57031,-1.265625 1.28906,-1.265625 1.28906,-3.398437 0,-1.265625 -0.5625,-2.226563 -0.5625,-0.960937 -1.89843,-1.5 -1.3125,-0.539062 -3.63282,-0.539062 z" />
+    <path d="m 372.1875,22.867188 h 10.66406 q 6.84375,0 10.35938,1.921875 3.51562,1.921875 3.51562,6.75 0,1.945313 -0.63281,3.515625 -0.60938,1.570313 -1.78125,2.578125 -1.17188,1.007813 -2.85938,1.3125 v 0.234375 q 1.71094,0.351563 3.09375,1.21875 1.38282,0.84375 2.20313,2.484375 0.84375,1.617188 0.84375,4.3125 0,3.117188 -1.52344,5.34375 -1.52344,2.226563 -4.35937,3.421875 -2.8125,1.171875 -6.70313,1.171875 H 372.1875 Z m 7.26562,13.570313 h 4.21875 q 3.16407,0 4.38282,-0.984375 1.21875,-1.007813 1.21875,-2.953125 0,-1.96875 -1.45313,-2.8125 -1.42969,-0.867188 -4.54687,-0.867188 h -3.82032 z m 0,5.765625 v 8.929687 h 4.73438 q 3.28125,0 4.57031,-1.265625 1.28906,-1.265625 1.28906,-3.398437 0,-1.265625 -0.5625,-2.226563 -0.5625,-0.960937 -1.89843,-1.5 -1.3125,-0.539062 -3.63282,-0.539062 z" />
   </g>
+
+  <!-- B -->
   <g transform="rotate(0, 470, 40)">
     <path fill="#c7d8f9" d="m 430,0 h 80 v 80 h -80 z" />
-    <path aria-label="B" d="m 458.1875,22.867188 h 10.66406 q 6.84375,0 10.35938,1.921875 3.51562,1.921875 3.51562,6.75 0,1.945313 -0.63281,3.515625 -0.60938,1.570313 -1.78125,2.578125 -1.17188,1.007813 -2.85938,1.3125 v 0.234375 q 1.71094,0.351563 3.09375,1.21875 1.38282,0.84375 2.20313,2.484375 0.84375,1.617188 0.84375,4.3125 0,3.117188 -1.52344,5.34375 -1.52344,2.226563 -4.35937,3.421875 -2.8125,1.171875 -6.70313,1.171875 H 458.1875 Z m 7.26562,13.570313 h 4.21875 q 3.16407,0 4.38282,-0.984375 1.21875,-1.007813 1.21875,-2.953125 0,-1.96875 -1.45313,-2.8125 -1.42969,-0.867188 -4.54687,-0.867188 h -3.82032 z m 0,5.765625 v 8.929687 h 4.73438 q 3.28125,0 4.57031,-1.265625 1.28906,-1.265625 1.28906,-3.398437 0,-1.265625 -0.5625,-2.226563 -0.5625,-0.960937 -1.89843,-1.5 -1.3125,-0.539062 -3.63282,-0.539062 z" />
+    <path d="m 458.1875,22.867188 h 10.66406 q 6.84375,0 10.35938,1.921875 3.51562,1.921875 3.51562,6.75 0,1.945313 -0.63281,3.515625 -0.60938,1.570313 -1.78125,2.578125 -1.17188,1.007813 -2.85938,1.3125 v 0.234375 q 1.71094,0.351563 3.09375,1.21875 1.38282,0.84375 2.20313,2.484375 0.84375,1.617188 0.84375,4.3125 0,3.117188 -1.52344,5.34375 -1.52344,2.226563 -4.35937,3.421875 -2.8125,1.171875 -6.70313,1.171875 H 458.1875 Z m 7.26562,13.570313 h 4.21875 q 3.16407,0 4.38282,-0.984375 1.21875,-1.007813 1.21875,-2.953125 0,-1.96875 -1.45313,-2.8125 -1.42969,-0.867188 -4.54687,-0.867188 h -3.82032 z m 0,5.765625 v 8.929687 h 4.73438 q 3.28125,0 4.57031,-1.265625 1.28906,-1.265625 1.28906,-3.398437 0,-1.265625 -0.5625,-2.226563 -0.5625,-0.960937 -1.89843,-1.5 -1.3125,-0.539062 -3.63282,-0.539062 z" />
   </g>
+
+  <!-- L -->
   <g transform="rotate(0, 556, 40)">
     <path fill="#efe3ae" d="m 516,0 h 80 v 80 h -80 z" />
-    <path aria-label="L" d="M 546.75391,57.132813 V 22.867188 h 7.26562 v 28.265625 h 13.89844 v 6 z" />
+    <path d="M 546.75391,57.132813 V 22.867188 h 7.26562 v 28.265625 h 13.89844 v 6 z" />
   </g>
+
+  <!-- E -->
   <g transform="rotate(0, 642, 40)">
     <path fill="#efe3ae" d="m 602,0 h 80 v 80 h -80 z" />
-    <path aria-label="E" d="M 652.60547,57.132813 H 632.87109 V 22.867188 h 19.73438 v 5.953125 h -12.46875 v 7.523438 h 11.60156 v 5.953125 h -11.60156 v 8.835937 h 12.46875 z" />
+    <path d="M 652.60547,57.132813 H 632.87109 V 22.867188 h 19.73438 v 5.953125 h -12.46875 v 7.523438 h 11.60156 v 5.953125 h -11.60156 v 8.835937 h 12.46875 z" />
   </g>
+
+  <!-- S -->
   <g transform="rotate(0, 40, 40)">
     <path fill="#efe3ae" d="m 0,86 h 80 v 80 H 0 Z" />
-    <path aria-label="S" d="m 51.320312,133.6289 q 0,3.04688 -1.476562,5.29688 -1.476563,2.25 -4.3125,3.46875 -2.8125,1.21875 -6.84375,1.21875 -1.78125,0 -3.492188,-0.23438 -1.6875,-0.23437 -3.257812,-0.67968 -1.546875,-0.46875 -2.953125,-1.14844 v -6.75 q 2.4375,1.07812 5.0625,1.94531 2.625,0.86719 5.203125,0.86719 1.78125,0 2.859375,-0.46875 1.101562,-0.46875 1.59375,-1.28906 0.492187,-0.82032 0.492187,-1.875 0,-1.28907 -0.867187,-2.20313 -0.867188,-0.91406 -2.390625,-1.71094 -1.5,-0.79687 -3.398438,-1.71093 -1.195312,-0.5625 -2.601562,-1.35938 -1.40625,-0.82031 -2.671875,-1.99219 Q 31,123.83203 30.179687,122.16797 q -0.796875,-1.6875 -0.796875,-4.03125 0,-3.07032 1.40625,-5.25 1.40625,-2.17969 4.007813,-3.32813 2.625,-1.17187 6.1875,-1.17187 2.671875,0 5.085937,0.63281 2.4375,0.60937 5.085938,1.78125 l -2.34375,5.64844 q -2.367188,-0.96094 -4.242188,-1.47657 -1.875,-0.53906 -3.820312,-0.53906 -1.359375,0 -2.320313,0.44531 -0.960937,0.42188 -1.453125,1.21875 -0.492187,0.77344 -0.492187,1.80469 0,1.21875 0.703125,2.0625 0.726562,0.82031 2.15625,1.59375 1.453125,0.77344 3.609375,1.80469 2.625,1.24219 4.476562,2.60156 1.875,1.33594 2.882813,3.16406 1.007812,1.80469 1.007812,4.5 z" />
+    <path d="m 51.320312,133.6289 q 0,3.04688 -1.476562,5.29688 -1.476563,2.25 -4.3125,3.46875 -2.8125,1.21875 -6.84375,1.21875 -1.78125,0 -3.492188,-0.23438 -1.6875,-0.23437 -3.257812,-0.67968 -1.546875,-0.46875 -2.953125,-1.14844 v -6.75 q 2.4375,1.07812 5.0625,1.94531 2.625,0.86719 5.203125,0.86719 1.78125,0 2.859375,-0.46875 1.101562,-0.46875 1.59375,-1.28906 0.492187,-0.82032 0.492187,-1.875 0,-1.28907 -0.867187,-2.20313 -0.867188,-0.91406 -2.390625,-1.71094 -1.5,-0.79687 -3.398438,-1.71093 -1.195312,-0.5625 -2.601562,-1.35938 -1.40625,-0.82031 -2.671875,-1.99219 Q 31,123.83203 30.179687,122.16797 q -0.796875,-1.6875 -0.796875,-4.03125 0,-3.07032 1.40625,-5.25 1.40625,-2.17969 4.007813,-3.32813 2.625,-1.17187 6.1875,-1.17187 2.671875,0 5.085937,0.63281 2.4375,0.60937 5.085938,1.78125 l -2.34375,5.64844 q -2.367188,-0.96094 -4.242188,-1.47657 -1.875,-0.53906 -3.820312,-0.53906 -1.359375,0 -2.320313,0.44531 -0.960937,0.42188 -1.453125,1.21875 -0.492187,0.77344 -0.492187,1.80469 0,1.21875 0.703125,2.0625 0.726562,0.82031 2.15625,1.59375 1.453125,0.77344 3.609375,1.80469 2.625,1.24219 4.476562,2.60156 1.875,1.33594 2.882813,3.16406 1.007812,1.80469 1.007812,4.5 z" />
   </g>
+
+  <!-- O -->
   <g transform="rotate(0, 126, 40)">
     <path fill="#efe3ae" d="m 86,86 h 80 v 80 H 86 Z" />
-    <path aria-label="O" d="m 142.3125,125.98828 q 0,3.96094 -0.98438,7.21875 -0.98437,3.23437 -3,5.57812 -1.99218,2.34375 -5.0625,3.60938 -3.07031,1.24219 -7.26562,1.24219 -4.19531,0 -7.26562,-1.24219 -3.07032,-1.26563 -5.08594,-3.60938 -1.99219,-2.34375 -2.97656,-5.60156 -0.98438,-3.25781 -0.98438,-7.24219 0,-5.32031 1.73438,-9.25781 1.75781,-3.96094 5.39062,-6.14062 3.63281,-2.17969 9.23438,-2.17969 5.57812,0 9.16406,2.17969 3.60937,2.17968 5.34375,6.14062 1.75781,3.96094 1.75781,9.30469 z m -25.00781,0 q 0,3.58594 0.89062,6.1875 0.91407,2.57812 2.83594,3.98437 1.92188,1.38282 4.96875,1.38282 3.09375,0 5.01562,-1.38282 1.92188,-1.40625 2.78907,-3.98437 0.89062,-2.60156 0.89062,-6.1875 0,-5.39063 -2.01562,-8.48438 -2.01563,-3.09375 -6.63281,-3.09375 -3.07032,0 -5.01563,1.40625 -1.92187,1.38282 -2.83594,3.98438 -0.89062,2.57812 -0.89062,6.1875 z" />
+    <path d="m 142.3125,125.98828 q 0,3.96094 -0.98438,7.21875 -0.98437,3.23437 -3,5.57812 -1.99218,2.34375 -5.0625,3.60938 -3.07031,1.24219 -7.26562,1.24219 -4.19531,0 -7.26562,-1.24219 -3.07032,-1.26563 -5.08594,-3.60938 -1.99219,-2.34375 -2.97656,-5.60156 -0.98438,-3.25781 -0.98438,-7.24219 0,-5.32031 1.73438,-9.25781 1.75781,-3.96094 5.39062,-6.14062 3.63281,-2.17969 9.23438,-2.17969 5.57812,0 9.16406,2.17969 3.60937,2.17968 5.34375,6.14062 1.75781,3.96094 1.75781,9.30469 z m -25.00781,0 q 0,3.58594 0.89062,6.1875 0.91407,2.57812 2.83594,3.98437 1.92188,1.38282 4.96875,1.38282 3.09375,0 5.01562,-1.38282 1.92188,-1.40625 2.78907,-3.98437 0.89062,-2.60156 0.89062,-6.1875 0,-5.39063 -2.01562,-8.48438 -2.01563,-3.09375 -6.63281,-3.09375 -3.07032,0 -5.01563,1.40625 -1.92187,1.38282 -2.83594,3.98438 -0.89062,2.57812 -0.89062,6.1875 z" />
   </g>
+
+  <!-- L -->
   <g transform="rotate(0, 212, 40)">
     <path fill="#efe3ae" d="m 172,86 h 80 v 80 h -80 z" />
-    <path aria-label="L" d="m 202.75391,143.13281 v -34.26563 h 7.26562 v 28.26563 h 13.89844 v 6 z" />
+    <path d="m 202.75391,143.13281 v -34.26563 h 7.26562 v 28.26563 h 13.89844 v 6 z" />
   </g>
+
+  <!-- V -->
   <g transform="rotate(0, 298, 40)">
     <path fill="#f7c2aa" d="m 258,86 h 80 v 80 h -80 z" />
-    <path aria-label="V" d="m 313.59766,108.86718 -11.64844,34.26563 h -7.92188 l -11.625,-34.26563 h 7.33594 l 6.44531,20.39063 q 0.16407,0.51562 0.53907,1.94531 0.375,1.40625 0.75,3 0.39843,1.57031 0.53906,2.60156 0.14062,-1.03125 0.49219,-2.60156 0.375,-1.57031 0.72656,-2.97656 0.375,-1.42969 0.53906,-1.96875 l 6.49219,-20.39063 z" />
+    <path d="m 313.59766,108.86718 -11.64844,34.26563 h -7.92188 l -11.625,-34.26563 h 7.33594 l 6.44531,20.39063 q 0.16407,0.51562 0.53907,1.94531 0.375,1.40625 0.75,3 0.39843,1.57031 0.53906,2.60156 0.14062,-1.03125 0.49219,-2.60156 0.375,-1.57031 0.72656,-2.97656 0.375,-1.42969 0.53906,-1.96875 l 6.49219,-20.39063 z" />
   </g>
+
+  <!-- E -->
   <g transform="rotate(0, 384, 40)">
     <path fill="#efe3ae" d="m 344,86 h 80 v 80 h -80 z" />
-    <path aria-label="E" d="m 394.60547,143.13281 h -19.73438 v -34.26563 h 19.73438 v 5.95313 h -12.46875 v 7.52344 h 11.60156 v 5.95312 h -11.60156 v 8.83594 h 12.46875 z" />
+    <path d="m 394.60547,143.13281 h -19.73438 v -34.26563 h 19.73438 v 5.95313 h -12.46875 v 7.52344 h 11.60156 v 5.95312 h -11.60156 v 8.83594 h 12.46875 z" />
   </g>
+
+  <!-- R -->
   <g transform="rotate(0, 470, 40)">
     <path fill="#efe3ae" d="m 430,86 h 80 v 80 h -80 z" />
-    <path aria-label="R" d="m 468.45312,108.86718 q 4.66407,0 7.6875,1.125 3.04688,1.125 4.52344,3.39844 1.47656,2.27344 1.47656,5.74219 0,2.34375 -0.89062,4.10156 -0.89063,1.75781 -2.34375,2.97656 -1.45313,1.21875 -3.14063,1.99219 l 10.07813,14.92969 h -8.0625 l -8.17969,-13.14844 h -3.86719 v 13.14844 h -7.26562 v -34.26563 z m -0.51562,5.95313 h -2.20313 v 9.25781 h 2.34375 q 3.60938,0 5.15625,-1.19531 1.57032,-1.21875 1.57032,-3.5625 0,-2.4375 -1.6875,-3.46875 -1.66407,-1.03125 -5.17969,-1.03125 z" />
+    <path d="m 468.45312,108.86718 q 4.66407,0 7.6875,1.125 3.04688,1.125 4.52344,3.39844 1.47656,2.27344 1.47656,5.74219 0,2.34375 -0.89062,4.10156 -0.89063,1.75781 -2.34375,2.97656 -1.45313,1.21875 -3.14063,1.99219 l 10.07813,14.92969 h -8.0625 l -8.17969,-13.14844 h -3.86719 v 13.14844 h -7.26562 v -34.26563 z m -0.51562,5.95313 h -2.20313 v 9.25781 h 2.34375 q 3.60938,0 5.15625,-1.19531 1.57032,-1.21875 1.57032,-3.5625 0,-2.4375 -1.6875,-3.46875 -1.66407,-1.03125 -5.17969,-1.03125 z" />
   </g>
+
+  <!-- 2 -->
   <g transform="rotate(0, 642, 40)">
     <path fill="#bae3ba" d="m 602,86 h 80 v 80 h -80 z" />
-    <path aria-label="2" d="m 654.15234,143.3789 h -23.95312 v -5.03906 l 8.60156,-8.69531 q 2.60156,-2.67188 4.17188,-4.45313 1.59375,-1.80468 2.29687,-3.28125 0.72656,-1.47656 0.72656,-3.16406 0,-2.03906 -1.14843,-3.04687 -1.125,-1.03125 -3.02344,-1.03125 -1.99219,0 -3.86719,0.91406 -1.875,0.91406 -3.91406,2.60156 l -3.9375,-4.66406 q 1.47656,-1.26563 3.11719,-2.39063 1.66406,-1.125 3.84375,-1.80468 2.20312,-0.70313 5.27343,-0.70313 3.375,0 5.78907,1.21875 2.4375,1.21875 3.75,3.32813 1.3125,2.08593 1.3125,4.73437 0,2.83594 -1.125,5.17969 -1.125,2.34375 -3.28125,4.64062 -2.13282,2.29688 -5.15625,5.08594 l -4.40625,4.14844 v 0.32812 h 14.92968 z" />
+    <path d="m 654.15234,143.3789 h -23.95312 v -5.03906 l 8.60156,-8.69531 q 2.60156,-2.67188 4.17188,-4.45313 1.59375,-1.80468 2.29687,-3.28125 0.72656,-1.47656 0.72656,-3.16406 0,-2.03906 -1.14843,-3.04687 -1.125,-1.03125 -3.02344,-1.03125 -1.99219,0 -3.86719,0.91406 -1.875,0.91406 -3.91406,2.60156 l -3.9375,-4.66406 q 1.47656,-1.26563 3.11719,-2.39063 1.66406,-1.125 3.84375,-1.80468 2.20312,-0.70313 5.27343,-0.70313 3.375,0 5.78907,1.21875 2.4375,1.21875 3.75,3.32813 1.3125,2.08593 1.3125,4.73437 0,2.83594 -1.125,5.17969 -1.125,2.34375 -3.28125,4.64062 -2.13282,2.29688 -5.15625,5.08594 l -4.40625,4.14844 v 0.32812 h 14.92968 z" />
   </g>
 </svg>

package/src/components/Modal/Modal.tsx

@@ -7,7 +7,7 @@ import { CrossSquareFill } from 'icons';
 import { TRANSITION_DURATION_LONG } from 'parameters';
 import { useTranslate } from 'state';
 
-import SquareButton from '../SquareButton';
+import IconButton from '../IconButton';
 
 import { Section } from './components';
 import styles from './Modal.module.scss';
@@ -58,7 +58,8 @@ const Modal: FunctionComponent<Props> = ({ children, className, isOpen, title, o
         <div className={styles.header}>
           <h1 className={styles.title}>{title}</h1>
 
-          <SquareButton
+          <IconButton
+            aria-label={translate('common.close')}
             className={styles.closeButton}
             Icon={CrossSquareFill}
             tooltip={translate('common.close')}

package/src/components/NavButtons/NavButtons.tsx

@@ -6,7 +6,7 @@ import { CardChecklist, Cog, Eraser, Github, Keyboard, List, Sack } from 'icons'
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
 
-import SquareButton from '../SquareButton';
+import IconButton from '../IconButton';
 
 import styles from './NavButtons.module.scss';
 
@@ -37,13 +37,25 @@ const NavButtons: FunctionComponent<Props> = ({
     return (
       <div className={styles.navButtons}>
         <div className={styles.group}>
-          <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
+          <IconButton
+            aria-label={translate('common.clear')}
+            className={styles.button}
+            Icon={Eraser}
+            tooltip={translate('common.clear')}
+            onClick={onClear}
+          />
         </div>
 
         <div className={styles.separator} />
 
         <div className={styles.group}>
-          <SquareButton className={styles.button} Icon={List} tooltip={translate('menu')} onClick={onShowMenu} />
+          <IconButton
+            aria-label={translate('menu')}
+            className={styles.button}
+            Icon={List}
+            tooltip={translate('menu')}
+            onClick={onShowMenu}
+          />
         </div>
       </div>
     );
@@ -52,13 +64,20 @@ const NavButtons: FunctionComponent<Props> = ({
   return (
     <div className={styles.navButtons}>
       <div className={styles.group}>
-        <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
+        <IconButton
+          aria-label={translate('common.clear')}
+          className={styles.button}
+          Icon={Eraser}
+          tooltip={translate('common.clear')}
+          onClick={onClear}
+        />
       </div>
 
       <div className={styles.separator} />
 
       <div className={styles.group}>
-        <SquareButton
+        <IconButton
+          aria-label={translate('remaining-tiles')}
           className={classNames(styles.button, {
             [styles.error]: hasOverusedTiles,
           })}
@@ -67,7 +86,8 @@ const NavButtons: FunctionComponent<Props> = ({
           onClick={onShowRemainingTiles}
         />
 
-        <SquareButton
+        <IconButton
+          aria-label={translate('words')}
           className={classNames(styles.button, {
             [styles.error]: hasInvalidWords,
           })}
@@ -80,7 +100,8 @@ const NavButtons: FunctionComponent<Props> = ({
       <div className={styles.separator} />
 
       <div className={styles.group}>
-        <SquareButton.Link
+        <IconButton.Link
+          aria-label={translate('github')}
           className={styles.button}
           href={GITHUB_PROJECT_URL}
           Icon={Github}
@@ -94,7 +115,8 @@ const NavButtons: FunctionComponent<Props> = ({
 
       <div className={styles.group}>
         {!isTouchDevice && (
-          <SquareButton
+          <IconButton
+            aria-label={translate('keyMap')}
             className={styles.button}
             Icon={Keyboard}
             tooltip={translate('keyMap')}
@@ -102,7 +124,13 @@ const NavButtons: FunctionComponent<Props> = ({
           />
         )}
 
-        <SquareButton className={styles.button} Icon={Cog} tooltip={translate('settings')} onClick={onShowSettings} />
+        <IconButton
+          aria-label={translate('settings')}
+          className={styles.button}
+          Icon={Cog}
+          tooltip={translate('settings')}
+          onClick={onShowSettings}
+        />
       </div>
     </div>
   );

package/src/components/Rack/RackTile.tsx

@@ -18,6 +18,7 @@ import {
   selectCharacterIsValid,
   selectCharacterPoints,
   selectConfig,
+  selectLocale,
   useTranslate,
   useTypedSelector,
 } from 'state';
@@ -49,6 +50,7 @@ const RackTile: FunctionComponent<Props> = ({
 }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
   const config = useTypedSelector(selectConfig);
   const points = useTypedSelector((state) => selectCharacterPoints(state, character));
   const isValid = useTypedSelector((state) => selectCharacterIsValid(state, character));
@@ -91,6 +93,9 @@ const RackTile: FunctionComponent<Props> = ({
 
   return (
     <Tile
+      aria-label={translate('rack.tile.location', {
+        index: (index + 1).toLocaleString(locale),
+      })}
       autoFocus={index === 0}
       className={styles.tile}
       character={character === null ? undefined : character}

package/src/components/Results/HeaderButton.tsx

@@ -34,6 +34,7 @@ const HeaderButton = ({ column }: Props): ReactElement => {
 
   return (
     <button
+      aria-label={translate(column.translationKey)}
       className={classNames(styles.headerButton, column.className)}
       key={column.id}
       type="button"

package/src/components/Results/Result.tsx

@@ -43,6 +43,7 @@ const Result = ({ data, index, style }: Props): ReactElement => {
 
   return (
     <button
+      aria-label={result.word}
       className={classNames(styles.result, {
         [styles.highlighted]: index === highlightedIndex,
       })}

package/src/components/Results/Results.module.scss

@@ -31,7 +31,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   justify-content: space-between;
   border-bottom: var(--border);
   font-weight: 700;
-  overflow: auto;
 }
 
 .headerButton {

package/src/components/Results/SolveButton.tsx

@@ -31,6 +31,7 @@ const SolveButton: FunctionComponent<Props> = ({ className }) => {
 
   return (
     <Button
+      aria-label={translate('results.solve')}
       className={className}
       disabled={isLoading || !isOutdated || !hasTiles}
       Icon={Search}

package/src/components/Solver/Solver.module.scss

@@ -109,6 +109,10 @@
   width: 100%;
 }
 
+.emptyState {
+  margin-top: var(--spacing);
+}
+
 .solve {
   --spacing: var(--spacing--l);
 

package/src/components/Solver/Solver.tsx

@@ -17,10 +17,14 @@ import {
 } from 'parameters';
 import {
   resultsSlice,
+  selectAreResultsOutdated,
   selectConfig,
   selectResultCandidate,
+  selectSolveError,
   selectSortedFilteredResults,
+  selectSortedResults,
   solveSlice,
+  useTranslate,
   useTypedSelector,
 } from 'state';
 
@@ -31,7 +35,7 @@ import Rack from '../Rack';
 import Results from '../Results';
 import Well from '../Well';
 
-import { MobileControls, SolveButton } from './components';
+import { EmptyState, ResultCandidatePicker, SolveButton } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -44,6 +48,7 @@ interface Props {
 // eslint-disable-next-line max-statements
 const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResults }) => {
   const dispatch = useDispatch();
+  const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
   const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
   const [resultsContainerRef, { width: resultsContainerWidth }] = useMeasure<HTMLDivElement>();
@@ -58,7 +63,10 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
     isLessThanM ? Number.POSITIVE_INFINITY : 0,
   );
   const config = useTypedSelector(selectConfig);
+  const error = useTypedSelector(selectSolveError);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const resultCandidate = useTypedSelector(selectResultCandidate);
+  const allResults = useTypedSelector(selectSortedResults);
   const results = useTypedSelector(selectSortedFilteredResults);
   const [bestResult] = results || [];
   const cellWidth = (maxBoardWidth - (config.boardWidth + 1) * BORDER_WIDTH) / config.boardWidth;
@@ -116,10 +124,10 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   };
 
   useEffect(() => {
-    if (bestResult) {
+    if (isLessThanL && bestResult && !isOutdated) {
       dispatch(resultsSlice.actions.changeResultCandidate(bestResult));
     }
-  }, [bestResult, dispatch]);
+  }, [bestResult, dispatch, isLessThanL, isOutdated]);
 
   return (
     <div className={classNames(styles.solver, className)}>
@@ -155,11 +163,21 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
           </form>
 
           {isLessThanL && (
-            <MobileControls
-              className={styles.controls}
-              style={{ maxWidth: maxControlsWidth }}
-              onShowResults={onShowResults}
-            />
+            <div className={styles.controls} style={{ maxWidth: maxControlsWidth }}>
+              <ResultCandidatePicker onResultClick={onShowResults} />
+
+              {error && (
+                <EmptyState className={styles.emptyState} variant="error">
+                  {error.message}
+                </EmptyState>
+              )}
+
+              {allResults && allResults.length === 0 && !isOutdated && (
+                <EmptyState className={styles.emptyState} variant="warning">
+                  {translate('results.empty-state.no-results')}
+                </EmptyState>
+              )}
+            </div>
           )}
         </div>
       </div>

package/src/components/Solver/components/EmptyState/EmptyState.module.scss

@@ -5,8 +5,6 @@
   border: var(--border);
   border-radius: var(--border--radius);
   background-color: white;
-  box-shadow: var(--box-shadow);
-  cursor: pointer;
   text-align: center;
 }