Redundant Button Element in 'New Chat' Link

[derekjackson-das]

Issue Description:
The "New Chat" link also contains a button element that serves a redundant purpose. The repeated UI is not necessary and is more likely to lead to confusion.

WCAG Criteria:
4.1.1 Parsing - A

Code Snippet:

<a href="/" tabindex="0" data-testid="nav-new-chat" class="group flex h-10 items-center gap-2 rounded-lg px-2 font-medium transition-colors duration-200 hover:bg-surface-hover" aria-label="New chat">
  <div class="h-7 w-7 flex-shrink-0">
    <div class="icon-xl relative flex h-full overflow-hidden rounded-full" style="width: 100%; height: 100%;">
      <img src="https://static.sandbox.ai.huit.harvard.edu/img/openai-logomark.png" alt="GPT-4o" class="object-cover" style="width: 100%; height: 100%;">
    </div>
  </div>
  <div class="grow overflow-hidden text-ellipsis whitespace-nowrap text-sm text-text-primary">New chat</div>
  <div class="flex gap-3">
    <span class="flex items-center" data-state="closed">
      <button id="nav-new-chat-btn" aria-label="New chat" class="text-text-primary" data-state="closed"></button>
    </span>
  </div>
</a>

Notes:
In this case, the button is not necessary, and the link can handle the "New Chat" action via one interactive element, which would result in a cleaner UI and align with the pattern of the rest of the Chat History.

• A simple way to fix this would be to add aria-hidden="true" to the button element to hide it from the Accessibility API and also add tabindex="-1" to remove it from the focus order. This leaves the button but essentially makes it inoperable or discoverable by AT.
• A more robust solution would be to remove the button element while the icon can remains as part of the anchor (but it should remain hidden as well with aria-hidden attribute).

[danny-avila]

Closed by #4091

Recording.2024-09-21.225456.mp4