From 7f0a0a9f2e6058f7b34970f0c2c2e2c7c1198562 Mon Sep 17 00:00:00 2001
From: Marcos Paulo Diniz <marcosdinizpaulo@gmail.com>
Date: Mon, 14 Sep 2026 01:00:51 -0300
Subject: [PATCH] fix(ui): add ARIA labels to DataTable interactive buttons

Added aria-label attributes to all interactive buttons in the DataTable component to improve screen reader navigation and accessibility:
- Mobile filters toggle button
- Tab selection dropdown
- Desktop filters button
- Sort button
- Columns toggle button
- Clear selection button

Fixes #218
---
 packages/ui/src/components/data-table.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/ui/src/components/data-table.tsx b/packages/ui/src/components/data-table.tsx
index 2f3663b42..d6bcf1489 100644
--- a/packages/ui/src/components/data-table.tsx
+++ b/packages/ui/src/components/data-table.tsx
@@ -366,6 +366,7 @@ export function DataTable<TRow, TSub = unknown>({
 							variant="ghost"
 							size="sm"
 							onClick={() => selection.state.clear()}
+							aria-label="Clear selection"
 						>
 							Clear
 						</Button>
@@ -387,6 +388,7 @@ export function DataTable<TRow, TSub = unknown>({
 						className="w-full justify-between sm:hidden"
 						aria-expanded={filtersOpen}
 						aria-controls={filtersId}
+						aria-label="Toggle filters"
 						onClick={() => setFiltersOpen((open) => !open)}
 					>
 						<span className="flex items-center gap-2">
@@ -424,6 +426,7 @@ export function DataTable<TRow, TSub = unknown>({
 									variant="outline"
 									size="sm"
 									className="w-full justify-between sm:w-auto sm:min-w-44"
+									aria-label={`Select tab: ${activeTabLabel}`}
 								>
 									<span className="truncate">{activeTabLabel}</span>
 									<ChevronDown className="shrink-0 opacity-60" />
@@ -463,6 +466,7 @@ export function DataTable<TRow, TSub = unknown>({
 										variant="outline"
 										size="sm"
 										className="justify-start sm:justify-center"
+										aria-label="Filter table"
 									>
 										<Filter data-icon="inline-start" />
 										Filters
@@ -492,6 +496,7 @@ export function DataTable<TRow, TSub = unknown>({
 										variant="outline"
 										size="sm"
 										className="justify-start sm:justify-center"
+										aria-label="Sort table"
 									>
 										<ArrowsVertical data-icon="inline-start" />
 										Sort
@@ -538,6 +543,7 @@ export function DataTable<TRow, TSub = unknown>({
 										variant="outline"
 										size="sm"
 										className="justify-start sm:justify-center"
+										aria-label="Toggle columns"
 									>
 										<Column data-icon="inline-start" />
 										Columns