Repository navigation
Add signals library, restructure panel scripts, and enhance accessibility - #971
Merged
Merged
Conversation
Add the signals library used to derive the state of the panel scripts, update Biome to 2.6 and enable the rules for import cycles, floating promises, unused expressions, loop functions and explicit `any`. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Group the scripts in `services`, `components`, `views`, `models` and `utils`, with a single entry point (`index.ts`) that registers what the panel starts. `app` no longer imports any component, so there are no import cycles. Keep the state that was read from the DOM in signals, with models for the pages tree, the calendar and the updater, and move each view to a function started only when the page contains its element. Share the inputs base class, the dropdown list of the select and tags inputs, the `post()` request helper with the CSRF token and the synchronization of the file inputs. Split the longest methods, fix the quirks found in the select and tags inputs (stale filters, selectors broken by special characters, empty tags), document the methods with TSDoc and replace every explicit `any` with a type. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The panel already relies on features that are newer than `requestSubmit()` (`:has()`, `SubmitEvent.submitter`, ARIA reflection), so the native method is available in every browser it supports. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Open a menu with Enter or Space and focus its first item, choose an item with the keyboard giving the focus back to the button, close the menu with Tab and jump to an item by typing its first letters. Follow the ARIA menu button pattern with `aria-haspopup`, `role="menu"` and `role="menuitem"`, and set up the buttons created after the page is loaded. Do not move the focus to the editor when the button of the toolbar menu is clicked, otherwise the arrow keys moved the cursor of the editor instead of the focus in the menu. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Keep the focus on the select input after choosing an item or closing the list with Escape, and on the date input after Escape or Backspace, so that Tab continues from the field and the calendar can be opened again with the arrow keys, Enter, Space or a click. Detect the comma of the tags input with `event.key` instead of the layout-dependent `event.code`, with the keys configurable through the `addKeys` option. Set `aria-expanded` on the toggles of the sections and of the pages tree, and give the thumbnails of the dropdown lists an empty `alt`. While the sidebar is open on small screens, make the page behind it inert, close it when its backdrop is clicked or when the window grows to the desktop layout, and lock the scroll of the page only below that breakpoint. Lock the scroll of the page behind an open modal too. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Turn the actions that clear a date and generate a slug into buttons, so that they can be reached and activated with the keyboard, with a visible focus ring. Name the generate button and the search inputs of the pages and files lists with an `aria-label`, since the placeholder is not a label. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The original code tried to strip the seconds with a string pattern that never matched, so the value always included them. Restore that behavior instead of removing the seconds only when they are zero. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Critical non-existent Signals API imports block the build, alongside additional calendar, request-submit, chart, date, search, and accessibility issues.
6 open issues
1 file not reviewed
panel/pnpm-lock.yaml: Generated file
What changed in this PR
This pull request restructures the panel frontend into modular services, models, components, utilities, and view initializers while adding Signals-based state management, accessibility improvements, styling updates, and upgraded tooling.
Changes:
- Reorganized panel initialization, views, services, models, editors, and shared utilities.
- Added
@preact/signals-coreand reactive state for calendars, updates, page trees, forms, and UI components. - Improved accessibility, keyboard interactions, modal/sidebar behavior, form controls, build configuration, and Biome rules.
| File | Summary |
|---|---|
panel/views/partials/files/file/list.php |
Labels the file search input. |
panel/views/pages/index.php |
Labels the page search input. |
panel/views/fields/slug.php |
Replaces the slug action span with an accessible button. |
panel/views/fields/date.php |
Replaces the date reset span with a button. |
panel/src/ts/views/updates.ts |
Initializes update checking and installation. |
panel/src/ts/views/plugins.ts |
Handles plugin enable and disable actions. |
panel/src/ts/views/login.ts |
Prevents duplicate login submissions. |
panel/src/ts/views/files.ts |
Initializes file views and file actions. |
panel/src/ts/views/dashboard.ts |
Initializes dashboard commands and charts. |
panel/src/ts/views/backups.ts |
Handles backup creation and downloads. |
panel/src/ts/utils/validation.ts |
Documents validation and escaping helpers. |
panel/src/ts/utils/toolbar.ts |
Uses shared keyboard navigation for toolbars. |
panel/src/ts/utils/strings.ts |
Documents string conversion utilities. |
panel/src/ts/utils/search.ts |
Adds shared search helpers. |
panel/src/ts/utils/request.ts |
Removes the former request implementation. |
panel/src/ts/utils/numbers.ts |
Documents safe integer handling. |
panel/src/ts/utils/math.ts |
Documents numeric helpers. |
panel/src/ts/utils/keyboard.ts |
Adds shared keyboard index navigation. |
panel/src/ts/utils/forms.ts |
Adds form serialization and download helpers. |
panel/src/ts/utils/events.ts |
Adds typed debounce and throttle helpers. |
panel/src/ts/utils/duration.ts |
Adds duration conversion helpers. |
panel/src/ts/utils/dimensions.ts |
Documents element dimension helpers. |
panel/src/ts/utils/date.ts |
Adds date formatting utilities. |
panel/src/ts/utils/cookies.ts |
Documents cookie helpers. |
panel/src/ts/utils/arrays.ts |
Removes unused array utilities. |
panel/src/ts/services/translation.ts |
Moves and documents translation services. |
panel/src/ts/services/request.ts |
Adds typed panel requests and POST helpers. |
panel/src/ts/services/modals.ts |
Adds the modal registry service. |
panel/src/ts/services/modal.ts |
Refactors modal behavior and focus management. |
panel/src/ts/services/forms.ts |
Adds the form registry service. |
panel/src/ts/services/form.ts |
Adds reactive form management and input loading. |
panel/src/ts/services/app.ts |
Adds application configuration and initialization. |
panel/src/ts/polyfills/request-submit.ts |
Removes the request-submit polyfill. |
panel/src/ts/models/updates.ts |
Adds the reactive update model. |
panel/src/ts/models/pages-tree.ts |
Adds reactive page tree state. |
panel/src/ts/models/calendar.ts |
Adds reactive calendar state and navigation. |
panel/src/ts/index.ts |
Registers panel services, components, and views. |
panel/src/ts/components/views/updates.ts |
Removes the former update view class. |
panel/src/ts/components/views/statistics.ts |
Removes the former statistics view class. |
panel/src/ts/components/views/plugins.ts |
Removes the former plugin view class. |
panel/src/ts/components/views/pages.ts |
Removes the former page view class. |
panel/src/ts/components/views/login.ts |
Removes the former login view class. |
panel/src/ts/components/views/dashboard.ts |
Removes the former dashboard view class. |
panel/src/ts/components/views/backups.ts |
Removes the former backup view class. |
panel/src/ts/components/ui/tooltips.ts |
Adds centralized tooltip handling. |
panel/src/ts/components/ui/tooltip.ts |
Adds reusable tooltip rendering and positioning. |
panel/src/ts/components/ui/tabs.ts |
Adds reactive tab selection and keyboard navigation. |
panel/src/ts/components/ui/statistics-chart.ts |
Refactors chart initialization and point tooltips. |
panel/src/ts/components/ui/spinner.ts |
Adds shared spinner status rendering. |
panel/src/ts/components/ui/sections.ts |
Adds reactive collapsible sections. |
panel/src/ts/components/ui/notifications.ts |
Moves notification initialization into the UI namespace. |
panel/src/ts/components/ui/notification.ts |
Adds reusable notification rendering and dismissal. |
panel/src/ts/components/ui/navigation.ts |
Adds reactive sidebar behavior and inert background content. |
panel/src/ts/components/ui/dropdowns.ts |
Adds accessible dropdown behavior and keyboard navigation. |
panel/src/ts/components/ui/color-scheme.ts |
Updates color scheme service imports and documentation. |
panel/src/ts/components/tooltips.ts |
Removes the former tooltip component. |
panel/src/ts/components/tooltip.ts |
Removes the former tooltip implementation. |
panel/src/ts/components/tabs.ts |
Removes the former tabs component. |
panel/src/ts/components/sections.ts |
Removes the former sections component. |
panel/src/ts/components/notification.ts |
Removes the former notification component. |
panel/src/ts/components/navigation.ts |
Removes the former navigation component. |
panel/src/ts/components/inputs/togglegroup-input.ts |
Migrates toggle groups to the shared input base. |
panel/src/ts/components/inputs/slug-input.ts |
Migrates slug inputs to the shared input base. |
panel/src/ts/components/inputs/range-input.ts |
Migrates range inputs to the shared input base. |
panel/src/ts/components/inputs/input.ts |
Adds shared input abstractions and change dispatching. |
panel/src/ts/components/inputs/image-picker.ts |
Migrates image picker requests and input handling. |
panel/src/ts/components/inputs/editor/markdown/linktooltip.ts |
Removes the former Markdown link tooltip. |
panel/src/ts/components/inputs/dropdown-list.ts |
Adds shared dropdown list state and filtering. |
panel/src/ts/components/inputs/color-input.ts |
Migrates color inputs to the shared input base. |
panel/src/ts/components/inputs/array-input.ts |
Migrates array inputs to the shared input base. |
panel/src/ts/components/form.ts |
Removes the former form component. |
panel/src/ts/components/files/file-inputs.ts |
Adds shared file option synchronization. |
panel/src/ts/components/files.ts |
Removes the former files component. |
panel/src/ts/components/editor/toolbar-button.ts |
Adds shared editor toolbar button creation. |
panel/src/ts/components/editor/markdown-view.ts |
Updates Markdown editor imports and documentation. |
panel/src/ts/components/editor/markdown-placeholder.ts |
Documents Markdown placeholder behavior. |
panel/src/ts/components/editor/markdown-menu.ts |
Refactors Markdown toolbar construction. |
panel/src/ts/components/editor/markdown-link-tooltip.ts |
Adds the relocated Markdown link tooltip. |
panel/src/ts/components/editor/markdown-keymap.ts |
Documents Markdown keymap construction. |
panel/src/ts/components/editor/markdown-input-rules.ts |
Documents Markdown input rules. |
panel/src/ts/components/editor/markdown-commands.ts |
Updates Markdown command imports and documentation. |
panel/src/ts/components/editor/code-view.ts |
Updates code editor menu imports and documentation. |
panel/src/ts/components/editor/code-menu.ts |
Reuses shared toolbar buttons for the code editor. |
panel/src/ts/components/dropdowns.ts |
Removes the former dropdown component. |
panel/src/ts/app.ts |
Removes the former monolithic application entry point. |
panel/src/scss/components/forms/_forms-base.scss |
Styles action buttons and adjusts form input spacing. |
panel/src/scss/components/_sidebar.scss |
Adjusts desktop sidebar scrolling behavior. |
panel/src/scss/components/_modals.scss |
Prevents background scrolling while modals are open. |
panel/pnpm-lock.yaml |
Locks the Signals and Biome dependency updates. |
panel/package.json |
Adds Signals and upgrades Biome. |
panel/build.js |
Changes the build entry point to src/ts/index.ts. |
panel/biome.json |
Updates the Biome schema and lint rules. |
Review effort: Lite
…t label Use the last day of the month when moving from February 29 to a year that is not a leap year, instead of ending up in March while the calendar still shows February. Look the weekday names up by `getDay()`: the labels always start from Sunday and `weekStarts` only changes the layout of the calendar, so a Sunday was formatted as Monday when the week started on Monday. Give the button that clears a date an accessible name and a tooltip. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request updates dependencies and improves code quality, accessibility, and maintainability across the project. The most significant changes include upgrading the Biome linter and its configuration, updating build entry points, enhancing accessibility and styles in the SCSS files, and adding a new dependency. The main application entry point was also refactored.
Dependency and Tooling Updates:
@biomejs/biomeand its related CLI packages from2.5.15to2.6.2, updating the schema and adding/enabling several new lint rules inbiome.jsonfor stricter code quality enforcement [1] [2] [3] [4] [5] [6] [7].@preact/signals-coreas a new dependency inpackage.jsonandpnpm-lock.yaml[1] [2] [3] [4].Build and Source Structure:
src/ts/app.tstosrc/ts/index.tsinbuild.js, and removed the previousapp.tsfile, indicating a refactor or migration of the main application logic [1] [2].Accessibility and Style Improvements:
.form-input-actionin_forms-base.scss, including better focus states, padding, and button styling._modals.scssand_sidebar.scss[1] [2].These changes collectively improve code quality, maintainability, and user experience.