jaredandClaude Opus 5
6aa77552b8
CI / Build & Quality Checks (push) Successful in 1m38s
CI / Docker image build & smoke test (push) Skipped
CI / Secret scan (gitleaks) (push) Successful in 8s
CI / Trigger Desktop Build (push) Successful in 9s
CI / Playwright smoke (e2e) (push) Successful in 8m52s
e2e/a11y.spec.ts runs @axe-core/playwright (WCAG 2.x A/AA) over the login
page, room timeline + composer, message options menu, thread panel, user
settings and room settings, failing on critical/serious findings other
than colour contrast (reported, not gated: generated avatar colours and
portal false positives). Aria snapshots of the composer, message menu,
thread panel and settings nav catch lost names/roles/live regions.
Burned down what the first run found:
- NavItem: callers' aria-selected is not valid on a div (axe critical);
it now drives data-selected for styling and aria-current="page".
- Composer placeholder at 0.5 opacity was ~2.3:1; now P300.
- Voice-limit and explore custom-limit number inputs had no label.
- Thread panel is an <aside aria-label="Thread">; the settings modal is a
role=dialog; the settings sections are a <nav>; the message action
menu carries data-message-menu + a label.
Also allows WebKit's CI wording for the well-known probe ("Could not
connect … Connection refused") that failed run #2003.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import classNames from 'classnames';
|
|
import React, { ComponentProps, forwardRef } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { as } from 'folds';
|
|
import * as css from './styles.css';
|
|
|
|
export const NavItem = as<
|
|
'div',
|
|
{
|
|
highlight?: boolean;
|
|
} & css.RoomSelectorVariants
|
|
>(
|
|
(
|
|
{
|
|
as: AsNavItem = 'div',
|
|
className,
|
|
highlight,
|
|
variant,
|
|
radii,
|
|
children,
|
|
'aria-selected': selected,
|
|
...props
|
|
},
|
|
ref,
|
|
) => (
|
|
// [Gitea #222] Callers pass `aria-selected`, but that attribute is only
|
|
// valid on option/tab/row roles; on a plain div axe flags it as critical.
|
|
// Keep the prop for callers and styling, expose the state as aria-current.
|
|
<AsNavItem
|
|
className={classNames(css.NavItem({ variant, radii }), className)}
|
|
data-highlight={highlight}
|
|
data-selected={selected === true || selected === 'true' ? true : undefined}
|
|
aria-current={selected === true || selected === 'true' ? 'page' : undefined}
|
|
{...props}
|
|
ref={ref}
|
|
>
|
|
{children}
|
|
</AsNavItem>
|
|
),
|
|
);
|
|
|
|
export const NavLink = forwardRef<HTMLAnchorElement, ComponentProps<typeof Link>>(
|
|
({ className, ...props }, ref) => (
|
|
<Link className={classNames(css.NavLink, className)} {...props} ref={ref} />
|
|
),
|
|
);
|
|
|
|
export const NavButton = as<'button'>(
|
|
({ as: AsNavButton = 'button', className, ...props }, ref) => (
|
|
<AsNavButton className={classNames(css.NavLink, className)} {...props} ref={ref} />
|
|
),
|
|
);
|