Blocked aria-hidden on an element

[true-perfect-code]

🐛 Bug Report

If you want to use Icon as a button:
<FluentIcon Id="idBack" Value="@(new Icons.Filled.Size48.ArrowCircleLeft())" @onclick="OnClick_Back" />

protected async Task OnClick_Back()
{
   ...
   NavigationManager!.NavigateTo("/");
   ...
}

this triggers the following error in the console:

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: svg
Ancestor with aria-hidden:  <svg id=​"idBack" style=​"width:​ 48px;​ fill:​ var(--accent-fill-rest)​;​ cursor:​ pointer;​" focusable=​"false" viewBox=​"0 0 48 48" aria-hidden=​"true" aria-label=​"Add item">​<!--!--><path d=​"M44 24a20 20 0 1 1-40 0 20 20 0 0 1 40 0Zm-19.87 8.63c.5-.48.5-1.28 0-1.76l-5.61-5.62h14.23a1.25 1.25 0 1 0 0-2.5H18.52l5.61-5.62a1.25 1.25 0 0 0-1.76-1.76l-7.75 7.75a1.25 1.25 0 0 0 0 1.76l7.75 7.75c.48.5 1.28.5 1.76 0Z">​</path>​</svg>​

It also doesn't matter whether I set focus to false
<FluentIcon Id="idBack" Value="@(new Icons.Filled.Size48.ArrowCircleLeft())" Focusable="false" @onclick="OnClick_Back" />

What is frustrating is the fact that the app also blocks completely. All the worse because the user has no idea what is happening to the app.

💻 Repro or Code Sample

<FluentIcon Id="idBack" Value="@(new Icons.Filled.Size48.ArrowCircleLeft())" Focusable="false" @onclick="OnClick_Back" />

protected async Task OnClick_Back()
{
   ...
   NavigationManager!.NavigateTo("/");
   ...
}

🤔 Expected Behavior

You would expect it to work without an error message, such as the button

😯 Current Behavior

As described, if you want to use Icon as a button, the specified error is generated in the console. Sometimes without visible disadvantages (the app continues to run, event is executed) and sometimes the entire app blocks.
If you use Button instead of Icon and show an icon inside Button, it works fine, no error message is triggered.

💁 Possible Solution

Replace icon with button and display icon within the button.

🌍 Your Environment

• Windows
• Chrome
• Net 9
• VS Version 17.13.4
• FluentUI Blazor 4.11.7
  pc

[vnbaaij]

Try with OnClick instead of @OnClick

[true-perfect-code]

Hi @vnbaaij

I have tried it with:
<FluentIcon Id="idBack" Value="@(new Icons.Filled.Size48.ArrowCircleLeft())" Focusable="false" OnClick="OnClick_Back" />

and also without focus
<FluentIcon Id="idBack" Value="@(new Icons.Filled.Size48.ArrowCircleLeft())" OnClick="OnClick_Back" />

But I get the same error message in the console on clicking Icon ( respectively when the page is changed with NavigationManager!.NavigateTo("/");):

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: svg
Ancestor with aria-hidden:  <svg id=​"idBack" style=​"width:​ 48px;​ fill:​ var(--accent-fill-rest)​;​ cursor:​ pointer;​" focusable=​"false" viewBox=​"0 0 48 48" aria-hidden=​"true">​</svg>​

pc

[vnbaaij]

Ok, we will investigate. In the meantime, just use a button with an icon.

[vnbaaij]

@true-perfect-code how have you been testing the reproduction code? Server/Wasm - Intaractive mode?

With my testing, both Server and Wasm work fine. Both with @onclick and OnClick

[davhdavh]

same warning when click the clear icon in the FluentSearch

[true-perfect-code]

When I generate a new Blazor Web counter project, I can no longer reproduce this problem there.

I hope to find out today why this is so that we can close this post (or if there is a bug, correct it).

pc

[vnbaaij]

same warning when click the clear icon in the FluentSearch

When, what, where?

[true-perfect-code]

Hi @vnbaaij

Now I have also invested some time here and can reproduce errors at any time in my project but not in a new one (such as Blazor Web Counter-Template).

My current project is up-to-date regarding the nugets, use NET 9 and is about 3 months old. I don't really see any reason for this different error display. However, it should also be mentioned that I have a solution here that consists of MAUI Blazor, RCL, Blazor Web and ASP.NET (Minimal API). But I don't think this has any meaning. Besides, the latest version of FluentUI Blazor is installed.

In the “old” project this combination of Icon and ToolTip,

    <FluentIcon Id=“idBack” Value="@(new Icons.Filled.Size48.ArrowCircleLeft())” OnClick=“@(() => NavigationManager!.NavigateTo(”/“))” />

    <FluentTooltip Anchor=“idBack” Position=“TooltipPosition.Bottom”>
        “Back”
    </FluentTooltip>

solves the following error in the console:

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: svg
Ancestor with aria-hidden: <svg id=​"idBack" style=​"width:​ 48px;​ fill:​ var(--accent-fill-rest)​;​ cursor:​ pointer;​" focusable=​"false" viewBox=​"0 0 48 48" aria-hidden=​"true">​…​​

When I deactivate ToolTip, I don't get an error message in the console:

    <FluentIcon Id="idBack" Value="@(new Icons.Filled.Size48.ArrowCircleLeft())" OnClick="@(() => NavigationManager!.NavigateTo("/"))" />

    @* <FluentTooltip Anchor="idBack" Position="TooltipPosition.Bottom">
        "Back"
    </FluentTooltip> *@ 

then no error message is generated in the console.

In a newly created Blazoe Web Counter project, it works both with ToolTipü and without, so this error cannot be reproduced at all, so everything seems to be in order.

I'll leave this post open for a few more days, but if no one has any ideas, I'll close it.

pc

[vnbaaij]

I adjusted the label/ Not actively looking at this anymore. We can indeed close in a couple of days.