Skip to content

Add GitHub logo link to DemoMainLayout and corresponding styles #4384

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
AClerbois wants to merge 2 commits into from
Closed

Add GitHub logo link to DemoMainLayout and corresponding styles #4384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
91377f7
Add GitHub logo link to DemoMainLayout and corresponding styles
AClerbois Dec 5, 2025
90e2453
Add aria-label to GitHub logo link for improved accessibility
AClerbois Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@

<FluentSpacer />

@* GitHub link *@
<a href="https://github.com/microsoft/fluentui-blazor/tree/dev-v5" class="github-logo-link" target="_blank"
Copy link
Collaborator

@dvoituron dvoituron Dec 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use a FluentButton with this icon:

public class Github : Icon { public Github() : base("Github", IconVariant.Regular, IconSize.Size20, "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.178 0C4.55 0 0 4.583 0 10.254c0 4.533 2.915 8.369 6.959 9.727 0.506 0.102 0.691 -0.221 0.691 -0.492 0 -0.238 -0.017 -1.053 -0.017 -1.901 -2.831 0.611 -3.421 -1.222 -3.421 -1.222 -0.455 -1.188 -1.129 -1.494 -1.129 -1.494 -0.927 -0.628 0.068 -0.628 0.068 -0.628 1.028 0.068 1.567 1.053 1.567 1.053 0.91 1.562 2.376 1.12 2.966 0.849 0.084 -0.662 0.354 -1.12 0.64 -1.375 -2.258 -0.238 -4.634 -1.12 -4.634 -5.059 0 -1.12 0.404 -2.037 1.045 -2.75 -0.101 -0.255 -0.455 -1.307 0.101 -2.716 0 0 0.859 -0.272 2.797 1.053a9.786 9.786 0 0 1 2.545 -0.34c0.859 0 1.735 0.119 2.544 0.34 1.938 -1.324 2.797 -1.053 2.797 -1.053 0.556 1.409 0.202 2.462 0.101 2.716 0.657 0.713 1.045 1.63 1.045 2.75 0 3.939 -2.376 4.804 -4.651 5.059 0.371 0.323 0.691 0.934 0.691 1.901 0 1.375 -0.017 2.479 -0.017 2.818 0 0.272 0.185 0.594 0.691 0.493 4.044 -1.358 6.959 -5.195 6.959 -9.727C20.356 4.583 15.789 0 10.178 0z\"></path>") { } }

rel="noopener noreferrer" aria-label="Visit FluentUI Blazor GitHub repository">
Comment on lines +21 to +22
Copy link

Copilot AI Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The anchor link is missing an aria-label attribute. Since the link contains only an SVG icon (marked as aria-hidden="true") without visible text, screen readers won't be able to describe the link's purpose to users with disabilities. Add an aria-label attribute to provide a descriptive label, for example: aria-label="Visit FluentUI Blazor GitHub repository".

Copilot uses AI. Check for mistakes.
<GitHubLogo />
</a>

@* DarkTheme *@
<FluentButton IconStart="@(new Icons.Regular.Size20.DarkTheme().WithColor("var(--colorNeutralForegroundOnBrand)"))"
OnClick="@SwitchThemeAsync"
Expand Down
8 changes: 8 additions & 0 deletions examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
.github-logo-link {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}

.demo-home {
display: flex;
}
Expand Down
5 changes: 5 additions & 0 deletions examples/Demo/FluentUI.Demo.Client/Layout/GitHubLogo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<svg style="width: 16px; fill: var(--colorNeutralForegroundOnBrand);" focusable="false" viewBox="0 0 20 20"><!--!-->
Copy link

Copilot AI Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The SVG contains an unnecessary empty comment <!--!--> at the end of the opening tag. This comment serves no purpose and should be removed for cleaner markup.

Suggested change
<svg style="width: 16px; fill: var(--colorNeutralForegroundOnBrand);" focusable="false" viewBox="0 0 20 20"><!--!-->
<svg style="width: 16px; fill: var(--colorNeutralForegroundOnBrand);" focusable="false" viewBox="0 0 20 20">

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The SVG viewBox is set to "0 0 20 20" but the path contains coordinates that extend beyond this boundary (e.g., C20.356 4.583 15.789 0 10.178 0z). This will cause the right edge of the GitHub icon to be clipped. Consider updating the viewBox to "0 0 21 20" or adjusting the path coordinates to fit within the current viewBox.

Suggested change
<svg style="width: 16px; fill: var(--colorNeutralForegroundOnBrand);" focusable="false" viewBox="0 0 20 20"><!--!-->
<svg style="width: 16px; fill: var(--colorNeutralForegroundOnBrand);" focusable="false" viewBox="0 0 21 20"><!--!-->

Copilot uses AI. Check for mistakes.
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10.178 0C4.55 0 0 4.583 0 10.254c0 4.533 2.915 8.369 6.959 9.727 0.506 0.102 0.691 -0.221 0.691 -0.492 0 -0.238 -0.017 -1.053 -0.017 -1.901 -2.831 0.611 -3.421 -1.222 -3.421 -1.222 -0.455 -1.188 -1.129 -1.494 -1.129 -1.494 -0.927 -0.628 0.068 -0.628 0.068 -0.628 1.028 0.068 1.567 1.053 1.567 1.053 0.91 1.562 2.376 1.12 2.966 0.849 0.084 -0.662 0.354 -1.12 0.64 -1.375 -2.258 -0.238 -4.634 -1.12 -4.634 -5.059 0 -1.12 0.404 -2.037 1.045 -2.75 -0.101 -0.255 -0.455 -1.307 0.101 -2.716 0 0 0.859 -0.272 2.797 1.053a9.786 9.786 0 0 1 2.545 -0.34c0.859 0 1.735 0.119 2.544 0.34 1.938 -1.324 2.797 -1.053 2.797 -1.053 0.556 1.409 0.202 2.462 0.101 2.716 0.657 0.713 1.045 1.63 1.045 2.75 0 3.939 -2.376 4.804 -4.651 5.059 0.371 0.323 0.691 0.934 0.691 1.901 0 1.375 -0.017 2.479 -0.017 2.818 0 0.272 0.185 0.594 0.691 0.493 4.044 -1.358 6.959 -5.195 6.959 -9.727C20.356 4.583 15.789 0 10.178 0z">
</path>
</svg>
Loading