CivicTechTO / CivicTechTO/civictech.ca
Desktop nav uses <button onclick> instead of <a> for navigation links
- Dominant language
- HTML
- Stars
- 1
- Forks
- 6
- Avg merge
- 9h 45m
- Merged PRs (30d)
- 6
Description
## Summary
The desktop navigation utility items (e.g. the "Sign Up" button) are rendered as `` elements with `onclick="window.location='...'"` or `onclick="window.open('...')"`. Buttons are semantically for actions, not navigation. This causes several problems:
- Screen readers announce these as "button" rather than "link", giving users incorrect expectations
- They cannot be middle-clicked to open in a new tab
- They do not support browser history navigation correctly
- `window.open()` can be blocked by popup blockers
## Affected location
`_includes/header.html:41–52`
```liquid
{% for item in site.data.navigation.utility %}
{{ item.label }}{% if item.external %} ↗{% endif %}
{% endfor %}
```
Note: the mobile menu already correctly uses `` for these same items — the desktop nav should match.
## Fix
Replace the `` pattern with `` elements styled to look like buttons, matching the mobile menu implementation:
```liquid
{% for item in site.data.navigation.utility %}
{{ item.label }}{% if item.external %} ↗{% endif %}
{% endfor %}
```
## WCAG criterion
4.1.2 Name, Role, Value (Level A), 2.1.1 Keyboard (Level A)
Contributor guide
Research direction
Start in _includes/header.html:41–52 and compare the desktop utility-item markup with the mobile menu implementation. Replace the desktop onclick navigation pattern with the requested anchor markup, preserving labels, styling, external-link behavior, and the indicator; done means navigation has link semantics and supports normal browser link interactions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, jekyll
- Domain
- accessibility, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 62/100