🐛 Bug: Replace non-semantic interactive <div> elements with <button> in Layout component

Description

Several interactive elements in the Layout.tsx component are currently implemented using <div> tags with onClick handlers. This makes them inaccessible to keyboard users and screen readers, as <div> elements are not focusable by default and do not convey an interactive role to assistive technology.

Affected File:

components/Layout.tsx
Lines: 242-244, 248, 252, 265

Expected behavior

Interactive elements should use semantic HTML—specifically tags—to ensure they are:

• Focusable via keyboard (using the Tab key).
• Activatable using the Enter or Space keys.
• Correctly announced as buttons by screen readers.

fix

Refactor these elements to use <button> tags and ensure they have descriptive aria-label attributes.
Example Refactor:

<button
  onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
  aria-label="Scroll to top and search"
  className="..." // Ensure existing styles are preserved or updated for button defaults
>
  <Search />
</button>

Start in components/Layout.tsx at lines 242-244, 248, 252, and 265, and inspect the interactive div elements and their onClick handlers. Replace them with semantic button elements, add descriptive aria-label attributes, and preserve or adjust existing styles for button defaults. Done means the controls are keyboard-focusable, work with Enter and Space, and are announced as buttons by screen readers.