Skip to content

Commit 68d3abc

Browse files
SteveJonesDevSteveJonesDev
authored
Merge pull request #1261 from equalizedigital/codex/make-frontend-highlighter-elements-translatable
Make highlighter controls translatable
2 parents 3d939b4 + 0a9408a commit 68d3abc

1 file changed

Lines changed: 15 additions & 15 deletions

File tree

‎src/frontendHighlighterApp/index.js‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import { computePosition, autoUpdate } from '@floating-ui/dom';
55
import { createFocusTrap } from 'focus-trap';
66
import { isFocusable } from 'tabbable';
7-
import { __, _n } from '@wordpress/i18n';
7+
import { __, _n, sprintf } from '@wordpress/i18n';
88
import { saveFixSettings } from '../common/saveFixSettingsRest';
99
import { fillFixesModal, fixSettingsModalInit, openFixesModal } from './fixesModal';
1010
import { hashString } from '../common/helpers';
@@ -286,7 +286,7 @@ class AccessibilityCheckerHighlight {
286286
// Create the tooltip.
287287
const tooltip = document.createElement( 'button' );
288288
tooltip.classList = 'edac-highlight-btn edac-highlight-btn-' + value.rule_type;
289-
tooltip.setAttribute( 'aria-label', `Open details for ${ value.rule_title }, ${ index + 1 } of ${ totalItems }` );
289+
tooltip.setAttribute( 'aria-label', sprintf( __( 'Open details for %1$s, %2$s of %3$s', 'accessibility-checker' ), value.rule_title, index + 1, totalItems ) );
290290
tooltip.setAttribute( 'aria-expanded', 'false' );
291291
tooltip.setAttribute( 'aria-haspopup', 'dialog' );
292292

@@ -405,21 +405,21 @@ class AccessibilityCheckerHighlight {
405405

406406
const newElement = `
407407
<div id="edac-highlight-panel" class="edac-highlight-panel edac-highlight-panel--${ widgetPosition }">
408-
<button id="edac-highlight-panel-toggle" class="edac-highlight-panel-toggle" aria-haspopup="dialog" aria-label="Accessibility Checker Tools"></button>
408+
<button id="edac-highlight-panel-toggle" class="edac-highlight-panel-toggle" aria-haspopup="dialog" aria-label="${ __( 'Accessibility Checker Tools', 'accessibility-checker' ) }"></button>
409409
<div id="edac-highlight-panel-description" class="edac-highlight-panel-description" role="dialog" aria-labelledby="edac-highlight-panel-description-title" tabindex="0">
410-
<button class="edac-highlight-panel-description-close edac-highlight-panel-controls-close" aria-label="Close">×</button>
410+
<button class="edac-highlight-panel-description-close edac-highlight-panel-controls-close" aria-label="${ __( 'Close', 'accessibility-checker' ) }">×</button>
411411
<div id="edac-highlight-panel-description-title" class="edac-highlight-panel-description-title"></div>
412412
<div class="edac-highlight-panel-description-content"></div>
413413
<div id="edac-highlight-panel-description-code" class="edac-highlight-panel-description-code"><code></code></div>
414414
</div>
415415
<div id="edac-highlight-panel-controls" class="edac-highlight-panel-controls" tabindex="0">
416-
<button id="edac-highlight-panel-controls-close" class="edac-highlight-panel-controls-close" aria-label="Close">×</button>
417-
<div class="edac-highlight-panel-controls-title">Accessibility Checker</div>
418-
<div class="edac-highlight-panel-controls-summary">Loading...</div>
416+
<button id="edac-highlight-panel-controls-close" class="edac-highlight-panel-controls-close" aria-label="${ __( 'Close', 'accessibility-checker' ) }">×</button>
417+
<div class="edac-highlight-panel-controls-title">${ __( 'Accessibility Checker', 'accessibility-checker' ) }</div>
418+
<div class="edac-highlight-panel-controls-summary">${ __( 'Loading...', 'accessibility-checker' ) }</div>
419419
<div class="edac-highlight-panel-controls-buttons ${ ! userCanEdit ? ' single_button' : '' }">
420420
<div>
421-
<button id="edac-highlight-previous" disabled="true"><span aria-hidden="true">« </span>Previous</button>
422-
<button id="edac-highlight-next" disabled="true">Next<span aria-hidden="true"> »</span></button><br />
421+
<button id="edac-highlight-previous" disabled="true"><span aria-hidden="true">« </span>${ __( 'Previous', 'accessibility-checker' ) }</button>
422+
<button id="edac-highlight-next" disabled="true">${ __( 'Next', 'accessibility-checker' ) }<span aria-hidden="true"> »</span></button><br />
423423
</div>
424424
<div>
425425
${ rescanButton }
@@ -521,17 +521,17 @@ class AccessibilityCheckerHighlight {
521521
//issueElement.focus();
522522

523523
if ( ! this.checkVisibility( tooltip ) || ! this.checkVisibility( element ) ) {
524-
this.currentIssueStatus = 'The element is not visible. Try disabling styles.';
524+
this.currentIssueStatus = __( 'The element is not visible. Try disabling styles.', 'accessibility-checker' );
525525
//TODO: console.log(`Element with id ${id} is not visible!`);
526526
} else {
527527
this.currentIssueStatus = null;
528528
}
529529
} else {
530-
this.currentIssueStatus = 'The element is not focusable. Try disabling styles.';
530+
this.currentIssueStatus = __( 'The element is not focusable. Try disabling styles.', 'accessibility-checker' );
531531
//TODO: console.log(`Element with id ${id} is not focusable!`);
532532
}
533533
} else {
534-
this.currentIssueStatus = 'The element was not found on the page.';
534+
this.currentIssueStatus = __( 'The element was not found on the page.', 'accessibility-checker' );
535535
//TODO: console.log(`Element with id ${id} not found in the document!`);
536536
}
537537

@@ -707,13 +707,13 @@ class AccessibilityCheckerHighlight {
707707
class="edac-fix-settings--button--open edac-highlight-panel-description--button"
708708
aria-haspopup="true"
709709
aria-controls="edac-highlight-panel-description-fix"
710-
aria-label="Fix issue: ${ this.fixes[ matchingObj.slug ][ Object.keys( this.fixes[ matchingObj.slug ] )[ 0 ] ].group_name }"> Fix Issue</button>`;
710+
aria-label="${ sprintf( __( 'Fix issue: %s', 'accessibility-checker' ), this.fixes[ matchingObj.slug ][ Object.keys( this.fixes[ matchingObj.slug ] )[ 0 ] ].group_name ) }"> ${ __( 'Fix Issue', 'accessibility-checker' ) }</button>`;
711711
} else {
712712
content += ` <br />`;
713713
}
714714

715715
// Get the link to the documentation
716-
content += `<a class="edac-highlight-panel-description-reference" href="${ matchingObj.link }">Full Documentation</a>`;
716+
content += `<a class="edac-highlight-panel-description-reference" href="${ matchingObj.link }">${ __( 'Full Documentation', 'accessibility-checker' ) }</a>`;
717717

718718
// Get the code button
719719
content += `<button class="edac-highlight-panel-description-code-button" aria-expanded="false" aria-controls="edac-highlight-panel-description-code">${ __( 'Show Code', 'accessibility-checker' ) }</button>`;
@@ -1023,7 +1023,7 @@ class AccessibilityCheckerHighlight {
10231023
const landmarkType = this.getLandmarkType( landmarkElement );
10241024
const landmarkLabel = document.createElement( 'div' );
10251025
landmarkLabel.classList.add( 'edac-landmark-label' );
1026-
landmarkLabel.textContent = `Landmark: ${ landmarkType }`;
1026+
landmarkLabel.textContent = sprintf( __( 'Landmark: %s', 'accessibility-checker' ), landmarkType );
10271027
landmarkLabel.setAttribute( 'aria-hidden', 'true' );
10281028
landmarkLabel.style.cssText = `
10291029
position: absolute;

0 commit comments

Comments
 (0)