DataViewFilters: MenuToggle for filter category selector has no accessible name

Description

The DataViewFilters component renders a MenuToggle as the filter category selector (e.g., to switch between "Name" and "Label" filters). This button has no accessible name, causing a critical button-name axe violation (WCAG 4.1.2).

Root cause

In DataViewFilters.tsx:

1. activeAttributeMenu is initialized as '' (line 46)
2. It's only populated via useEffect after the first render (lines 63–65)
3. The MenuToggle has no aria-label prop (lines 80–88)

On the initial render, the button has no text content, no aria-label, no aria-labelledby, and no title — making it completely invisible to screen readers.

// Line 46 — empty initial state
const [activeAttributeMenu, setActiveAttributeMenu] = useState<string>('');

// Lines 80-88 — no aria-label, children is '' on first render
const attributeToggle = (
  <MenuToggle
    ref={attributeToggleRef}
    onClick={() => setIsAttributeMenuOpen(!isAttributeMenuOpen)}
    isExpanded={isAttributeMenuOpen}
    icon={toggleIcon}
  >
    {activeAttributeMenu}
  </MenuToggle>
);

Suggested fix

Two changes:

4. Initialize activeAttributeMenu from the first child's title prop synchronously instead of via useEffect, so it's never empty:

   const initialTitle = useMemo(() => filterItems[0]?.title ?? '', []);
   const [activeAttributeMenu, setActiveAttributeMenu] = useState<string>(initialTitle);
   

5. Add a fallback aria-label on the MenuToggle:

   <MenuToggle
     aria-label="Filter by"
     ...
   >
   

How to reproduce

Render DataViewFilters with 2+ filter children and run axe-core:

<DataViewFilters>
  <DataViewTextFilter filterId="name" title="Name" />
  <DataViewTextFilter filterId="label" title="Label" />
</DataViewFilters>

axe reports:

critical button-name: Buttons must have discernible text
Target: .pf-m-filter-group > div:nth-child(1) > .pf-v6-c-menu-toggle

Environment

• @patternfly/react-data-view: 6.5.0

• Detected by: axe-core 4.11 via @axe-core/playwright

Related

• #21 (DataView accessibility meta-issue)

Jira Issue: PF-4416

Commencez dans packages/module/src/DataViewFilters/DataViewFilters.tsx en examinant l’état activeAttributeMenu et le MenuToggle autour des lignes 46 et 80–88. Effectuez le rendu de DataViewFilters avec les enfants de filtre Name et Label de l’issue, puis exécutez axe-core. C’est terminé lorsque le sélecteur de catégorie de filtre possède un nom accessible perceptible lors du rendu initial et que la violation critique button-name a disparu.