From d5743f5c19f5556d4fb0f9680ecfeefed9577b6c Mon Sep 17 00:00:00 2001
From: aloktomarr <aloktomar055@gmail.com>
Date: Sun, 26 Jul 2026 16:31:56 +0000
Subject: [PATCH] fix(DataViewFilters): add accessible name to filter category
 toggle

The category-selector MenuToggle rendered only an icon plus activeAttributeMenu, which starts empty and is populated after first render, so screen readers saw an unnamed button (critical axe button-name violation, WCAG 4.1.2).

Add a fallback aria-label to the toggle and initialize the active category synchronously from the first filter's title so the control is never empty. Includes a regression test.

Fixes #680
---
 .../src/DataViewFilters/DataViewFilters.test.tsx | 16 ++++++++++++++++
 .../src/DataViewFilters/DataViewFilters.tsx      |  6 +++++-
 .../__snapshots__/DataViewFilters.test.tsx.snap  |  1 +
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/module/src/DataViewFilters/DataViewFilters.test.tsx b/packages/module/src/DataViewFilters/DataViewFilters.test.tsx
index 172ab6f6..46f72f40 100644
--- a/packages/module/src/DataViewFilters/DataViewFilters.test.tsx
+++ b/packages/module/src/DataViewFilters/DataViewFilters.test.tsx
@@ -1,4 +1,5 @@
 import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import DataViewFilters from './DataViewFilters';
 import DataViewToolbar from '../DataViewToolbar';
 import DataViewTextFilter from '../DataViewTextFilter';
@@ -37,4 +38,19 @@ describe('DataViewFilters component', () => {
     fireEvent.input(input, { target: { value: 'abc' } });
     expect(mockOnChange).toHaveBeenCalledWith('one', { one: 'abc' });
   });
+
+  it('renders an accessible name on the filter category toggle (#680)', () => {
+    const { container } = render(
+      <DataViewToolbar
+        filters={
+          <DataViewFilters onChange={mockOnChange} values={{}}>
+            <DataViewTextFilter filterId="name" title="Name" />
+            <DataViewTextFilter filterId="label" title="Label" />
+          </DataViewFilters>
+        }
+      />
+    );
+    const categoryToggle = container.querySelector('.pf-v6-c-menu-toggle');
+    expect(categoryToggle).toHaveAccessibleName('Filter by');
+  });
 });
diff --git a/packages/module/src/DataViewFilters/DataViewFilters.tsx b/packages/module/src/DataViewFilters/DataViewFilters.tsx
index dc0dc218..b5b95842 100644
--- a/packages/module/src/DataViewFilters/DataViewFilters.tsx
+++ b/packages/module/src/DataViewFilters/DataViewFilters.tsx
@@ -43,7 +43,10 @@ export const DataViewFilters = <T extends object>({
   values,
   ...props
 }: DataViewFiltersProps<T>) => {
-  const [ activeAttributeMenu, setActiveAttributeMenu ] = useState<string>('');
+  const [ activeAttributeMenu, setActiveAttributeMenu ] = useState<string>(() => {
+    const firstFilter = Children.toArray(children).find(isValidElement);
+    return firstFilter ? String((firstFilter.props as { title?: string }).title ?? '') : '';
+  });
   const [ isAttributeMenuOpen, setIsAttributeMenuOpen ] = useState(false);
   const attributeToggleRef = useRef<HTMLButtonElement>(null);
   const attributeMenuRef = useRef<HTMLDivElement>(null);
@@ -80,6 +83,7 @@ export const DataViewFilters = <T extends object>({
   const attributeToggle = (
     <MenuToggle
       ref={attributeToggleRef}
+      aria-label="Filter by"
       onClick={() => setIsAttributeMenuOpen(!isAttributeMenuOpen)}
       isExpanded={isAttributeMenuOpen}
       icon={toggleIcon}
diff --git a/packages/module/src/DataViewFilters/__snapshots__/DataViewFilters.test.tsx.snap b/packages/module/src/DataViewFilters/__snapshots__/DataViewFilters.test.tsx.snap
index 63fbfd92..dccf1aad 100644
--- a/packages/module/src/DataViewFilters/__snapshots__/DataViewFilters.test.tsx.snap
+++ b/packages/module/src/DataViewFilters/__snapshots__/DataViewFilters.test.tsx.snap
@@ -59,6 +59,7 @@ exports[`DataViewFilters component should render correctly 1`] = `
               <div>
                 <button
                   aria-expanded="false"
+                  aria-label="Filter by"
                   class="pf-v6-c-menu-toggle"
                   data-ouia-component-id="OUIA-Generated-MenuToggle-1"
                   data-ouia-component-type="PF6/MenuToggle"