Make the login button blink obviously (#9123) - #9143
Open
jeffreypalermo wants to merge 1 commit into
Open
Conversation
Add scoped high-contrast pulse on LoginLink with reduced-motion fallback; cover with bUnit and Playwright per Test Design. Co-authored-by: Jeffrey Palermo <jeffrey@clear-measure.com>
5 tasks
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an unauthenticated-only “blink/pulse” attention treatment to the header Login link in UI.Shared, plus unit and acceptance coverage to ensure the link blinks when anonymous and disappears after login.
Changes:
- Adds
login-link-blinkCSS class toLoginLinkanchor. - Introduces scoped CSS animation + reduced-motion fallback styling.
- Extends bUnit and Playwright tests for anonymous blink and post-login absence.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/UI.Shared/Components/LoginLink.razor | Adds login-link-blink class to the Login anchor. |
| src/UI.Shared/Components/LoginLink.razor.css | Adds scoped pulse animation and reduced-motion fallback styling. |
| src/UnitTests/UI.Shared/MainLayoutTests.cs | Adds assertions/tests for blink class when anonymous. |
| src/AcceptanceTests/Authentication/LoginTests.cs | Adds acceptance coverage for blink class when anonymous; asserts Login link absent after login. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+1
to
+9
| a.login-link-blink { | ||
| animation: login-link-blink-pulse 0.7s steps(2, end) infinite; | ||
| background-color: #f6e05e !important; | ||
| color: #1a202c !important; | ||
| font-weight: 700 !important; | ||
| transition: none !important; | ||
| outline: 3px solid #c53030; | ||
| outline-offset: 2px; | ||
| } |
Comment on lines
+147
to
160
| [Test] | ||
| public async Task ShouldRenderLoginLink_WithBlinkClass_WhenUserIsNotAuthenticated() | ||
| { | ||
| await using var ctx = CreateContext(); | ||
|
|
||
| var component = ctx.Render<CascadingAuthenticationState>(p => p.AddChildContent<MainLayout>()); | ||
| var layout = component.FindComponent<MainLayout>(); | ||
|
|
||
| var loginAnchor = layout.Find($"a[data-testid='{nameof(LoginLink.Elements.LoginLink)}']"); | ||
| loginAnchor.ClassList.ShouldContain("login-link-blink"); | ||
| loginAnchor.GetAttribute("href").ShouldBe("/login"); | ||
| loginAnchor.GetAttribute("data-testid").ShouldBe(nameof(LoginLink.Elements.LoginLink)); | ||
| loginAnchor.TextContent.Trim().ShouldBe("Login"); | ||
| } |
Comment on lines
+61
to
+79
| [Test, Retry(2)] | ||
| public async Task Should_ShowBlinkingLoginLink_WhenAnonymous() | ||
| { | ||
| await Page.GotoAsync("/"); | ||
| await Page.WaitForLoadStateAsync(LoadState.NetworkIdle); | ||
|
|
||
| var logoutLink = Page.GetByTestId(nameof(Logout.Elements.LogoutLink)); | ||
| if (await logoutLink.CountAsync() > 0) | ||
| { | ||
| await logoutLink.ClickAsync(); | ||
| await Page.WaitForURLAsync("**/"); | ||
| } | ||
|
|
||
| var loginLink = Page.GetByTestId(nameof(LoginLink.Elements.LoginLink)); | ||
| await Expect(loginLink).ToBeVisibleAsync(); | ||
| await Expect(loginLink).ToHaveClassAsync(new Regex("login-link-blink")); | ||
| await Expect(loginLink).ToHaveAttributeAsync("href", "/login"); | ||
| await Expect(loginLink).ToHaveTextAsync("Login"); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Make the unauthenticated header Login link blink with an obvious high-contrast pulse so visitors notice it. Respects
prefers-reduced-motionwith a static high-contrast fallback.Files
src/UI.Shared/Components/LoginLink.razor— addlogin-link-blinkclasssrc/UI.Shared/Components/LoginLink.razor.css— continuous pulse + reduced-motion static treatmentsrc/UnitTests/UI.Shared/MainLayoutTests.cs— assert blink class when anonymous; LoginLink absent when authenticatedsrc/AcceptanceTests/Authentication/LoginTests.cs— Playwright: blinking class when anonymous; LoginLink gone after loginTesting
Closes #9123