search

abpframework / abp

Open Source Web Application Framework for ASP.NET Core. Offers an opinionated architecture to build enterprise software solutions with best practices on top of the .NET and the ASP.NET Core platforms. Provides the fundamental infrastructure, production-ready startup templates, application modules, UI themes, tooling, guides and documentation.
https://abp.io
GNU Lesser General Public License v3.0
12.31k stars 3.32k forks source link

Blazor - At first opening, welcome message has border unless you click anywhere. #19652

Closed oykuermann closed 1 week ago

oykuermann commented 2 weeks ago

App: Blazor Server & Blazor Web Assembly Version: 8.2 pre-rc

At the first opening of the page, the welcome message has border unless you click anywhere.

screencast-localhost_44349-2024.04.29-17_25_05.webm

enisn commented 2 weeks ago

It's default Microsoft's Win11 focus effect. It's not related to anything in CSS or website content

It's also standard in browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

You can navigate visual elements with TAB key in your keyboard

enisn commented 2 weeks ago

I'll take a look at Blazorise it it uses focus by default. But probably it's for accesibility

enisn commented 2 weeks ago

Negative tab index is an accessbility standard it's not a bug or unwanted action: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

It's not related to Blazorise, it's related to Blazor enhanced navigation. Since we started using App.razor with the new Blazor Web App pattern, it's already been implemented in the new Blazor version as a accessibility feature.

I do not suggest hiding the focusing effect, but if needed @armgnunlu can hide it via CSS.

BenWhite27 commented 2 weeks ago

Isn't this done by this line of code? https://github.com/abpframework/abp/blob/a681005cf75f6d10ba9632efe0d0144e89d7a17f/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.WebApp.Client/Routes.razor#L12

enisn commented 2 weeks ago

Isn't this done by this line of code?

https://github.com/abpframework/abp/blob/a681005cf75f6d10ba9632efe0d0144e89d7a17f/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.WebApp.Client/Routes.razor#L12

Yes, I wrote wrong, it's not App.razor, it's from Routes.razor

BenWhite27 commented 2 weeks ago

Sorry, maybe I misunderstood the issue. I thought the problem was that the H1 element is getting focused on first load, in which case removing that line was the fix. But if it's just that there is a focus ring being applied to the H1 I'd agree that it's expected behaviour that shouldn't be changed.

Maybe focusing to a form element on the page is the best way to demonstrate the FocusOnNavigate component?