Project 26: Cryptocurrency Ticker

React Engineer

Builds on these lessons

Accessible Components Accessible Forms Keyboard Navigation Aria In React Focus Management

Step 1 of 4

Project

An Accessible Toggle Button

Build a watch-toggle as a real <button aria-pressed={isWatched}>, not a styled <div onClick>. A real button is focusable and keyboard-activatable automatically; aria-pressed tells assistive tech this is a toggle and announces its current on/off state.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import { useState } from "react";

export default function TickerRow({ symbol }) {
  const [isWatched, setIsWatched] = useState(false);

  return (
    <div>
      <span>{symbol}</span>
      <button aria-pressed={isWatched} onClick={() => setIsWatched((prev) => !prev)}>
        {isWatched ? "★" : "☆"}
      </button>
    </div>
  );
}

← Previous Next →