fix: toolbar fixes

[dermatz]

This pull request makes a series of improvements to the MageForge toolbar's CSS and JavaScript, focusing on accessibility, code maintainability, and visual consistency. The main changes include enhanced ARIA attributes for accessibility, refactoring and cleanup of toolbar and audit logic, and updates to color and sizing variables for better maintainability and design consistency.

Accessibility improvements:

• Added aria-label and dynamic aria-expanded attributes to the toolbar burger button and menu group headers to improve screen reader support and accessibility. (src/view/frontend/web/js/toolbar/ui.js) [1] [2] [3]

Code refactoring and cleanup:

• Refactored the toolbar destroy logic to centralize cleanup in destroyToolbar, ensuring all references are properly nulled and audits deactivated. (src/view/frontend/web/js/toolbar.js, src/view/frontend/web/js/toolbar/ui.js) [1] [2]
• Improved audit group collapse/expand logic to update ARIA attributes and clarified state handling. (src/view/frontend/web/js/toolbar/audits.js)

Design and maintainability updates:

• Replaced hardcoded color values with CSS variables for gradients and overlays, and removed unused or redundant color variables. (src/view/frontend/web/css/toolbar.css) [1] [2] [3]
• Standardized spacing, sizing, and font values using pixel units for improved consistency across the toolbar UI. (src/view/frontend/web/css/toolbar.css) [1] [2] [3] [4] [5]

Minor fixes:

• Removed unnecessary clearing of activeAudits in the audit deactivation method. (src/view/frontend/web/js/toolbar/audits.js)

[Copilot]

Pull request overview

This PR ensures that any currently active toolbar audits are properly deactivated when the MageForge toolbar component is destroyed, preventing audits from continuing to run after the UI is removed.

Changes:

• Invoke deactivateAllAudits() during the Alpine component destroy() lifecycle hook to clean up active audits on teardown.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

[Copilot]

toolbar.css now defines --mageforge-color-amber/--mageforge-color-pink in :root and uses them in --gradient-brand. These custom properties overlap with the Inspector’s global variables; since inspector.phtml loads toolbar.css before inspector.css, the Inspector stylesheet will override shared :root vars (e.g. --mageforge-color-amber), making the toolbar gradient dependent on CSS load order and potentially not using the intended toolbar colors. Consider scoping toolbar-only variables under .mageforge-toolbar (or prefixing them like --mageforge-toolbar-*) to avoid cross-feature variable collisions.