Challenge 1: Add an Accessible Name to an Icon Button — Possible Solution
====================================================================

<button aria-label="Search">🔍</button>

WHY THIS WORKS
--------------
- The button contains only an emoji/icon character (🔍) with no visible
  text — a screen reader has nothing textual to read aloud for this
  element without aria-label providing one, since the icon character
  itself carries no meaningful spoken description on its own.
- aria-label="Search" gives this button an ACCESSIBLE NAME directly —
  when a screen reader user tabs to or otherwise encounters this
  button, it announces "Search, button" rather than announcing nothing
  useful (or, depending on the screen reader/browser combination,
  possibly announcing the raw emoji's generic Unicode description,
  which would be equally unhelpful).
- This is exactly the chapter's own "safe, high-value ARIA" example —
  aria-label exists specifically to fill this gap for icon-only
  controls, and this is one of the clearest, least risky, most
  common legitimate uses of ARIA in real interfaces.
- Note that the underlying element is STILL a real <button> — this
  fix adds an aria-label attribute on top of the already-correct native
  element from Chapter 2, rather than replacing the button with a div
  and reaching for ARIA to replace its behavior. The button's native
  keyboard operability and role are untouched; aria-label only adds the
  missing accessible NAME.