🎨 Palette: Standardize tooltips and accessibility for icon-only buttons#535
🎨 Palette: Standardize tooltips and accessibility for icon-only buttons#535ngoiyaeric wants to merge 1 commit intomainfrom
Conversation
This change improves the user experience by adding tooltips and ARIA labels to icon-only buttons across the header, chat panel, and mobile bar. Key improvements: - Enabled `TooltipProvider` globally in `app/layout.tsx`. - Added `Tooltip` and `aria-label` to History, Calendar, and Usage buttons in `components/header.tsx`. - Added `aria-label` to all mobile icon buttons in `components/mobile-icons-bar.tsx`. - Added `Tooltip` and `aria-label` to New Chat, Attachment, and Clear Attachment buttons in `components/chat-panel.tsx`. - Replaced legacy `title` attributes with consistent tooltips. This ensures that the interface is more intuitive for desktop users and accessible for screen reader users. Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
|
WalkthroughAdded comprehensive accessibility enhancements across the application by introducing Tooltip components and aria-label attributes to icon-only buttons. This includes wrapping a TooltipProvider around the main layout, documenting accessibility standards in a new palette guide, and systematically applying tooltips and proper labeling to interactive icon buttons throughout the UI. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![charliecreates[bot]](https://avatars.githubusercontent.com/in/1140780?s=60&v=4){kind=small}
There was a problem hiding this comment.
- Root-level
TooltipProvideris added without explicit configuration; setting a deliberate delay can improve UX consistency. - Some tooltip text and
aria-labelvalues diverge (e.g., History logo), which can create inconsistent semantics; align them where possible.
Additional notes (3)
-
Maintainability |
app/layout.tsx:110-120
TooltipProvideris introduced at the root without any configuration. Depending on your tooltip implementation (commonly Radix), the provider often supportsdelayDuration,skipDelayDuration, and similar options. Setting a small, consistent delay can prevent accidental popups during quick cursor passes and reduce visual noise across the app. -
Readability |
components/chat-panel.tsx:222-242
On desktop, the attachment icon button is only rendered when!isMobile, but the icon size still branches onisMobile ? 18 : 20. In this branchisMobileis always false, so the conditional is dead and adds noise. -
Maintainability |
components/chat-panel.tsx:310-317
Several tooltip/label strings differ only by capitalization (e.g.,Clear attachmentvsAttach File). This is minor, but inconsistent casing tends to spread and makes UX feel uneven. Consider standardizing to a single casing style (Title Case or sentence case) for all tooltip content and corresponding labels.
Summary of changes
What changed
✅ Global tooltip enablement
- Wrapped the app shell with
TooltipProviderinapp/layout.tsxso tooltips can be used consistently across the UI.
✅ Standardized icon-only button accessibility
- Replaced legacy
titleattributes and unlabeled icon buttons with:aria-labelfor screen reader supportTooltip+TooltipContentfor visible labels on desktop
Updated components
components/header.tsx: Added tooltips +aria-labelto History (logo), Calendar, and Usage icon buttons.components/chat-panel.tsx: Added tooltips +aria-labelto New Chat, Attach File, and Clear attachment icon buttons.components/mobile-icons-bar.tsx: Addedaria-labelto all mobile icon buttons.
Documentation
- Added
.jules/palette.mdentry capturing the guideline: icon-only buttons should useTooltip(desktop) and always includearia-label.
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <Button variant="ghost" size="icon" onClick={toggleHistory} data-testid="logo-history-toggle" aria-label="Toggle history"> | ||
| <Image | ||
| src="/images/logo.svg" | ||
| alt="Logo" | ||
| width={20} | ||
| height={20} | ||
| className="h-5 w-auto" | ||
| /> | ||
| </Button> | ||
| </TooltipTrigger> | ||
| <TooltipContent>History</TooltipContent> | ||
| </Tooltip> |
There was a problem hiding this comment.
The tooltip content for the logo button is History, while the aria-label is Toggle history. This mismatch is minor but it can create inconsistent mental models (and makes it harder to keep analytics/testing documentation aligned). Prefer the tooltip text and aria-label to reflect the same action/label unless there's a strong reason to differ.
Suggestion
Align the tooltip label and aria-label so they describe the same control. For example:
<Button
...
aria-label="History"
>
...
</Button>
<TooltipContent>History</TooltipContent>Or, if the intent is explicitly toggling:
aria-label="Toggle history"
...
<TooltipContent>Toggle history</TooltipContent>Reply with "@CharlieHelps yes please" if you'd like me to add a commit that standardizes these labels across the header.
| <a href="https://buy.stripe.com/14A3cv7K72TR3go14Nasg02" target="_blank" rel="noopener noreferrer"> | ||
| <Button variant="ghost" size="icon"> | ||
| <Button variant="ghost" size="icon" aria-label="Purchase Credits"> | ||
| <TentTree className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" /> | ||
| </Button> | ||
| </a> |
There was a problem hiding this comment.
The purchase credits button is wrapped in an <a> with target="_blank", and the inner Button now has an aria-label. Make sure the accessible name is attached to the actual interactive element receiving focus/click events (often the anchor), and avoid nested interactive semantics if your Button renders a <button> by default. If Button renders a <button>, this becomes invalid/awkward semantics inside an <a>.
Suggestion
If Button supports asChild, consider moving the anchor inside the button for correct semantics:
<Button asChild variant="ghost" size="icon" aria-label="Purchase credits">
<a href="..." target="_blank" rel="noopener noreferrer">
<TentTree ... />
</a>
</Button>Alternatively, add the aria-label to the <a> and ensure the inner component is not a <button>. Reply with "@CharlieHelps yes please" if you'd like me to adjust this safely based on how Button is implemented in this repo.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (5)
.jules/palette.mdapp/layout.tsxcomponents/chat-panel.tsxcomponents/header.tsxcomponents/mobile-icons-bar.tsx
🧰 Additional context used
🧬 Code graph analysis (3)
app/layout.tsx (3)
components/ui/tooltip.tsx (1)
TooltipProvider(30-30)components/header.tsx (1)
Header(25-116)components/history-sidebar.tsx (1)
HistorySidebar(15-35)
components/chat-panel.tsx (4)
components/ui/tooltip.tsx (4)
Tooltip(30-30)TooltipTrigger(30-30)TooltipContent(30-30)props(17-27)components/ui/button.tsx (1)
Button(56-56)lib/utils/index.ts (1)
cn(10-12)tests/chat.spec.ts (1)
test(4-89)
components/header.tsx (2)
components/ui/tooltip.tsx (4)
Tooltip(30-30)TooltipTrigger(30-30)TooltipContent(30-30)props(17-27)components/history.tsx (1)
History(11-26)
🪛 markdownlint-cli2 (0.21.0)
.jules/palette.md
[warning] 1-1: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below
(MD022, blanks-around-headings)
[warning] 1-1: First line in a file should be a top-level heading
(MD041, first-line-heading, first-line-h1)
🔇 Additional comments (3)
app/layout.tsx (1)
113-120: LGTM —TooltipProvidercorrectly scopes all tooltip-enabled subtreesWrapping
Header,HistorySidebar,Footer, andchildreninsideTooltipProviderensures allTooltip/TooltipTrigger/TooltipContentdescendants share a single context.AnalyticsandSpeedInsightsare correctly left outside.components/header.tsx (1)
108-110: LGTM — mobileUsagebutton correctly omitsTooltip
aria-labelonly on the mobile variant is the right pattern; hover tooltips aren't useful on touch devices.components/chat-panel.tsx (1)
173-188: LGTM —New Chatbutton Tooltip is correctly structured
aria-labelandTooltipContentmatch exactly;data-testidis preserved for existing tests.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.jules/palette.md:
- Around line 1-3: Change the first heading from a level-2 to a top-level
heading and insert a blank line after it: replace "## 2025-05-23 -
[Standardizing Icon Button Accessibility and Tooltips]" with "# 2025-05-23 -
[Standardizing Icon Button Accessibility and Tooltips]" and add an empty line
between that heading and the following paragraph to satisfy MD041 and MD022 for
the content under the "Standardizing Icon Button Accessibility and Tooltips"
entry.
In `@components/chat-panel.tsx`:
- Around line 310-317: The TooltipContent and aria-label for the
clear-attachment button are using "Clear attachment" (lowercase "a") which is
inconsistent with the attach button's "Attach File"; update the text to match
the file's chosen convention (e.g., change TooltipContent and aria-label in the
Button that calls clearAttachment to "Clear Attachment") so TooltipContent, the
Button's aria-label and any related text use the same capitalization style
across the component.
In `@components/header.tsx`:
- Around line 56-69: The Tooltip/Button pairs use inconsistent accessible names:
align the visible tooltip text (TooltipContent) with the button aria-labels for
consistency; update the Logo/history TooltipContent to match the Button
aria-label "Toggle history" (or change the aria-label to "History") and likewise
make the Calendar pair consistent between "Open Calendar" and "Calendar" so all
TooltipContent strings and Button aria-label values follow the same verb-noun
pattern; locate the elements using Tooltip, TooltipTrigger, Button (the logo's
onClick toggleHistory) and TooltipContent to make the changes.
In `@components/mobile-icons-bar.tsx`:
- Around line 48-50: The Search Button in mobile-icons-bar.tsx is labelled but
has no onClick, causing an accessible control that does nothing; either wire it
to the search-opening handler or remove it until implemented — add an onClick to
the Button (e.g., onClick={props.onOpenSearch} or onClick={() =>
openSearchModal()}), ensure the component accepts/forwards a handler prop (e.g.,
onOpenSearch) if needed, and keep the aria-label and testid intact so keyboard
and screen-reader users activate the real action instead of a no-op.
- Around line 51-55: The anchor and the Button are both focusable, leaving the
outer <a> unlabeled and causing duplicate tab stops; make the anchor the single
interactive element by using the Button’s asChild prop (or otherwise ensuring
only the <a> is focusable) so the accessible name is on the anchor.
Specifically, replace the current <a><Button ... aria-label="Purchase
Credits">...</Button></a> pattern with <Button asChild variant="ghost"
size="icon"><a href="..." target="_blank" rel="noopener noreferrer"
aria-label="Purchase Credits"><TentTree ... /></a></Button>, so the anchor
carries the aria-label and there is only one focusable element.
- Line 62: The History icon usage in MobileIconsBar lacks an aria-label because
the History component doesn't accept or forward one; update the History
component to accept an optional ariaLabel (or aria-label) prop in its props
signature and pass it through to the rendered <Button> (or IconButton) element
(e.g., <Button aria-label={ariaLabel} ...>) so screen readers receive the label;
ensure the prop name matches other icon components and update any internal prop
destructuring in the History component to forward the aria attribute.
| ## 2025-05-23 - [Standardizing Icon Button Accessibility and Tooltips] | ||
| **Learning:** Icon-only buttons without labels or tooltips create "mystery meat navigation" and are inaccessible to screen readers. Standardizing on `Tooltip` for visual labels and `aria-label` for parity ensures a consistent and accessible UX across desktop and mobile. | ||
| **Action:** Always wrap new icon-only buttons in `Tooltip` (desktop) and ensure `aria-label` is present for all icon-only interactions. |
There was a problem hiding this comment.
Markdown linting violations flagged by markdownlint-cli2
Two valid linter warnings apply:
- MD041: The first line should be a top-level (
#) heading; currently uses##. - MD022: A blank line is required after a heading before body content.
♻️ Proposed fix
-## 2025-05-23 - [Standardizing Icon Button Accessibility and Tooltips]
-**Learning:** Icon-only buttons without labels or tooltips create "mystery meat navigation" and are inaccessible to screen readers. Standardizing on `Tooltip` for visual labels and `aria-label` for parity ensures a consistent and accessible UX across desktop and mobile.
-**Action:** Always wrap new icon-only buttons in `Tooltip` (desktop) and ensure `aria-label` is present for all icon-only interactions.
+# 2025-05-23 - [Standardizing Icon Button Accessibility and Tooltips]
+
+**Learning:** Icon-only buttons without labels or tooltips create "mystery meat navigation" and are inaccessible to screen readers. Standardizing on `Tooltip` for visual labels and `aria-label` for parity ensures a consistent and accessible UX across desktop and mobile.
+**Action:** Always wrap new icon-only buttons in `Tooltip` (desktop) and ensure `aria-label` is present for all icon-only interactions.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ## 2025-05-23 - [Standardizing Icon Button Accessibility and Tooltips] | |
| **Learning:** Icon-only buttons without labels or tooltips create "mystery meat navigation" and are inaccessible to screen readers. Standardizing on `Tooltip` for visual labels and `aria-label` for parity ensures a consistent and accessible UX across desktop and mobile. | |
| **Action:** Always wrap new icon-only buttons in `Tooltip` (desktop) and ensure `aria-label` is present for all icon-only interactions. | |
| # 2025-05-23 - [Standardizing Icon Button Accessibility and Tooltips] | |
| **Learning:** Icon-only buttons without labels or tooltips create "mystery meat navigation" and are inaccessible to screen readers. Standardizing on `Tooltip` for visual labels and `aria-label` for parity ensures a consistent and accessible UX across desktop and mobile. | |
| **Action:** Always wrap new icon-only buttons in `Tooltip` (desktop) and ensure `aria-label` is present for all icon-only interactions. |
🧰 Tools
🪛 markdownlint-cli2 (0.21.0)
[warning] 1-1: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below
(MD022, blanks-around-headings)
[warning] 1-1: First line in a file should be a top-level heading
(MD041, first-line-heading, first-line-h1)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.jules/palette.md around lines 1 - 3, Change the first heading from a
level-2 to a top-level heading and insert a blank line after it: replace "##
2025-05-23 - [Standardizing Icon Button Accessibility and Tooltips]" with "#
2025-05-23 - [Standardizing Icon Button Accessibility and Tooltips]" and add an
empty line between that heading and the following paragraph to satisfy MD041 and
MD022 for the content under the "Standardizing Icon Button Accessibility and
Tooltips" entry.
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <Button variant="ghost" size="icon" onClick={clearAttachment} data-testid="clear-attachment-button" aria-label="Clear attachment"> | ||
| <X size={16} /> | ||
| </Button> | ||
| </TooltipTrigger> | ||
| <TooltipContent>Clear attachment</TooltipContent> | ||
| </Tooltip> |
There was a problem hiding this comment.
Capitalization inconsistency: "Clear attachment" vs "Attach File"
TooltipContent and aria-label for the clear button use "Clear attachment" (lowercase "a") while the attach button uses "Attach File" (title case). Consider aligning to a single convention across all tooltips in this file:
- <Button ... aria-label="Clear attachment">
+ <Button ... aria-label="Clear Attachment">
...
- <TooltipContent>Clear attachment</TooltipContent>
+ <TooltipContent>Clear Attachment</TooltipContent>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Tooltip> | |
| <TooltipTrigger asChild> | |
| <Button variant="ghost" size="icon" onClick={clearAttachment} data-testid="clear-attachment-button" aria-label="Clear attachment"> | |
| <X size={16} /> | |
| </Button> | |
| </TooltipTrigger> | |
| <TooltipContent>Clear attachment</TooltipContent> | |
| </Tooltip> | |
| <Tooltip> | |
| <TooltipTrigger asChild> | |
| <Button variant="ghost" size="icon" onClick={clearAttachment} data-testid="clear-attachment-button" aria-label="Clear Attachment"> | |
| <X size={16} /> | |
| </Button> | |
| </TooltipTrigger> | |
| <TooltipContent>Clear Attachment</TooltipContent> | |
| </Tooltip> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/chat-panel.tsx` around lines 310 - 317, The TooltipContent and
aria-label for the clear-attachment button are using "Clear attachment"
(lowercase "a") which is inconsistent with the attach button's "Attach File";
update the text to match the file's chosen convention (e.g., change
TooltipContent and aria-label in the Button that calls clearAttachment to "Clear
Attachment") so TooltipContent, the Button's aria-label and any related text use
the same capitalization style across the component.
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <Button variant="ghost" size="icon" onClick={toggleHistory} data-testid="logo-history-toggle" aria-label="Toggle history"> | ||
| <Image | ||
| src="/images/logo.svg" | ||
| alt="Logo" | ||
| width={20} | ||
| height={20} | ||
| className="h-5 w-auto" | ||
| /> | ||
| </Button> | ||
| </TooltipTrigger> | ||
| <TooltipContent>History</TooltipContent> | ||
| </Tooltip> |
There was a problem hiding this comment.
Inconsistent pairing of aria-label and tooltip text
Two of the three wrapped buttons have mismatched accessible names and tooltip labels:
| Button | aria-label |
TooltipContent |
|---|---|---|
| Logo/history | "Toggle history" |
"History" |
| Calendar | "Open Calendar" |
"Calendar" |
| Usage | "Usage" |
"Usage" ✓ |
WCAG 2.5.3 (Label in Name) requires that the visible label text be present as a substring in the accessible name; both current cases technically satisfy this, but the inconsistency makes the pattern harder to follow and maintain. Recommend either aligning tooltip and aria-label verbatim, or adopting a consistent verb-noun form ("Toggle History", "Open Calendar") across both:
♻️ Proposed alignment
- <Button ... aria-label="Toggle history">
+ <Button ... aria-label="History">
...
- <TooltipContent>History</TooltipContent>
+ <TooltipContent>History</TooltipContent>- <Button ... aria-label="Open Calendar">
+ <Button ... aria-label="Calendar">
...
- <TooltipContent>Calendar</TooltipContent>
+ <TooltipContent>Calendar</TooltipContent>Also applies to: 80-87
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/header.tsx` around lines 56 - 69, The Tooltip/Button pairs use
inconsistent accessible names: align the visible tooltip text (TooltipContent)
with the button aria-labels for consistency; update the Logo/history
TooltipContent to match the Button aria-label "Toggle history" (or change the
aria-label to "History") and likewise make the Calendar pair consistent between
"Open Calendar" and "Calendar" so all TooltipContent strings and Button
aria-label values follow the same verb-noun pattern; locate the elements using
Tooltip, TooltipTrigger, Button (the logo's onClick toggleHistory) and
TooltipContent to make the changes.
| <Button variant="ghost" size="icon" data-testid="mobile-search-button" aria-label="Search"> | ||
| <Search className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" /> | ||
| </Button> |
There was a problem hiding this comment.
Search button is non-functional — labelled but missing onClick
The button has aria-label="Search" but no onClick handler. Keyboard and screen reader users will encounter a reachable control that silently does nothing when activated, which is worse from an accessibility perspective than an unlabelled button that at least fails visually. Either wire up the search handler here or remove the button until the feature is implemented.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/mobile-icons-bar.tsx` around lines 48 - 50, The Search Button in
mobile-icons-bar.tsx is labelled but has no onClick, causing an accessible
control that does nothing; either wire it to the search-opening handler or
remove it until implemented — add an onClick to the Button (e.g.,
onClick={props.onOpenSearch} or onClick={() => openSearchModal()}), ensure the
component accepts/forwards a handler prop (e.g., onOpenSearch) if needed, and
keep the aria-label and testid intact so keyboard and screen-reader users
activate the real action instead of a no-op.
| <a href="https://buy.stripe.com/14A3cv7K72TR3go14Nasg02" target="_blank" rel="noopener noreferrer"> | ||
| <Button variant="ghost" size="icon"> | ||
| <Button variant="ghost" size="icon" aria-label="Purchase Credits"> | ||
| <TentTree className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" /> | ||
| </Button> | ||
| </a> |
There was a problem hiding this comment.
aria-label is on the inner <Button>, not on the wrapping <a> — both elements are focusable
The new aria-label="Purchase Credits" is on the <button> element rendered by <Button>, but the outer <a> is also a focusable landmark with no label. Some assistive technology + browser combinations will tab-stop on both elements separately. The idiomatic fix is to use the anchor itself as the interactive element (e.g., via Button with asChild wrapping an <a>) so there is a single focusable node:
♻️ Suggested structure
- <a href="https://buy.stripe.com/14A3cv7K72TR3go14Nasg02" target="_blank" rel="noopener noreferrer">
- <Button variant="ghost" size="icon" aria-label="Purchase Credits">
- <TentTree className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
- </Button>
- </a>
+ <Button variant="ghost" size="icon" aria-label="Purchase Credits" asChild>
+ <a href="https://buy.stripe.com/14A3cv7K72TR3go14Nasg02" target="_blank" rel="noopener noreferrer">
+ <TentTree className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
+ </a>
+ </Button>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/mobile-icons-bar.tsx` around lines 51 - 55, The anchor and the
Button are both focusable, leaving the outer <a> unlabeled and causing duplicate
tab stops; make the anchor the single interactive element by using the Button’s
asChild prop (or otherwise ensuring only the <a> is focusable) so the accessible
name is on the anchor. Specifically, replace the current <a><Button ...
aria-label="Purchase Credits">...</Button></a> pattern with <Button asChild
variant="ghost" size="icon"><a href="..." target="_blank" rel="noopener
noreferrer" aria-label="Purchase Credits"><TentTree ... /></a></Button>, so the
anchor carries the aria-label and there is only one focusable element.
| <Button variant="ghost" size="icon" data-testid="mobile-submit-button" onClick={onSubmitClick} aria-label="Send Message"> | ||
| <ArrowRight className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" /> | ||
| </Button> | ||
| <History location="header" /> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# First, confirm History component has no aria-label or role annotation
echo "=== Checking for aria-label in History-related files ==="
rg -n "aria-label" components/history.tsx components/history-container.tsx 2>/dev/null || echo "No aria-label found"
echo ""
echo "=== Examining History component structure ==="
cat -n components/history.tsx | head -100Repository: QueueLab/QCX
Length of output: 1045
🏁 Script executed:
#!/bin/bash
# Check the mobile-icons-bar.tsx file to see other buttons and their aria-labels
echo "=== Mobile Icons Bar - checking icon buttons structure ==="
cat -n components/mobile-icons-bar.tsxRepository: QueueLab/QCX
Length of output: 3176
🏁 Script executed:
#!/bin/bash
# Check HistoryContainer implementation
echo "=== History Container ==="
cat -n components/history-container.tsxRepository: QueueLab/QCX
Length of output: 538
Add aria-label support to the History component
The History component renders a <Button> icon with no aria-label prop support. Every other icon button in MobileIconsBar has an aria-label, but the History button at line 62 is missing one. Update the History component to accept and apply an aria-label prop to make it accessible to screen readers.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/mobile-icons-bar.tsx` at line 62, The History icon usage in
MobileIconsBar lacks an aria-label because the History component doesn't accept
or forward one; update the History component to accept an optional ariaLabel (or
aria-label) prop in its props signature and pass it through to the rendered
<Button> (or IconButton) element (e.g., <Button aria-label={ariaLabel} ...>) so
screen readers receive the label; ensure the prop name matches other icon
components and update any internal prop destructuring in the History component
to forward the aria attribute.
2 participants
Improved accessibility and UX by standardizing tooltips and ARIA labels for icon-only buttons.
PR created automatically by Jules for task 7713885870246008838 started by @ngoiyaeric
Summary by CodeRabbit
Release Notes
New Features
Documentation