fix(DataViewFilters): add accessible name to filter category toggle

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');
+  });
 });

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}

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"