search

dotnet / aspire

An opinionated, cloud ready stack for building observable, production ready, distributed applications in .NET
https://learn.microsoft.com/dotnet/aspire
MIT License
3.69k stars 421 forks source link

Tooltips provided for the controls present in the "Resource" page are not available while navigating using keyboard TAB/ arrow keys: A11y_.NetAspireDashboard_Resource_Resource_keyboard #3174

Open PoojaNamde opened 6 months ago

PoojaNamde commented 6 months ago

"Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier."

Tags:

A11yTCS; #A11yMAS; #A11ySev3; #Win11; #ChromiumEdge; #FTP; #DesktopWeb; #.NET Core; #SH_.Net Aspire Dashboard_Web_Mar2024; #WCAG2.1.1; #Keyboard;

Environment Details:

Application Name: .Net Aspire Dashboard URL: https://localhost:19888/ Chrome Version 122.0.2365.80 (Official build) (64-bit) Window Version: Win 11 OS Build: 22621.3085

Repro Steps:

  1. Hit the URL: http://localhost:15888/
  2. TAB to "Resources" tab item and hit select the tab by pressing Enter key.
  3. Tab through the page and check if tooltips are available while navigating using keyboard.

Actual Results:

Tooltips provided for the controls present in the "Resource" page are not available while navigating using keyboard TAB/ arrow keys.

Similar issue is also observed in below scenario: Issue 1: Resources_ Details view

  1. Hit the URL: https://localhost:15887 and login with valid credentials.
  2. TAB to "Resources" tab item and hit ENTER key.
  3. TAB to "View" button present under 'Details' column header in the page and hit ENTER key.
  4. "Details container" will open.
  5. TAB through the page and check if tooltips are available while navigating using keyboard.

Expected Results:

Tooltips provided for the controls present in the "Resource" page should be accessible while navigating using keyboard TAB/ arrow keys.

User Impact:

Keyboard users will not get the information about the control as tooltip is not accessible using keyboard keys.

Attachment:

3174A11y.NetAspireDashboard_Resource_tooltips_keyboard.webm

Resource_DetailsView_Tooltip

adamint commented 5 days ago

@JamesNK this is what I mean by title not being accessible. We should convert them into FluentTooltip

JamesNK commented 4 days ago

Is there a performance overhead for using FluentTooltip? I worry about having dozens or hundreds of them on a page.

adamint commented 3 days ago

I'm not sure how they work internally, @vnbaaij?

vnbaaij commented 2 days ago

The FluentTooltip is a very thin wrapper around the <fluent-tooltip web component. We just pass through the parameters.

I did a small test in which I added role="tooltip" to the web component and that lit up that the text in the tooltip will be read by a screenreader (tested with NVDA) when the mouse hovers over the tooltip. I will add that for v4.10.2 (or 4.11, whichever version comes next)

NB For specific tooltips (where FluentTooltip is being used, you can probably already add a role="tooltip" to the Blazor component. The AdditionalAttributes should transport it to the web component.