Skip to content

fix(a11y): add aria-label to icon-only buttons in EnvManager #503

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

Open
RavindiFernando wants to merge 1 commit into
base: main
Choose a base branch
from
+7 −6
Open

fix(a11y): add aria-label to icon-only buttons in EnvManager #503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion modules/playground/components/env-manager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export function EnvManager({
<KeyRound className="h-3.5 w-3.5" />
Environment Variables
</div>
<Button size="icon" variant="ghost" className="h-5 w-5" onClick={handleAddVar} title="Add Variable">
<Button size="icon" variant="ghost" className="h-5 w-5" onClick={handleAddVar} aria-label="Add Variable">
<Plus className="h-3.5 w-3.5" />
</Button>
</SidebarGroupLabel>
Expand Down Expand Up @@ -216,6 +216,7 @@ export function EnvManager({
variant="ghost"
className="h-8 w-8 text-muted-foreground hover:text-red-500 shrink-0"
onClick={() => handleRemoveVar(idx)}
aria-label={`Remove variable ${idx + 1}`}
>
<Trash2 className="h-3.5 w-3.5" />
</Button>
Expand Down
10 changes: 5 additions & 5 deletions tests/env-manager.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ vi.mock("@/components/ui/sidebar", () => ({
}));

vi.mock("@/components/ui/button", () => ({
Button: ({ children, onClick, disabled, className, title }: { children: React.ReactNode; onClick?: () => void; disabled?: boolean; className?: string; title?: string }) => (
<button onClick={onClick} disabled={disabled} className={className} title={title}>
Button: ({ children, onClick, disabled, className, "aria-label": ariaLabel }: { children: React.ReactNode; onClick?: () => void; disabled?: boolean; className?: string; "aria-label"?: string }) => (
<button onClick={onClick} disabled={disabled} className={className} aria-label={ariaLabel}>
{children}
</button>
),
Expand Down Expand Up @@ -76,7 +76,7 @@ describe("EnvManager Component", () => {
/>
);

const addButton = screen.getByTitle("Add Variable");
const addButton = screen.getByRole("button", { name: "Add Variable" });
fireEvent.click(addButton);

const keyInput = screen.getByPlaceholderText("API_KEY") as HTMLInputElement;
Expand All @@ -102,7 +102,7 @@ describe("EnvManager Component", () => {
);

// Add first variable
const addButton = screen.getByTitle("Add Variable");
const addButton = screen.getByRole("button", { name: "Add Variable" });
fireEvent.click(addButton);
const inputs = screen.getAllByPlaceholderText("API_KEY");
fireEvent.change(inputs[0], { target: { value: "PORT" } });
Expand All @@ -129,7 +129,7 @@ describe("EnvManager Component", () => {
);

// Add a variable (will start empty)
const addButton = screen.getByTitle("Add Variable");
const addButton = screen.getByRole("button", { name: "Add Variable" });
fireEvent.click(addButton);

expect(screen.getByText("⚠️ All keys must be filled.")).toBeDefined();
Expand Down
Loading