Skip to content

Commit 27b5f40

Browse files
gordonwoodhullclaude
gordonwoodhull
and
claude
committed
claude: Add navbar light/dark logo tests
This commit adds tests for navbar logo behavior with light/dark variants: 1. Size Preference Test: - Tests navbar size preference order (small → medium → large) - Verifies the mode-first search algorithm in a scenario with no small logos - Confirms medium.light is selected for light mode when small is missing - Confirms large.dark is selected for dark mode when small.dark is missing 2. Alt Text Consistency Test: - Tests that alt text is properly inherited from brand definitions - Confirms that missing resources get empty alt text - Helps ensure accessibility attributes are maintained 3. Missing Logo Handling Test: - Tests behavior when logo paths point to non-existent files - Confirms img tags are generated with correct src attributes - Ensures robust rendering even with missing resources Key learnings: - Navbar DOES NOT support document-level logo overrides unlike sidebars/dashboards - Navbar follows the size preference order: small → medium → large (different from sidebar: medium → small → large and dashboard: medium → large → small) - Mode-first search applies to navbars: it exhaustively searches for a specific mode (light/dark) across all sizes before falling back to other modes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 4fc7e38 commit 27b5f40

File tree

16 files changed

+205
-0
lines changed

16 files changed

+205
-0
lines changed

‎tests/docs/smoke-all/brand/logo/navbar/alt-text-consistency/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
_site/
2+
/.quarto/

‎tests/docs/smoke-all/brand/logo/navbar/alt-text-consistency/_brand.yml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
color:
2+
background:
3+
light: "#fff"
4+
dark: "#111"
5+
foreground:
6+
light: "#111"
7+
dark: "#fff"
8+
logo:
9+
images:
10+
logo-with-alt:
11+
path: logo.png
12+
alt: Logo with alt text
13+
logo-without-alt:
14+
path: logo-dark.png
15+
# No alt text defined
16+
# Another resource referenced by website.navbar.logo
17+
mixed-alt:
18+
path: mixed.png
19+
alt: Mixed alt from brand

‎tests/docs/smoke-all/brand/logo/navbar/alt-text-consistency/_quarto.yml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
project:
2+
type: website
3+
theme:
4+
light: brand
5+
dark: [brand, dark-fixups.scss]
6+
website:
7+
navbar:
8+
style: "docked"
9+
logo:
10+
# Test different alt text scenarios
11+
light:
12+
path: logo-with-alt # Has alt text in brand definition
13+
dark:
14+
path: missing-alt # Resource not defined in brand, no alt text
15+
search: true
16+
contents:
17+
- index.qmd
18+
- alt-override.qmd

‎tests/docs/smoke-all/brand/logo/navbar/alt-text-consistency/dark-fixups.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/*-- scss:rules --*/
2+
3+
nav.sidebar.sidebar-navigation:not(.rollup) {
4+
background-color: #282b30;
5+
}
6+
7+
nav.navbar {
8+
background-color: rgba(13, 108, 251, 25%);
9+
}

‎tests/docs/smoke-all/brand/logo/navbar/alt-text-consistency/index.qmd‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: Navbar Logo Alt Text Consistency
3+
_quarto:
4+
tests:
5+
html:
6+
ensureHtmlElements:
7+
-
8+
# Logo should have alt text from brand definition
9+
- 'img[class*="light-content"][src="./logo.png"][alt="Logo with alt text"]'
10+
# Missing resource should have empty alt text
11+
- 'img[class*="dark-content"][src="./missing-alt"][alt=""]'
12+
- []
13+
---
14+
15+
This test verifies alt text consistency for navbar logos:
16+
17+
1. When a logo has alt text defined in the brand, it should be used correctly
18+
2. When a logo reference doesn't exist in brand, empty alt text is used
19+
20+
This ensures that accessibility attributes are properly handled across
21+
light and dark logo variants.

‎tests/docs/smoke-all/brand/logo/navbar/missing-logo-handling/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
_site/
2+
/.quarto/

‎tests/docs/smoke-all/brand/logo/navbar/missing-logo-handling/_brand.yml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
color:
2+
background:
3+
light: "#fff"
4+
dark: "#111"
5+
foreground:
6+
light: "#111"
7+
dark: "#fff"
8+
logo:
9+
images:
10+
fallback-logo:
11+
path: fallback.png
12+
alt: Fallback logo
13+
# Only define small.light and leave other sizes/modes empty
14+
small:
15+
light: fallback-logo

‎tests/docs/smoke-all/brand/logo/navbar/missing-logo-handling/_quarto.yml‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
project:
2+
type: website
3+
theme:
4+
light: brand
5+
dark: [brand, dark-fixups.scss]
6+
website:
7+
navbar:
8+
style: "docked"
9+
# Test scenario 1: both light and dark logos point to non-existent files
10+
logo:
11+
light: nonexistent-light.png
12+
dark: nonexistent-dark.png
13+
search: true
14+
contents:
15+
- index.qmd
16+
- nonexistent-resource.qmd
17+
- navbar-logo-omitted.qmd

‎tests/docs/smoke-all/brand/logo/navbar/missing-logo-handling/dark-fixups.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/*-- scss:rules --*/
2+
3+
nav.sidebar.sidebar-navigation:not(.rollup) {
4+
background-color: #282b30;
5+
}
6+
7+
nav.navbar {
8+
background-color: rgba(13, 108, 251, 25%);
9+
}

‎tests/docs/smoke-all/brand/logo/navbar/missing-logo-handling/index.qmd‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: Navbar Missing Logo Handling - Direct Paths
3+
_quarto:
4+
tests:
5+
html:
6+
ensureHtmlElements:
7+
-
8+
# Non-existent logo files should still generate img tags with proper src attributes
9+
- 'img[class*="light-content"][src="./nonexistent-light.png"]'
10+
- 'img[class*="dark-content"][src="./nonexistent-dark.png"]'
11+
- []
12+
---
13+
14+
This test verifies how the navbar handles missing logo files:
15+
16+
1. When logo paths point to non-existent files:
17+
- The img tags should still be generated
18+
- The src attributes should use the specified paths
19+
- The page should render without breaking

0 commit comments

Comments
 (0)