[data grid] Filter panel moves keyboard focus to the "Value" field, skipping the "Columns" and "Operator" selects #24012

Steps to reproduce

Steps:

1. Render a Data Grid with filtering enabled (the default):
   <DataGrid rows={rows} columns={[{ field: 'name', headerName: 'Name' }, { field: 'status', headerName: 'Status' }]} />
2. Without using a mouse, press Tab to move focus to the grid’s toolbar, then use the arrow keys to move to the Filter button.
3. Press Enter or Space.
4. Note which control receives focus when the filter panel opens.
5. Press Shift+Tab to see what comes before it.

You can reproduce this in MUI's own Data Grid demos.

Current behavior

When the filter panel opens, keyboard focus goes straight to the "Value" text input. The "Columns" and "Operator" selects come earlier in the DOM and visual order, so focus skips them. Users have to press Shift+Tab to reach them. This creates a WCAG Focus Order issue.

Consequences:

- Screen reader users miss the form's structure. They hear "Value, edit text" first, with no context about which column or operator the filter applies to. The defaults (the first column and "contains") are never announced unless the user backtracks.

- The focus order doesn't match the visual and reading order. The user is placed on the last of the three input options, and has to go backward to reach the first controls.

- It makes it harder to create a mental model of how the form works. In user testing with visually impaired participants, more than one user concluded that the value should be entered first (because that was what was requested first), and that column and operator came afterward. They then clicked "Add filter" to find the column and operator fields, which created a second, unintended filter row.

Expected behavior

When the filter panel opens, focus moves to the first interactive control in the form (the "Columns" select, or the logic operator select when multiple filters exist). Users then hear the default column and operator before they reach the value, and can change them if they want to. Tab order then follows the visual order: column, operator, value, delete.
Nothing about pointer behavior changes. Mouse users are unaffected.

Two related scenarios:

• When the user activates "Add filter", move focus to the new row's first control, for the same reason.
• Keep a way for integrators to override the initial focus target, in case existing apps rely on the current behavior.

Context

We're trying to meet WCAG 2.2 AA. The issue described above creates problems for the following success criteria:

• 2.4.3 Focus Order: focus order must preserve meaning and operability. Entering a form mid-sequence, in a way that leads users to misunderstand it, doesn't meet this.
• 1.3.2 Meaningful Sequence: the sequence experienced through assistive technology should match the visual sequence.
• 3.3.2 Labels or Instructions: users need enough context to know what information to input. Landing on "Value" first removes that context.

Your environment

MUI X Data Grid version: @mui/x-data-grid-pro 8.0
System: OS: Windows
Binaries: Node: 24.13.0, npm: 11.6.2, pnpm: Not Found
Browsers: Chrome, Firefox, and one Edge user
Assistive technology: This behavior was confirmed with both NVDA and JAWS users in our research group

Search keywords: data grid, filter panel, focus order, initial focus, screen reader, keyboard, accessibility

Order ID: 129776