Wrap stepper button glyphs in a span for iOS Safari centering

Flexbox centering of a bare text node inside a <button> is a known
WebKit quirk — Safari (including iOS) doesn't always vertically center
it the same way it centers an element child. Wrapping the +/- glyph in
its own <span aria-hidden="true"> (the button's own aria-label already
conveys the meaning) is the standard workaround.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RvYdJ3os7tumimsLdLu2j9

src/components/ordering/MenuItemCustomizer.tsx

@@ -80,7 +80,7 @@ export const MenuItemCustomizer = ({
             disabled={quantity === 0}
             aria-label={`Remove one ${item.name}`}
           >
-            −
+            <span aria-hidden="true">−</span>
           </button>
           <AnimatedNumber value={quantity} className={styles.count} />
           <button
@@ -89,7 +89,7 @@ export const MenuItemCustomizer = ({
             onClick={() => onAdd(item.id, checkedOptionIds)}
             aria-label={`Add one ${item.name}`}
           >
-            +
+            <span aria-hidden="true">+</span>
           </button>
         </div>
       </div>

src/components/ordering/MenuList.tsx

@@ -72,7 +72,7 @@ export const MenuList = ({ menu, lines, onAdd, onRemove }: MenuListProps) => (
                 disabled={(defaultLine?.quantity ?? 0) === 0}
                 aria-label={`Remove one ${item.name}`}
               >
-                −
+                <span aria-hidden="true">−</span>
               </button>
               <AnimatedNumber
                 value={defaultLine?.quantity ?? 0}
@@ -84,7 +84,7 @@ export const MenuList = ({ menu, lines, onAdd, onRemove }: MenuListProps) => (
                 onClick={() => onAdd(item.id)}
                 aria-label={`Add one ${item.name}`}
               >
-                +
+                <span aria-hidden="true">+</span>
               </button>
             </div>
           </div>

src/routes/basket.tsx

@@ -119,7 +119,7 @@ const BasketPage = () => {
                           onClick={() => remove(line.menuItemId, line.optionIds)}
                           aria-label={`Remove one ${item.name}`}
                         >
-                          −
+                          <span aria-hidden="true">−</span>
                         </button>
                         <AnimatedNumber
                           value={line.quantity}
@@ -131,7 +131,7 @@ const BasketPage = () => {
                           onClick={() => add(line.menuItemId, line.optionIds)}
                           aria-label={`Add one ${item.name}`}
                         >
-                          +
+                          <span aria-hidden="true">+</span>
                         </button>
                       </div>
                     </li>