Fix/toolbar audit highlighting

[dermatz]

This pull request refactors and enhances the highlighting logic for accessibility audits in the MageForge toolbar. It centralizes the logic for applying and clearing highlight styles, improves the visual cues for different audit types, and updates the audit modules to use these shared helpers.

Refactoring and code simplification:

• Introduced shared helper functions applyHighlight and clearHighlight in highlight.js to handle the application and removal of audit highlight classes, reducing code duplication across audit modules. These helpers also manage badge updates and smooth scrolling to the first highlighted element.
• Updated all audit modules (images-without-alt.js, images-without-dimensions.js, images-without-lazy-load.js, inputs-without-label.js, low-contrast-text.js) to use the new shared highlight helpers instead of duplicating highlight logic. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]

Visual and accessibility improvements:

• Enhanced CSS for highlighted elements:
  • Added an inset red box-shadow for low-contrast elements for better visibility.
  • Made images with audit issues semi-transparent so the red background of their parent is visible.
  • Applied a red background to the parent container of highlighted images, ensuring the highlight is visible even if the image fills its container.
  • Applied a color filter to non-image elements (like inputs and text) for improved visibility during audits.

These changes make the codebase easier to maintain and improve the clarity of audit highlights for users.

[Copilot]

Pull request overview

This PR refactors MageForge toolbar audit highlighting by introducing shared helpers for applying/clearing highlights, and adjusts toolbar CSS to improve highlight visibility (including a new fixed-position overlay for highlighted images).

Changes:

• Added shared applyHighlight / clearHighlight helpers for audit highlight behavior.
• Updated multiple audits to use the shared helpers instead of duplicating highlight/badge/scroll logic.
• Enhanced audit highlight styling in toolbar.css, including a new .mageforge-audit-img-overlay element.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/view/frontend/web/js/toolbar/audits/highlight.js	New shared highlight/clear helpers + image overlay support
src/view/frontend/web/js/toolbar/audits/images-without-alt.js	Switched to shared highlight helpers
src/view/frontend/web/js/toolbar/audits/images-without-dimensions.js	Switched to shared highlight helpers
src/view/frontend/web/js/toolbar/audits/images-without-lazy-load.js	Switched to shared highlight helpers
src/view/frontend/web/js/toolbar/audits/inputs-without-label.js	Switched to shared highlight helpers
src/view/frontend/web/js/toolbar/audits/low-contrast-text.js	Switched to shared highlight helpers
src/view/frontend/web/css/toolbar.css	Updated highlight styles and added .mageforge-audit-img-overlay styles

[Copilot]

Pull request overview

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