Commit Graph

22 Commits

Author SHA1 Message Date
Jaayden Halko 4e2640e506 fix(site): WCAG 2.1 AA remediation — landmarks, semantics, and a11y tooling (#22746)
## Summary

Targeted WCAG 2.1 AA accessibility remediation — continuation of #22673
— addressing remaining semantic, landmark, and tooling gaps identified
in the frontend accessibility review.

### Changes

#### Document semantics (WCAG 3.1.1)
- **`site/index.html`**: Added `<html lang="en">` root wrapper so screen
readers and browser features correctly identify the document language.

#### Landmark & bypass (WCAG 1.3.1, 2.4.1)
- **`DashboardLayout.tsx`**: Replaced `<div id="main-content">` with
`<main id="main-content">` so assistive technology exposes a proper main
landmark and the skip link targets a semantic region.

#### Table header relationships (WCAG 1.3.1)
- **`Table.tsx`**: `TableHead` now renders `scope="col"` by default
(overridable via prop), giving data cells an explicit header
relationship.

#### Semantic interactive controls (WCAG 2.1.1, 4.1.2)
- **`AuditLogRow.tsx`**: Replaced `<div role="button" tabIndex={0}>`
with native `<button type="button">`, removing the manual keyboard
handler (native button provides Enter/Space for free).
- **`Autocomplete.tsx`**: Replaced clear `<span role="button"
tabIndex={0}>` with native `<button type="button" aria-label="Clear
selection">`.

#### Reduced motion (WCAG 2.3.3 best practice)
- **`index.css`**: Added global `@media (prefers-reduced-motion:
reduce)` block that suppresses non-essential animations and transitions.

#### Accessibility regression tooling
- **Storybook**: Added `@storybook/addon-a11y` (version-matched to
existing Storybook 10.x).
- **vitest-axe**: Added `vitest-axe` with setup wiring and an exemplar
`Table.axe.test.tsx` that runs axe-core assertions in vitest.

### Test plan

- 12 new/updated tests pass across 5 test files:
  - `DashboardLayout.test.tsx` — main landmark + skip link behavior
  - `Table.test.tsx` — scope default + override
  - `Table.axe.test.tsx` — axe-core violation scan
  - `AuditPage.test.tsx` — keyboard toggle with native button
  - `Autocomplete.test.tsx` — clear control semantics
- `pnpm lint` clean (biome, TypeScript, circular deps)
- Manual keyboard traversal: skip link → main content, audit row toggle,
autocomplete clear
2026-03-13 10:47:53 +00:00
Kyle Carberry 47846c0ee4 fix(site): inject permissions and organizations metadata to eliminate loading spinners (#22741)
## Problem

Two network requests were blocking the initial page render with
fullscreen `<Loader fullscreen />` spinners:

1. **`POST /api/v2/authcheck`** (permissions) — blocked in `RequireAuth`
via `AuthProvider.isLoading`
2. **`GET /api/v2/organizations`** — blocked in `DashboardProvider`

All other bootstrap queries (`user`, `entitlements`, `appearance`,
`experiments`, `build-info`, `regions`) already used server-side
metadata injection via `index.html` meta tags and resolved instantly.
These two did not.

## Solution

Follow the existing `cachedQuery` + `<meta>` tag pattern to inject both
datasets server-side:

### Server-side (`site/site.go`)
- Add `Permissions` and `Organizations` fields to `htmlState`
- Fetch organizations via `GetOrganizationsByUserID` in parallel with
existing queries
- Evaluate all `permissionChecks` using the RBAC authorizer directly
- Inject results as HTML-escaped JSON into `<meta>` tags

### Frontend
- Register `permissions` and `organizations` in `useEmbeddedMetadata`
- Update `checkAuthorization()` to accept optional metadata and use
`disabledRefetchOptions` when available
- Update `organizations()` to accept optional metadata and use
`cachedQuery` when available
- Wire metadata through `AuthProvider` and `DashboardProvider`

### Note
The Go `permissionChecks` map in `site/site.go` mirrors
`site/src/modules/permissions/index.ts` and must be kept in sync.
2026-03-09 16:12:04 +00:00
Danielle Maywood 6acdd6ca7d fix: wire agents-tab-visible metadata to experiments flag (#22553) 2026-03-03 13:51:10 -06:00
Bruno Quaresma d70e26d2e3 chore: remove react-helmet (#19963)
Since React 19 supports head tags natively, we no longer need to use
`react-helmet`.

---------

Co-authored-by: ケイラ <mckayla@hey.com>
Co-authored-by: Andrew Aquino <dawneraq@gmail.com>
2025-09-26 10:52:53 -03:00
ケイラ 5c31b983e5 chore: update logo in index.html (#19017) 2025-07-24 09:48:05 -06:00
Hugo Dutka 8f6a5afa4f feat: add backend logic for determining tasks tab visibility (#18401)
This PR implements the backend logic for determining if the Tasks tab
should be visible in the web UI as described in [the
RFC](https://www.notion.so/coderhq/Coder-Tasks-207d579be5928053ab68c8d9a4b59eaa?source=copy_link#210d579be5928013ab5acbe69a2f548b).

The frontend component will be added in a follow-up PR once the entire
Tasks backend is implemented so as not to break the dogfood environment
until then.
2025-06-18 18:32:34 +02:00
ケイラ 9041646b81 chore: add "user_configs" db table (#16564) 2025-03-05 10:46:03 -07:00
Bruno Quaresma 32c93a887e fix(site): fix initial body background color 2023-12-14 18:15:25 +00:00
Kyle Carberry f270d9d351 feat: make the dashboard darker (#10084)
* feat: make the dashboard darker

Coder is a the internal software development platform. It is not
designed to be opinionated on colors, but it should look great.

Focusing on neutrality for our default dashboard theme is great
for our ICP. Some organizations may lean towards colors more or
less, and that shouldn't influence their decision when exploring
Coder.

* Make it a lil more dark

* Improve button outline

* Lower the red brightness

* Improve the divider contrast
2023-10-05 16:46:38 -05:00
Kyle Carberry 1eb21d247b feat: adjust favicon based on system color-scheme (#10087)
This will still default to light-theme, but support showing
a white favicon when the system-theme is dark.
2023-10-05 16:11:15 -05:00
Marcin Tojek dae528f5e7 feat: expose application name and logo url via meta properties (#9900) 2023-09-28 10:50:40 +02:00
Bruno Quaresma 11404af9ca chore(site): update files to use a more standard naming (#9605) 2023-09-08 15:14:41 -03:00
Bruno Quaresma 834ce41013 refactor(site): add default background color to html and body (#9009) 2023-08-10 09:41:35 -03:00
Bruno Quaresma 70bd23a40a refactor(site): add default title (#8985) 2023-08-08 18:48:53 -03:00
Marcin Tojek 164672e5d3 feat: expose docs URL via static meta (#8594) 2023-07-19 13:57:43 -03:00
dependabot[bot] 24ec05b5c5 chore: bump prettier from 2.8.1 to 3.0.0 in /site (#8477)
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Cian Johnston <cian@coder.com>
Co-authored-by: Muhammad Atif Ali <atif@coder.com>
2023-07-13 14:44:12 +03:00
Kyle Carberry f444100aa6 feat: add region querying to pre-fetched html (#8077) 2023-06-19 11:23:26 -05:00
Kyle Carberry 9df9ad4503 feat: embed common client requests into the template html (#8076)
This should reduce the number of API requests a client makes
when loading the dashboard dramatically!
2023-06-18 13:57:27 -05:00
Kyle Carberry 71eecb3515 chore: embed build info in the html to reduce requests (#6605)
This will reduce a request on every page load of Coder!
2023-03-21 19:04:54 +00:00
Ammar Bandukwala 85c679597c site: reduce printWidth to 80 (#4437)
Resolves #4435
2022-10-10 10:33:35 -07:00
Dean Sheather d165d76338 feat: static error page in applications handlers (#4299) 2022-10-05 02:30:55 +10:00
Bruno Quaresma 189c562826 chore: Use Vite instead of Webpack for development (#4156) 2022-09-23 15:22:48 -03:00