lxbme opened a new pull request, #3452: URL: https://github.com/apache/apisix-dashboard/pull/3452
Please answer these questions before submitting a pull request, **or your PR will get closed**. **Why submit this pull request?** - [ ] Bugfix - [x] New feature provided - [ ] Improve performance - [ ] Backport patches **What changes will this PR take into?** Three small header/navigation improvements, plus a cleanup that falls out of the first one. **Nav icons.** The sidebar was a flat list of twelve text-only entries, so finding a resource meant reading every label. Each entry now carries a Tabler icon chosen for what the resource is — `route`, `arrows-right-left` for stream routes, `stack-2`/`server-2` for services/upstreams, `user`/`users`, `certificate`/`key`, `world`/`puzzle`/`tags`, `file-code`. This is the *icons* half of the tracking issue's IA item. The same item also asks for nav grouping and breadcrumbs; both change navigation structure rather than decorate it and want maintainer alignment first, so they are deliberately not here. **The language control shows the active language.** It was an icon-only button: it let you change the language but never told you which one was active — you had to open the menu to find out. It is now `icon + name` (e.g. `English`, `中文`). Its accessible name keeps the existing `Select language` prefix and appends the visible text (`Select language: English`), so the name still states the control's purpose while containing its visible label, per WCAG 2.5.3 (Label in Name). **A Docs link.** The dashboard had no pointer to the APISIX documentation at all. Added to the header, opening https://apisix.apache.org/docs/ in a new tab with `rel="noopener noreferrer"`. **One icon set.** Adding icons meant picking a set. Rather than run two, the five existing `material-symbols` icons (settings, language, upload, delete, add) move to their Tabler equivalents and `@iconify-json/material-symbols` is dropped, so filled and stroked styles no longer sit side by side. Icons continue to go through `unplugin-icons`, inlined and tree-shaken at build time — the whole set costs about 3.3 KB of SVG; the collection package stays a devDependency. Tabler Icons is MIT. **Two details worth calling out for review:** *Nav icons are decorative.* They are rendered `aria-hidden`, so every nav link's accessible name stays exactly its label. This matters because ~20 specs and all eleven resource POMs locate nav entries with `getByRole('link', { name, exact: true })` — an icon that leaked into the accessible name would break all of them at once. The added spec pins this. *Header width with long locales.* Below Mantine's `sm` breakpoint the header also carries the burger, and with a long translation (`Documentación`, `Dokumentation`) the controls wrapped onto a second row and overlapped page content. The wordmark is now `visibleFrom="sm"` (the logo still identifies the app) and Docs renders icon-only below `sm`; the language label stays at every width, since showing it is the point of the change. Worth noting that #3440 made this reachable: now that the language persists, a German or Spanish user lands in their locale on first paint rather than defaulting to English. **Related issues** Part of #3417 **Checklist:** - [x] Did you explain what problem does this PR solve? Or what new features have been added? - [x] Have you added corresponding test cases? - [ ] Have you modified the corresponding document? - [x] Is this PR backward compatible? If it is not backward compatible, please discuss on the mailing list first Tests: new `e2e/tests/regression/header.nav-icons-and-docs.spec.ts` covers all three changes — that nav link accessible names are unaffected by the icons (with a count assertion so a new nav entry cannot slip past the guard), that the Docs link points at the documentation and opens safely, and that the language control shows the active language and keeps its accessible name across a switch. Verified: `pnpm test` 84/84, `pnpm lint`, `pnpm exec tsc -b`, and a production `pnpm build` all clean; the `e2e/tests/regression` suite passes (four specs timed out during a 7.9-minute serial local run and pass on isolated rerun — local load, not related to this change). The header was also checked by hand in Chrome at desktop and narrow widths in English, German and Spanish. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
