Skip to content

Improve status page frontend - #442

Open
jbrooksuk wants to merge 1 commit into
mainfrom
codex/improve-status-page-frontend
Open

Improve status page frontend#442
jbrooksuk wants to merge 1 commit into
mainfrom
codex/improve-status-page-frontend

Conversation

@jbrooksuk

Copy link
Copy Markdown
Member

Summary

  • improve status-page heading hierarchy, accessible names, focus behavior, date-range labels, and control sizing
  • load Chart.js only when a metric chart is rendered and move chart behavior into a dedicated frontend bundle
  • shorten the subscribe label across supported translations and replace hand-written interface SVGs with Heroicons
  • correct the components render hook and polish the demo seeder copy

Testing

  • npm run build
  • vendor/bin/pint --dirty --test
  • php84 -d memory_limit=512M vendor/bin/pest --ci --compact (1,053 passed, 2 todos; 3,850 assertions)

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

馃挕 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 238ed5bca9

鈩癸笍 About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 馃憤.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment on lines +9 to +11
@once
@vite('resources/js/metrics.js', 'vendor/cachethq/cachet/build')
@endonce

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Load the metrics initializer before Alpine starts

On every status page containing a metric chart, this directive emits the metrics module in the body after the layout's head-loaded cachet.js. Because module scripts are deferred and execute in document order, cachet.js calls Alpine.start() first; the inline alpine:init handler then captures window.cachetMetricChart while it is still undefined, so the component has no init callback and the chart remains blank. Load/register the metrics initializer before starting Alpine.

Useful? React with 馃憤聽/ 馃憥.

Comment on lines 51 to +53
x-on:click="period = {{ $value->value }}"
x-bind:aria-selected="period === {{ $value->value }} ? 'true' : 'false'"
x-bind:tabindex="period === {{ $value->value }} ? 0 : -1"

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Add keyboard navigation before removing tabs from tab order

For keyboard-only users, setting every inactive period tab to tabindex="-1" makes those controls unreachable because this custom tablist has no Left/Right, Home, or End key handlers. Either use the already loaded Alpine UI tabs primitive or implement the expected focus navigation before applying roving tabindex; otherwise users can view only the initially selected period.

AGENTS.md reference: AGENTS.md:L165-L167

Useful? React with 馃憤聽/ 馃憥.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant