Skip to content

Commit 1aaa58d

Browse files
joedolsonjoedolson
committed
Update toolbar code to use data-id instead of id and synchronize behaviors when toolbar appears multiple times.
1 parent 93b60c1 commit 1aaa58d

File tree

5 files changed

+74
-56
lines changed

5 files changed

+74
-56
lines changed

‎src/js/wp-accessibility.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -492,7 +492,7 @@
492492
contrastButton.addEventListener('click', function () {
493493
let event;
494494
// This fires after the contrast change happens, and the ID is already changed.
495-
if ( this.getAttribute( 'id' ) == "is_normal_contrast") {
495+
if ( this.getAttribute( 'data-id' ) == "is_normal_contrast") {
496496
// high contrast turned on.
497497
event = {'contrast' : 'disabled'};
498498
} else {
@@ -508,7 +508,7 @@
508508
fontsizeButton.addEventListener('click', function () {
509509
let event;
510510
// This fires after the fontsize change happens, and the ID is already changed.
511-
if ( this.getAttribute( 'id' ) == "is_normal_fontsize") {
511+
if ( this.getAttribute( 'data-id' ) == "is_normal_fontsize") {
512512
// fontsizes turned on.
513513
event = {'fontsize' : 'disabled'};
514514
} else {

‎src/js/wp-accessibility.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/wpa-toolbar.js‎

Lines changed: 67 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,13 @@ function eraseCookie(name) {
4242

4343
insert_a11y_toolbar += '<ul class="a11y-toolbar-list">';
4444
if ( wpatb.enable_contrast == 'true' ) {
45-
insert_a11y_toolbar += '<li class="a11y-toolbar-list-item"><button type="button" class="a11y-toggle a11y-toggle-contrast toggle-contrast" id="is_normal_contrast" aria-pressed="false"><span class=\"offscreen\">' + wpatb.contrast + '</span><span class="aticon aticon-adjust" aria-hidden="true"></span></button></li>';
45+
insert_a11y_toolbar += '<li class="a11y-toolbar-list-item"><button type="button" class="a11y-toggle a11y-toggle-contrast toggle-contrast" data-id="is_normal_contrast" aria-pressed="false"><span class=\"offscreen\">' + wpatb.contrast + '</span><span class="aticon aticon-adjust" aria-hidden="true"></span></button></li>';
4646
}
4747
if ( wpatb.enable_grayscale == 'true' ) {
48-
insert_a11y_toolbar += '<li class="a11y-toolbar-list-item"><button type="button" class="a11y-toggle a11y-toggle-grayscale toggle-grayscale" id="is_normal_color" aria-pressed="false"><span class="offscreen">' + wpatb.grayscale + '</span><span class="aticon aticon-tint" aria-hidden="true"></span></button></li>';
48+
insert_a11y_toolbar += '<li class="a11y-toolbar-list-item"><button type="button" class="a11y-toggle a11y-toggle-grayscale toggle-grayscale" data-id="is_normal_color" aria-pressed="false"><span class="offscreen">' + wpatb.grayscale + '</span><span class="aticon aticon-tint" aria-hidden="true"></span></button></li>';
4949
}
5050
if ( wpatb.enable_fontsize == 'true' ) {
51-
insert_a11y_toolbar += '<li class="a11y-toolbar-list-item"><button type="button" class="a11y-toggle a11y-toggle-fontsize toggle-fontsize" id="is_normal_fontsize" aria-pressed="false"><span class="offscreen">' + wpatb.fontsize + '</span><span class="aticon aticon-font" aria-hidden="true"></span></button></li>';
51+
insert_a11y_toolbar += '<li class="a11y-toolbar-list-item"><button type="button" class="a11y-toggle a11y-toggle-fontsize toggle-fontsize" data-id="is_normal_fontsize" aria-pressed="false"><span class="offscreen">' + wpatb.fontsize + '</span><span class="aticon aticon-font" aria-hidden="true"></span></button></li>';
5252
}
5353
insert_a11y_toolbar += '</ul>';
5454
a11y_toolbar.classList.add( wpatb.responsive, 'a11y-toolbar', wpatb.is_rtl, wpatb.is_right, wpatb.custom_location );
@@ -98,26 +98,32 @@ let a11yToggle = document.querySelectorAll( '.a11y-toggle' );
9898

9999
function desaturate() {
100100
html.classList.add( 'desaturated' );
101-
let button = toolbar.querySelector( '#is_normal_color' );
102-
button.setAttribute( 'id', 'is_grayscale' );
103-
button.setAttribute( 'aria-pressed', true );
104-
button.classList.add( 'active' );
101+
let buttons = document.querySelectorAll( '[data-id="is_normal_color"]' );
102+
buttons.forEach( (button) => {
103+
button.setAttribute( 'data-id', 'is_grayscale' );
104+
button.setAttribute( 'aria-pressed', true );
105+
button.classList.add( 'active' );
106+
});
105107
}
106108

107109
function resaturate() {
108110
html.classList.remove( 'desaturated' );
109-
let button = toolbar.querySelector( '#is_grayscale' );
110-
button.setAttribute( 'id', 'is_normal_color' );
111-
button.setAttribute( 'aria-pressed', false );
112-
button.classList.remove( 'active' );
111+
let buttons = document.querySelectorAll( '[data-id="is_grayscale"]' );
112+
buttons.forEach( (button) => {
113+
button.setAttribute( 'data-id', 'is_normal_color' );
114+
button.setAttribute( 'aria-pressed', false );
115+
button.classList.remove( 'active' );
116+
});
113117
}
114118

115119
function addHighContrast() {
116120
body.classList.add( 'contrast' );
117-
let button = toolbar.querySelector( '#is_normal_contrast' );
118-
button.setAttribute( 'id', 'is_high_contrast' );
119-
button.setAttribute( 'aria-pressed', true );
120-
button.classList.add( 'active' );
121+
let buttons = document.querySelectorAll( '[data-id="is_normal_contrast"]' );
122+
buttons.forEach( (button) => {
123+
button.setAttribute( 'data-id', 'is_high_contrast' );
124+
button.setAttribute( 'aria-pressed', true );
125+
button.classList.add( 'active' );
126+
});
121127

122128
let styles = document.createElement( 'link' );
123129
styles.setAttribute( 'href', wpa11y.path );
@@ -128,59 +134,71 @@ let a11yToggle = document.querySelectorAll( '.a11y-toggle' );
128134

129135
function resetContrast() {
130136
body.classList.remove( 'contrast' );
131-
let button = toolbar.querySelector( '#is_high_contrast' );
132-
button.setAttribute( 'id', 'is_normal_contrast' );
133-
button.setAttribute( 'aria-pressed', false );
134-
button.classList.remove( 'active' );
137+
let buttons = document.querySelectorAll( '[data-id="is_high_contrast"]' );
138+
buttons.forEach( (button) => {
139+
button.setAttribute( 'data-id', 'is_normal_contrast' );
140+
button.setAttribute( 'aria-pressed', false );
141+
button.classList.remove( 'active' );
142+
});
135143
let styles = document.getElementById( 'highContrastStylesheet' );
136144
styles.remove();
137145
}
138146

139147
function largeFontSize() {
140148
html.classList.add( 'fontsize' );
141-
let button = toolbar.querySelector( '#is_normal_fontsize' );
142-
button.setAttribute( 'id', 'is_large_fontsize' );
143-
button.setAttribute( 'aria-pressed', true );
144-
button.classList.add( 'active' );
149+
let buttons = document.querySelectorAll( '[data-id="is_normal_fontsize"]' );
150+
buttons.forEach( (button) => {
151+
button.setAttribute( 'data-id', 'is_large_fontsize' );
152+
button.setAttribute( 'aria-pressed', true );
153+
button.classList.add( 'active' );
154+
});
145155
}
146156

147157
function resetFontSize() {
148158
html.classList.remove( 'fontsize' );
149-
let button = toolbar.querySelector( '#is_large_fontsize' );
150-
button.setAttribute( 'id', 'is_normal_fontsize' );
151-
button.setAttribute( 'aria-pressed', false );
152-
button.classList.remove( 'active' );
159+
let buttons = document.querySelectorAll( '[data-id="is_large_fontsize"]' );
160+
buttons.forEach( (button) => {
161+
button.setAttribute( 'data-id', 'is_normal_fontsize' );
162+
button.setAttribute( 'aria-pressed', false );
163+
button.classList.remove( 'active' );
164+
});
153165
}
154166

155-
const grayscaleButton = document.querySelector( '.toggle-grayscale' );
156-
const contrastButton = document.querySelector( '.toggle-contrast' );
157-
const fontsizeButton = document.querySelector( '.toggle-fontsize' );
167+
const grayscaleButton = document.querySelectorAll( '.toggle-grayscale' );
168+
const contrastButton = document.querySelectorAll( '.toggle-contrast' );
169+
const fontsizeButton = document.querySelectorAll( '.toggle-fontsize' );
158170

159171
if ( null !== grayscaleButton ) {
160-
grayscaleButton.addEventListener( 'click', function() {
161-
if ( this.getAttribute( 'id' ) === 'is_normal_color' ) {
162-
desaturate();
163-
} else {
164-
resaturate();
165-
}
166-
});
172+
grayscaleButton.forEach( (el) => {
173+
el.addEventListener( 'click', function() {
174+
if ( this.getAttribute( 'data-id' ) === 'is_normal_color' ) {
175+
desaturate();
176+
} else {
177+
resaturate();
178+
}
179+
});
180+
})
167181
}
168182
if ( null !== contrastButton ) {
169-
contrastButton.addEventListener( 'click', function() {
170-
if ( this.getAttribute( 'id' ) === 'is_normal_contrast' ) {
171-
addHighContrast();
172-
} else {
173-
resetContrast();
174-
}
183+
contrastButton.forEach( (el) => {
184+
el.addEventListener( 'click', function() {
185+
if ( this.getAttribute( 'data-id' ) === 'is_normal_contrast' ) {
186+
addHighContrast();
187+
} else {
188+
resetContrast();
189+
}
190+
});
175191
});
176192
}
177193
if ( null !== fontsizeButton ) {
178-
fontsizeButton.addEventListener( 'click', function() {
179-
if ( this.getAttribute( 'id' ) === 'is_normal_fontsize' ) {
180-
largeFontSize();
181-
} else {
182-
resetFontSize();
183-
}
194+
fontsizeButton.forEach( (el) => {
195+
el.addEventListener( 'click', function() {
196+
if ( this.getAttribute( 'data-id' ) === 'is_normal_fontsize' ) {
197+
largeFontSize();
198+
} else {
199+
resetFontSize();
200+
}
201+
});
184202
});
185203
}
186204

‎src/js/wpa-toolbar.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/wp-accessibility-toolbar.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -162,13 +162,13 @@ function wpa_toolbar_html( $type = 'widget', $control = 'button' ) {
162162
<div class="' . $responsive . ' ' . $is_rtl . ' ' . $is_reversed . ' ' . $toolbar_type . '">
163163
<ul>';
164164
if ( $enable_contrast ) {
165-
$toolbar .= '<li><' . $control_type . ' class="a11y-toggle a11y-toggle-contrast toggle-contrast" id="is_normal_contrast" aria-pressed="false"><span class="offscreen">' . $contrast . '</span> <span class="aticon aticon-adjust" aria-hidden="true"></span></' . $closure . '></li>';
165+
$toolbar .= '<li><' . $control_type . ' class="a11y-toggle a11y-toggle-contrast toggle-contrast" data-id="is_normal_contrast" aria-pressed="false"><span class="offscreen">' . $contrast . '</span> <span class="aticon aticon-adjust" aria-hidden="true"></span></' . $closure . '></li>';
166166
}
167167
if ( $enable_grayscale ) {
168-
$toolbar .= '<li><' . $control_type . ' class="a11y-toggle a11y-toggle-grayscale toggle-grayscale" id="is_normal_color" aria-pressed="false"><span class="offscreen">' . $grayscale . '</span> <span class="aticon aticon-tint" aria-hidden="true"></span></' . $closure . '></li>';
168+
$toolbar .= '<li><' . $control_type . ' class="a11y-toggle a11y-toggle-grayscale toggle-grayscale" data-id="is_normal_color" aria-pressed="false"><span class="offscreen">' . $grayscale . '</span> <span class="aticon aticon-tint" aria-hidden="true"></span></' . $closure . '></li>';
169169
}
170170
if ( $enable_fontsize ) {
171-
$toolbar .= '<li><' . $control_type . ' class="a11y-toggle a11y-toggle-fontsize toggle-fontsize" id="is_normal_fontsize" aria-pressed="false"><span class="offscreen">' . $fontsize . '</span> <span class="aticon aticon-font" aria-hidden="true"></span></' . $closure . '></li>';
171+
$toolbar .= '<li><' . $control_type . ' class="a11y-toggle a11y-toggle-fontsize toggle-fontsize" data-id="is_normal_fontsize" aria-pressed="false"><span class="offscreen">' . $fontsize . '</span> <span class="aticon aticon-font" aria-hidden="true"></span></' . $closure . '></li>';
172172
}
173173
$toolbar .= '
174174
</ul>

0 commit comments

Comments
 (0)