Skip to content

Accessibility: nested-interactive violation from focusable controls inside MuiTableSortLabel #929

Description

@ciiay

Context

Axe-core reports nested-interactive (serious) on tables rendered via @material-table/core when column sorting is enabled. In RHDH / Backstage demos this surfaces as focusable controls nested inside MuiTableSortLabel (role="button").

Problem

Interactive / focusable descendants inside the sort label create nested interactive controls, which fail axe nested-interactive and are problematic for screen reader / keyboard users.

Setting options={{ draggable: false }} reduces some nesting from drag handles, but the sort-label nesting remains an upstream markup issue.

Expected

Header / sort controls should not nest focusable interactive elements (or should use a markup pattern that passes axe nested-interactive).

Environment

Ask

Please consider fixing the header/sort control DOM so consumers can keep axe nested-interactive enabled.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions