Skip to content

[Fix]: Accessibility Issues - Citical #677

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sc-ArshadHannan merged 4 commits into from
May 11, 2026
Merged

[Fix]: Accessibility Issues - Citical #677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1ca7cb0
Update buttons with discernible text
Sc-MuthulaAlwis May 7, 2026
b1678c5
Add label to form elements
Sc-MuthulaAlwis May 7, 2026
1303b4c
Rollback aria label changes from filter
Sc-MuthulaAlwis May 11, 2026
bfd72c0
Rollback aria label changes from filter
Sc-MuthulaAlwis May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/app/(registry)/graphics/icons/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -822,6 +822,7 @@ export default function IconsPage() {
});
}}
className="cursor-pointer inline-flex items-center justify-center w-8 h-8 hover:bg-muted rounded transition-colors"
aria-label={`Copy icon code for ${icon}`}
>
<Icon
path={path}
Expand Down
28 changes: 20 additions & 8 deletions src/app/content/bloks/prompt-input-floating.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -587,20 +587,26 @@ function FloatingChatCard() {
<PromptInputAttachments />
</PromptInputHeader>
<PromptInputToolbar inline>
<PromptInputAttachButton attachMenu={promptInputDemoAttachMenu} />
<PromptInputAttachButton
aria-label="add attachment"
attachMenu={promptInputDemoAttachMenu}
/>
<PromptInputSelections />
</PromptInputToolbar>
<PromptInputBody>
<PromptInputTextarea placeholder="/ for tools, @ for context references" />
</PromptInputBody>
<PromptInputFooter>
<PromptInputToolbar>
<PromptInputAttachButton attachMenu={promptInputDemoAttachMenu} />
<PromptInputAttachButton
aria-label="add attachment"
attachMenu={promptInputDemoAttachMenu}
/>
<PromptInputSelections />
</PromptInputToolbar>
<PromptInputActions>
<PromptInputMicButton />
<PromptInputSubmit />
<PromptInputMicButton aria-label="record voice input" />
<PromptInputSubmit aria-label="submit prompt" />
</PromptInputActions>
</PromptInputFooter>
</PromptInput>
Expand Down Expand Up @@ -635,7 +641,10 @@ export default function PromptInputFloatingDemo() {
</PromptInputHeader>
{/* Visible only when single-line (inline layout) */}
<PromptInputToolbar inline>
<PromptInputAttachButton attachMenu={promptInputDemoAttachMenu} />
<PromptInputAttachButton
aria-label="add attachment"
attachMenu={promptInputDemoAttachMenu}
/>
<PromptInputSelections />
</PromptInputToolbar>
<PromptInputBody>
Expand All @@ -644,12 +653,15 @@ export default function PromptInputFloatingDemo() {
<PromptInputFooter>
{/* Visible only when multiline (column layout) */}
<PromptInputToolbar>
<PromptInputAttachButton attachMenu={promptInputDemoAttachMenu} />
<PromptInputAttachButton
aria-label="add attachment"
attachMenu={promptInputDemoAttachMenu}
/>
<PromptInputSelections />
</PromptInputToolbar>
<PromptInputActions>
<PromptInputMicButton />
<PromptInputSubmit />
<PromptInputMicButton aria-label="record voice input" />
<PromptInputSubmit aria-label="submit prompt" />
</PromptInputActions>
</PromptInputFooter>
</PromptInput>
Expand Down
14 changes: 10 additions & 4 deletions src/app/content/bloks/prompt-input-questions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -591,7 +591,10 @@ function QuestionPromptCard({
</PromptInputHeader>
{variant === "floating" && (
<PromptInputToolbar inline>
<PromptInputAttachButton attachMenu={promptInputDemoAttachMenu} />
<PromptInputAttachButton
aria-label="add attachment"
attachMenu={promptInputDemoAttachMenu}
/>
<PromptInputSelections />
</PromptInputToolbar>
)}
Expand All @@ -600,12 +603,15 @@ function QuestionPromptCard({
</PromptInputBody>
<PromptInputFooter>
<PromptInputToolbar>
<PromptInputAttachButton attachMenu={promptInputDemoAttachMenu} />
<PromptInputAttachButton
aria-label="add attachment"
attachMenu={promptInputDemoAttachMenu}
/>
<PromptInputSelections />
</PromptInputToolbar>
<PromptInputActions>
<PromptInputMicButton />
<PromptInputSubmit />
<PromptInputMicButton aria-label="record voice input" />
<PromptInputSubmit aria-label="submit prompt" />
</PromptInputActions>
</PromptInputFooter>
</PromptInput>
Expand Down
13 changes: 10 additions & 3 deletions src/app/content/bloks/prompt-input-queued.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -579,7 +579,10 @@ function QueuedPromptCard({
</PromptInputHeader>
{variant === "floating" && (
<PromptInputToolbar inline>
<PromptInputAttachButton attachMenu={promptInputDemoAttachMenu} />
<PromptInputAttachButton
aria-label="add attachment"
attachMenu={promptInputDemoAttachMenu}
/>
<PromptInputSelections />
</PromptInputToolbar>
)}
Expand All @@ -588,11 +591,14 @@ function QueuedPromptCard({
</PromptInputBody>
<PromptInputFooter>
<PromptInputToolbar>
<PromptInputAttachButton attachMenu={promptInputDemoAttachMenu} />
<PromptInputAttachButton
aria-label="add attachment"
attachMenu={promptInputDemoAttachMenu}
/>
<PromptInputSelections />
</PromptInputToolbar>
<PromptInputActions>
<PromptInputMicButton />
<PromptInputMicButton aria-label="record voice input" />
<PromptInputSubmit
status={isProcessing ? "streaming" : "ready"}
onClick={(e) => {
Expand All @@ -601,6 +607,7 @@ function QueuedPromptCard({
setIsProcessing(false);
}
}}
aria-label="submit prompt"
/>
</PromptInputActions>
</PromptInputFooter>
Expand Down
9 changes: 6 additions & 3 deletions src/app/content/bloks/prompt-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -528,12 +528,15 @@ export default function PromptInputDemo() {
</PromptInputBody>
<PromptInputFooter>
<PromptInputToolbar>
<PromptInputAttachButton attachMenu={promptInputDemoAttachMenu} />
<PromptInputAttachButton
aria-label="add attachment"
attachMenu={promptInputDemoAttachMenu}
/>
<PromptInputSelections />
</PromptInputToolbar>
<PromptInputActions>
<PromptInputMicButton />
<PromptInputSubmit />
<PromptInputMicButton aria-label="record voice input" />
<PromptInputSubmit aria-label="submit prompt" />
</PromptInputActions>
</PromptInputFooter>
</PromptInput>
Expand Down
2 changes: 2 additions & 0 deletions src/app/content/bloks/sidebar-rhs-brief.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ function OverviewSection() {
checked={todoChecked}
onCheckedChange={(checked) => setTodoChecked(checked === true)}
className="shrink-0"
aria-label="Complete todo"
/>
<span className="text-sm flex-1">
<Badge size="sm" colorScheme="neutral" className="mr-1">
Expand All @@ -106,6 +107,7 @@ function OverviewSection() {
checked={newTodoChecked}
onCheckedChange={(checked) => setNewTodoChecked(checked === true)}
className="shrink-0"
aria-label="Add new todo"
/>
<Input
type="text"
Expand Down
2 changes: 2 additions & 0 deletions src/app/content/bloks/sidebar-rhs-heading-with-tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ function OverviewSection() {
checked={todoChecked}
onCheckedChange={(checked) => setTodoChecked(checked === true)}
className="shrink-0"
aria-label="Complete todo"
/>
<span className="text-sm flex-1">
<Badge size="sm" colorScheme="neutral" className="mr-1">
Expand All @@ -109,6 +110,7 @@ function OverviewSection() {
checked={newTodoChecked}
onCheckedChange={(checked) => setNewTodoChecked(checked === true)}
className="shrink-0"
aria-label="Add new todo"
/>
<Input
type="text"
Expand Down
8 changes: 2 additions & 6 deletions src/app/content/ui/combobox-multiple.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,7 @@ export default function ComboboxMultipleDemo() {
items={frameworks}
defaultValue={[frameworks[0]]}
>
<ComboboxChips
ref={anchor}
className="w-full max-w-xs"
aria-label="Combobox chips"
>
<ComboboxChips ref={anchor} className="w-full max-w-xs">
<ComboboxValue>
{(values: readonly string[]) => (
<React.Fragment>
Expand All @@ -45,7 +41,7 @@ export default function ComboboxMultipleDemo() {
{value}
</ComboboxChip>
))}
<ComboboxChipsInput />
<ComboboxChipsInput aria-label="Combobox chips input" />
</React.Fragment>
)}
</ComboboxValue>
Expand Down
6 changes: 3 additions & 3 deletions src/app/content/ui/sidebar-icon-combination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function SidebarIconCombinationDemo() {
<Icon path={mdiHome} />
<span>Home</span>
</SidebarMenuButton>
<SidebarMenuAction>
<SidebarMenuAction aria-label="open home in new tab">
<Icon path={mdiOpenInNew} />
</SidebarMenuAction>
</SidebarMenuItem>
Expand All @@ -31,7 +31,7 @@ export default function SidebarIconCombinationDemo() {
<Icon path={mdiAccount} />
<span>Profile</span>
</SidebarMenuButton>
<SidebarMenuAction>
<SidebarMenuAction aria-label="open profile in new tab">
<Icon path={mdiOpenInNew} />
</SidebarMenuAction>
</SidebarMenuItem>
Expand All @@ -40,7 +40,7 @@ export default function SidebarIconCombinationDemo() {
<Icon path={mdiCog} />
<span>Settings</span>
</SidebarMenuButton>
<SidebarMenuAction>
<SidebarMenuAction aria-label="open settings in new tab">
<Icon path={mdiOpenInNew} />
</SidebarMenuAction>
</SidebarMenuItem>
Expand Down
6 changes: 3 additions & 3 deletions src/app/content/ui/sidebar-trailing-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,23 @@ export default function SidebarTrailingIconDemo() {
<SidebarMenuButton isActive>
<span>Home</span>
</SidebarMenuButton>
<SidebarMenuAction>
<SidebarMenuAction aria-label="open home in new tab">
<Icon path={mdiOpenInNew} />
</SidebarMenuAction>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton>
<span>Profile</span>
</SidebarMenuButton>
<SidebarMenuAction>
<SidebarMenuAction aria-label="open profile in new tab">
<Icon path={mdiOpenInNew} />
</SidebarMenuAction>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton disabled>
<span>Settings</span>
</SidebarMenuButton>
<SidebarMenuAction>
<SidebarMenuAction aria-label="open settings in new tab">
<Icon path={mdiOpenInNew} />
</SidebarMenuAction>
</SidebarMenuItem>
Expand Down
Loading