Skip to content

fix: Keyboard accessibility for column options in FluentDataGrid #3810

@philliphoff

Description

@philliphoff

🐛 Bug Report

When using HeaderCellAsButtonWithMenu in a FluentDataGrid, the column options menu can be opened via the keyboard, but there is no way (that I have found) to tab through the column options once opened. You can only access the individual column options via mouse/trackpad.

💻 Repro or Code Sample

See the sample at: https://www.fluentui-blazor.net/datagrid-typical

Use the keyboard to tab to the "name of the country" header and open the column options menu (e.g. using Enter or Space). Using the keyboard, attempt to tab to the "resize" menu item.

🤔 Expected Behavior

You should be able to tab through the column options and select one.

😯 Current Behavior

There is no way (that I've found) to use the keyboard to tab through or select a column option.

💁 Possible Solution

I don't have a suggestion at the moment for a specific fix.

🔦 Context

This was flagged as an accessibility issue for our product (not being able to get to a portion of the UI via the keyboard).

🌍 Your Environment

.NET 9, WASM, Fluent UI Blazor library v4.11.9

  • OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
  • Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
  • .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions