YOUreka/tools-legacy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): icon-only header actions and side-nav separators

Browse Source 
- Help and Sign in/out become icon-only Carbon cds-header-global-action
  items (real links, accessible name in a visually-hidden span); the
  header nav keeps just Home + the tools.
- Side nav gains a separator so Home, the tools, and Help/Sign In/Out
  form three groups.
- Drop the now-unused header-nav-divider rule.
This commit is contained in:
adebisi-fa
2026-10-01 14:53:10 +01:00
parent 4d006e361f
commit 1ddf61b59f
3 changed files with 30 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/test/server.test.js
+18 -13
View File
@@ -353,16 +353,20 @@ test('landing header is server-rendered for the session', async () => {
const { base, stop } = await bootApp();
try {
const anon = await (await fetch(`${base}/`)).text();
assert.match(anon, /href="\/auth\/login">Sign in</);
assert.ok(!anon.includes('<!--app-header-->'), 'header marker is replaced');
// signed out: no service links, but Help and Sign in are always there
// signed out: Home only in the header nav; Help and Sign in are icon-only
// global header actions
assert.match(anon, /cds-header-nav-item href="\/" aria-current="page"/);
assert.ok(!anon.includes('cds-header-nav-item href="/cropper"'), 'no cropper in header nav when signed out');
assert.ok(!anon.includes('cds-header-nav-item href="/fingerprint"'), 'no fingerprint in header nav when signed out');
assert.match(anon, /cds-header-nav-item href="\/help"/);
assert.match(anon, /cds-header-global-action href="\/help"><svg slot="icon"/);
assert.match(anon, /cds-header-global-action href="\/auth\/login"><svg slot="icon"/);
// icon-only: the accessible name is a visually-hidden span
assert.match(anon, /<span class="cds--visually-hidden">Help<\/span>/);
assert.match(anon, /<span class="cds--visually-hidden">Sign in<\/span>/);
// side nav groups Home | Help, Sign in with a single divider
assert.match(anon, /cds-side-nav-link href="\/help"/);
// the divider only groups the services, so it is absent when signed out
assert.ok(!anon.includes('cds-side-nav-divider'), 'no side nav divider without services');
assert.ok(!anon.includes('header-nav-divider'), 'no header divider without services');
assert.equal((anon.match(/<cds-side-nav-divider>/g) || []).length, 1, 'one side nav divider when signed out');
// no identity or sign-out when signed out
assert.ok(!anon.includes('user-chip'), 'no user chip when signed out');
assert.ok(!anon.includes('data-signout'), 'no sign-out when signed out');
@@ -378,16 +382,17 @@ test('landing header is server-rendered for the session', async () => {
const authed = await (await fetch(`${base}/`, { headers: { cookie: cookies } })).text();
assert.match(authed, /Ada/);
assert.match(authed, /user-chip/);
assert.match(authed, /href="\/auth\/logout"[^>]*>Sign out</);
// signed in: services live in the header nav and in the mobile side nav
// signed in: services live in the header nav; Help and Sign out are icon-only
assert.match(authed, /cds-header-nav-item href="\/cropper"/);
assert.match(authed, /cds-header-nav-item href="\/fingerprint"/);
assert.match(authed, /cds-header-nav-item href="\/help"/);
assert.match(authed, /cds-header-nav-item href="\/auth\/logout" data-signout/);
assert.ok(!authed.includes('cds-header-nav-item href="/help"'), 'Help is not a text header nav item');
assert.match(authed, /cds-header-global-action href="\/help"><svg slot="icon"/);
assert.match(authed, /cds-header-global-action href="\/auth\/logout" data-signout><svg slot="icon"/);
assert.match(authed, /<span class="cds--visually-hidden">Sign out<\/span>/);
// side nav groups Home | services | Help, Sign out with two dividers
assert.match(authed, /cds-side-nav-link href="\/cropper"/);
assert.match(authed, /cds-side-nav-link href="\/help"/);
assert.match(authed, /cds-side-nav-divider/);
assert.match(authed, /header-nav-divider/);
assert.equal((authed.match(/<cds-side-nav-divider>/g) || []).length, 2, 'two side nav dividers when signed in');
// side nav items carry Carbon icons in the title-icon slot
assert.match(authed, /cds-side-nav-link href="\/cropper"[^>]*><svg slot="title-icon"/);
assert.match(authed, /cds-side-nav-link href="\/fingerprint"[^>]*><svg slot="title-icon"/);
@@ -412,7 +417,7 @@ test('help page is public and documents each service', async () => {
assert.match(html, /cds-accordion-item title="Image Cropper"/);
assert.match(html, /cds-accordion-item title="Fingerprint Agent"/);
assert.match(html, /accordion\.min\.js/);
assert.match(html, /cds-header-nav-item href="\/help" aria-current="page"/);
assert.match(html, /cds-header-global-action href="\/help"/);
assert.match(html, /cds-side-nav-link href="\/help" aria-current="page"/);
} finally {
await stop();