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

Bắt đầu trong packages/module/src/DataViewFilters/DataViewFilters.tsx, xem xét state activeAttributeMenu và MenuToggle quanh các dòng 46 và 80–88. Render DataViewFilters với các filter children Name và Label từ issue, sau đó chạy axe-core. Hoàn tất khi bộ chọn danh mục bộ lọc có accessible name có thể nhận biết trong lần render ban đầu và violation button-name nghiêm trọng đã biến mất.