Add headings map to frontend highlighter - #1245
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds a headings and landmarks map UI to the front-end highlighter: new i18n sprintf import, UI state and controls, event handlers, lifecycle integration, scanning/building of heading and landmark maps, highlighting/labeling utilities, and extensive SCSS for the new panels (headings + landmarks). Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant P as Panel Controls / UI
participant A as AccessibilityCheckerHighlight
participant D as Document (DOM)
U->>P: Click "Headings Map" toggle
P->>A: openHeadingMap()
A->>A: buildHeadingMap()
A->>D: Query h1–h6 + [role="heading"]
A->>A: Compute levels, numbers, issues
A->>P: Render headings list & tabs
Note over P,A: Focus trap/tab navigation initialized
U->>P: Select heading item
P->>A: handleHeadingMapInteraction()
A->>A: highlightHeadingMapItem(index)
A->>D: Scroll to heading + add highlight
U->>P: Switch to "Landmarks" tab
P->>A: switchHeadingMapTab("landmarks")
A->>A: buildLandmarkMap()
A->>D: Query landmark elements, compute roles/names
A->>P: Render landmark list & labels
U->>P: Select landmark item
P->>A: highlightLandmarkMapItem(index)
A->>D: Apply landmark label/outline + position label
A-->>P: Mark item active
U->>P: Close map or panel
P->>A: closeHeadingMap({restoreFocus:true})
A->>A: clearHeadingMapHighlights() & removeLandmarkLabels()
A->>P: Remove map UI
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
🧰 Additional context used📓 Path-based instructions (2)**/*.js📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
🧬 Code graph analysis (1)src/frontendHighlighterApp/index.js (3)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🔇 Additional comments (3)
Comment |
Summary of ChangesHello @SteveJonesDev, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a significant enhancement to the frontend accessibility highlighter by integrating a 'Headings Map' feature. This new functionality provides users with a comprehensive overview of the page's heading structure, identifies potential accessibility issues related to headings, and improves navigation by allowing direct jumps to any heading. The addition aims to make it easier for users to understand and address heading-related accessibility concerns on a page. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a valuable headings map feature to the frontend highlighter. The implementation is well-structured, leveraging modern JavaScript and paying close attention to accessibility for the new UI components. I have two suggestions for improvement in src/frontendHighlighterApp/index.js: one to enhance performance when building the heading list, and another to add an important accessibility check for elements with role="heading".
| if ( ! text ) { | ||
| issues.push( { | ||
| type: 'error', | ||
| message: __( 'Heading is empty.', 'accessibility-checker' ), | ||
| } ); | ||
| } |
There was a problem hiding this comment.
The ARIA specification requires that elements with role="heading" MUST have an aria-level attribute, unless they are native heading elements (h1-h6). This check is missing. Adding it would make the heading structure analysis more complete and is important for accessibility compliance.
if ( ! text ) {
issues.push( {
type: 'error',
message: __( 'Heading is empty.', 'accessibility-checker' ),
} );
}
const role = node.getAttribute( 'role' );
const tagName = node.tagName.toLowerCase();
if ( role && 'heading' === role.toLowerCase() && ! /^h[1-6]$/.test( tagName ) && ! node.hasAttribute( 'aria-level' ) ) {
issues.push( {
type: 'error',
message: __( 'Element with role="heading" is missing the required "aria-level" attribute.', 'accessibility-checker' ),
} );
}| mapItems.forEach( ( item, index ) => { | ||
| const listItem = document.createElement( 'li' ); | ||
| listItem.className = 'edac-highlight-panel-heading-map-item'; | ||
| listItem.style.setProperty( '--edac-heading-map-level', item.level ); | ||
|
|
||
| const button = document.createElement( 'button' ); | ||
| button.type = 'button'; | ||
| button.className = 'edac-highlight-panel-heading-map-item-button'; | ||
| button.dataset.headingIndex = String( index ); | ||
|
|
||
| const orderSpan = document.createElement( 'span' ); | ||
| orderSpan.className = 'edac-highlight-panel-heading-map-item-order'; | ||
| orderSpan.textContent = item.numbering || String( index + 1 ); | ||
|
|
||
| const levelSpan = document.createElement( 'span' ); | ||
| levelSpan.className = 'edac-highlight-panel-heading-map-item-level'; | ||
| levelSpan.textContent = `H${ item.level }`; | ||
|
|
||
| const textSpan = document.createElement( 'span' ); | ||
| textSpan.className = 'edac-highlight-panel-heading-map-item-text'; | ||
| textSpan.textContent = item.text; | ||
|
|
||
| button.append( orderSpan, levelSpan, textSpan ); | ||
| listItem.appendChild( button ); | ||
|
|
||
| if ( item.issues.length ) { | ||
| const issuesList = document.createElement( 'ul' ); | ||
| issuesList.className = 'edac-highlight-panel-heading-map-item-issues'; | ||
|
|
||
| item.issues.forEach( ( issue ) => { | ||
| const issueItem = document.createElement( 'li' ); | ||
| issueItem.className = `edac-highlight-panel-heading-map-item-issue edac-highlight-panel-heading-map-item-issue-${ issue.type }`; | ||
| issueItem.textContent = issue.message; | ||
| issuesList.appendChild( issueItem ); | ||
| } ); | ||
|
|
||
| listItem.appendChild( issuesList ); | ||
| listItem.classList.add( 'edac-highlight-panel-heading-map-item-has-issues' ); | ||
| } | ||
|
|
||
| list.appendChild( listItem ); | ||
| } ); |
There was a problem hiding this comment.
To improve performance and code readability, you can use map to create an array of heading list items and then append them all at once to the main list using list.append(...). This avoids appending to the DOM inside a loop, which can be inefficient on pages with many headings.
const listItems = mapItems.map( ( item, index ) => {
const listItem = document.createElement( 'li' );
listItem.className = 'edac-highlight-panel-heading-map-item';
listItem.style.setProperty( '--edac-heading-map-level', item.level );
const button = document.createElement( 'button' );
button.type = 'button';
button.className = 'edac-highlight-panel-heading-map-item-button';
button.dataset.headingIndex = String( index );
const orderSpan = document.createElement( 'span' );
orderSpan.className = 'edac-highlight-panel-heading-map-item-order';
orderSpan.textContent = item.numbering || String( index + 1 );
const levelSpan = document.createElement( 'span' );
levelSpan.className = 'edac-highlight-panel-heading-map-item-level';
levelSpan.textContent = `H${ item.level }`;
const textSpan = document.createElement( 'span' );
textSpan.className = 'edac-highlight-panel-heading-map-item-text';
textSpan.textContent = item.text;
button.append( orderSpan, levelSpan, textSpan );
listItem.appendChild( button );
if ( item.issues.length ) {
const issuesList = document.createElement( 'ul' );
issuesList.className = 'edac-highlight-panel-heading-map-item-issues';
const issueItems = item.issues.map( ( issue ) => {
const issueItem = document.createElement( 'li' );
issueItem.className = `edac-highlight-panel-heading-map-item-issue edac-highlight-panel-heading-map-item-issue-${ issue.type }`;
issueItem.textContent = issue.message;
return issueItem;
} );
issuesList.append( ...issueItems );
listItem.appendChild( issuesList );
listItem.classList.add( 'edac-highlight-panel-heading-map-item-has-issues' );
}
return listItem;
} );
list.append( ...listItems );![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
src/frontendHighlighterApp/sass/app.scss (2)
439-447: Conflicting display declarations.Block sets both display: block and display: none; last wins. Drop the redundant one to avoid confusion.
- color: variables.$color-white !important; - display: block; + color: variables.$color-white !important; background-color: variables.$color-blue !important; border: solid 1px variables.$color-gray-light !important; display: none;
393-396: Long headings may overflow. Allow wrapping.Add robust wrapping to avoid layout breaks on narrow screens.
&-text { flex: 1 !important; text-align: left !important; + word-break: break-word !important; + overflow-wrap: anywhere !important; }src/frontendHighlighterApp/index.js (2)
949-963: Expose active item state to AT.When changing active heading, also toggle an accessibility state.
clearHeadingMapHighlights = () => { document.querySelectorAll( '.edac-heading-map-target' ).forEach( ( node ) => { node.classList.remove( 'edac-heading-map-target' ); } ); if ( this.headingMapPanel ) { const activeButton = this.headingMapPanel.querySelector( '.edac-highlight-panel-heading-map-item-button.is-active' ); if ( activeButton ) { activeButton.classList.remove( 'is-active' ); + activeButton.removeAttribute( 'aria-current' ); } }if ( this.headingMapPanel ) { const previousButton = this.headingMapPanel.querySelector( `[data-heading-index="${ this.activeHeadingMapIndex }"]` ); if ( previousButton ) { previousButton.classList.remove( 'is-active' ); + previousButton.removeAttribute( 'aria-current' ); } }if ( this.headingMapPanel ) { const button = this.headingMapPanel.querySelector( `[data-heading-index="${ index }"]` ); if ( button ) { button.classList.add( 'is-active' ); + button.setAttribute( 'aria-current', 'true' ); } }Also applies to: 986-992, 999-1004
771-787: Simplify node collection; Set is unnecessary.querySelectorAll won’t duplicate elements; filter once and go.
- const seenNodes = new Set(); - const headingNodes = []; + const headingNodes = []; const selector = 'h1, h2, h3, h4, h5, h6, [role="heading"]'; - const nodes = document.querySelectorAll( selector ); - - nodes.forEach( ( node ) => { - if ( seenNodes.has( node ) ) { - return; - } - if ( node.closest( '#edac-highlight-panel' ) ) { - return; - } - seenNodes.add( node ); - headingNodes.push( node ); - } ); + const nodes = Array.from( document.querySelectorAll( selector ) ) + .filter( ( node ) => ! node.closest( '#edac-highlight-panel' ) ); + headingNodes.push( ...nodes );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
src/frontendHighlighterApp/index.js(8 hunks)src/frontendHighlighterApp/sass/app.scss(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.js
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
All user-facing JavaScript strings must use wp.i18n for translation
Files:
src/frontendHighlighterApp/index.js
src/**/*
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Store source frontend assets (JS/CSS) in /src; do not commit edits directly to built files
Files:
src/frontendHighlighterApp/index.jssrc/frontendHighlighterApp/sass/app.scss
🧬 Code graph analysis (1)
src/frontendHighlighterApp/index.js (1)
src/pageScanner/index.js (3)
tagName(85-85)role(52-52)role(114-114)
🔇 Additional comments (5)
src/frontendHighlighterApp/sass/app.scss (2)
307-437: New heading-map styles look cohesive.Solid structure, sensible naming, good focus outlines and spacing. Keep it rolling.
526-529: Clear focus target ring.Nice, visible outline for in-page heading highlight. I pity the poor focus state that ain't visible.
src/frontendHighlighterApp/index.js (3)
61-70: Focus trapping and lifecycle hooks are tight.Dialog creation, event wiring, and cleanup on panel close look correct.
Also applies to: 111-128, 654-656, 692-693
860-896: Good i18n coverage for headings summary.Using __, _n, and sprintf correctly. Nailed it.
1038-1063: Fallback aria-level of 2 is spec-compliant Default2matches WAI-ARIA 1.3’s fallback and MDN’s guidance; no change needed. I pity the fool.
| <button id="edac-highlight-panel-heading-map-close" class="edac-highlight-panel-heading-map-close edac-highlight-panel-controls-close" aria-label="Close">×</button> | ||
| <div id="edac-highlight-panel-heading-map-title" class="edac-highlight-panel-heading-map-title">${ __( 'Headings Map', 'accessibility-checker' ) }</div> | ||
| <div class="edac-highlight-panel-heading-map-summary" aria-live="polite"></div> | ||
| <div class="edac-highlight-panel-heading-map-content"></div> | ||
| </div> |
There was a problem hiding this comment.
Localize the “Close” aria-label.
User-facing strings must use wp.i18n. Fix the close button label.
As per coding guidelines
- <button id="edac-highlight-panel-heading-map-close" class="edac-highlight-panel-heading-map-close edac-highlight-panel-controls-close" aria-label="Close">×</button>
+ <button id="edac-highlight-panel-heading-map-close" class="edac-highlight-panel-heading-map-close edac-highlight-panel-controls-close" aria-label="${ __( 'Close', 'accessibility-checker' ) }">×</button>Optional: make the live region atomic so screen readers read the updated summary as a whole.
- <div class="edac-highlight-panel-heading-map-summary" aria-live="polite"></div>
+ <div class="edac-highlight-panel-heading-map-summary" aria-live="polite" aria-atomic="true"></div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button id="edac-highlight-panel-heading-map-close" class="edac-highlight-panel-heading-map-close edac-highlight-panel-controls-close" aria-label="Close">×</button> | |
| <div id="edac-highlight-panel-heading-map-title" class="edac-highlight-panel-heading-map-title">${ __( 'Headings Map', 'accessibility-checker' ) }</div> | |
| <div class="edac-highlight-panel-heading-map-summary" aria-live="polite"></div> | |
| <div class="edac-highlight-panel-heading-map-content"></div> | |
| </div> | |
| <button id="edac-highlight-panel-heading-map-close" class="edac-highlight-panel-heading-map-close edac-highlight-panel-controls-close" aria-label="${ __( 'Close', 'accessibility-checker' ) }">×</button> | |
| <div id="edac-highlight-panel-heading-map-title" class="edac-highlight-panel-heading-map-title">${ __( 'Headings Map', 'accessibility-checker' ) }</div> | |
| <div class="edac-highlight-panel-heading-map-summary" aria-live="polite" aria-atomic="true"></div> | |
| <div class="edac-highlight-panel-heading-map-content"></div> | |
| </div> |
🤖 Prompt for AI Agents
In src/frontendHighlighterApp/index.js around lines 451-455, the close button's
aria-label is hardcoded and must be localized; update the template to use
wp.i18n.__ (ensure __ is referenced via const { __ } = wp.i18n or use wp.i18n.__
directly) to provide a localized "Close" label for the aria-label attribute, and
optionally add aria-atomic="true" to the
.edac-highlight-panel-heading-map-summary live region so screen readers announce
the summary as a whole when it changes.
| &-close { | ||
| width: 25px !important; | ||
| height: 25px !important; | ||
| color: variables.$color-blue-dark !important; | ||
| background-color: variables.$color-yellow !important; | ||
| font-size: 18px !important; | ||
| line-height: 25px !important; | ||
| position: absolute !important; | ||
| top: 0px !important; | ||
| right: 0px !important; | ||
| text-align: center !important; | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| cursor: pointer !important; | ||
| color: variables.$color-blue-dark !important; | ||
| background-color: variables.$color-white !important; | ||
| } | ||
| } |
There was a problem hiding this comment.
Close button hit area is too small (25×25). Bump to 44×44 for touch.
Tiny tap targets hurt accessibility. Increase size and line-height.
Apply this diff:
- &-close {
- width: 25px !important;
- height: 25px !important;
+ &-close {
+ width: 44px !important;
+ height: 44px !important;
color: variables.$color-blue-dark !important;
background-color: variables.$color-yellow !important;
- font-size: 18px !important;
- line-height: 25px !important;
+ font-size: 24px !important;
+ line-height: 44px !important;
position: absolute !important;
top: 0px !important;
right: 0px !important;
text-align: center !important;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| &-close { | |
| width: 25px !important; | |
| height: 25px !important; | |
| color: variables.$color-blue-dark !important; | |
| background-color: variables.$color-yellow !important; | |
| font-size: 18px !important; | |
| line-height: 25px !important; | |
| position: absolute !important; | |
| top: 0px !important; | |
| right: 0px !important; | |
| text-align: center !important; | |
| &:hover, | |
| &:focus { | |
| cursor: pointer !important; | |
| color: variables.$color-blue-dark !important; | |
| background-color: variables.$color-white !important; | |
| } | |
| } | |
| &-close { | |
| width: 44px !important; | |
| height: 44px !important; | |
| color: variables.$color-blue-dark !important; | |
| background-color: variables.$color-yellow !important; | |
| font-size: 24px !important; | |
| line-height: 44px !important; | |
| position: absolute !important; | |
| top: 0px !important; | |
| right: 0px !important; | |
| text-align: center !important; | |
| &:hover, | |
| &:focus { | |
| cursor: pointer !important; | |
| color: variables.$color-blue-dark !important; | |
| background-color: variables.$color-white !important; | |
| } | |
| } |
🤖 Prompt for AI Agents
In src/frontendHighlighterApp/sass/app.scss around lines 418-436 the close
button tap target is only 25×25 which is too small for touch; update width and
height to 44px and set line-height to 44px so the visible hit area meets
touch-accessibility guidelines, keep existing font-size and positioning, and
preserve hover/focus rules; ensure these values replace the 25px ones in that
selector (and keep or remove !important as per project style).
|
Closing in favor of this PR built on top of the refactored frontend highlighter. #1678 |
1 participant
Summary
Testing
https://chatgpt.com/codex/tasks/task_e_68d82c41e56883289d32a42292e4f89f
Summary by CodeRabbit