/* const temp = setInterval(() => { const btnWriteReview = document.querySelector(".jdgm-write-rev-link") const reviewFormRatingWrapper = document.querySelector(".jdgm-form__rating") const reviewFormRatingStars = document.querySelectorAll(".jdgm-form__rating .jdgm-star") const btnCancelReview = document.querySelector(".jdgm-cancel-rev") if (btnCancelReview) { btnCancelReview.onkeydown = (event) => { if (event.keyCode == 32 || event.key == " " || event.keyCode == 13) { if (btnWriteReview) { btnWriteReview.click() } const reviewWidgetTitle = document.querySelector(".jdgm-rev-widg__title") if (reviewWidgetTitle) { reviewWidgetTitle.setAttribute("tabindex", -1) reviewWidgetTitle.focus() } } } } if (reviewFormRatingWrapper) { reviewFormRatingWrapper.classList.remove("jdgm-form__rating") reviewFormRatingWrapper.classList.add("jdgm-form__rating2") } reviewFormRatingStars.forEach(star => { //star.setAttribute("tabindex", 0) //star.setAttribute("role", "button") star.onkeydown = (event) => { if (event.keyCode == 32 || event.key == " " || event.keyCode == 13) { star.click() } } }) if (btnWriteReview) { btnWriteReview.onkeydown = (event) => { if (event.keyCode == 32 || event.key == " " || event.keyCode == 13) { if (btnWriteReview.getAttribute("aria-expanded") == "false") { event.preventDefault() const reviewFormTitle = document.querySelector(".jdgm-form__title") if (reviewFormTitle) { btnWriteReview.click() reviewFormTitle.setAttribute("aria-label", reviewFormTitle.textContent + " form") reviewFormTitle.setAttribute("tabindex", -1) reviewFormTitle.focus() } } else { btnWriteReview.click() } } } } }, 500) */ window.addEventListener("load", (event) => { console.log("DOM fully loaded and parsed"); // start: CUSTOM SECTION where this will apply to all widgets const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; setInterval(function() { var closeButton = document.querySelector('.jm-mfp-close'); if (closeButton) { closeButton.setAttribute('title', 'close pop up') closeButton.setAttribute('aria-label', 'close pop up') } if (document.querySelector('.jm-mfp-review-wrapper') && document.querySelector('.jm-mfp-review-wrapper').firstElementChild != document.querySelector('.jdgm-rev')) { document.querySelector('.jm-mfp-review-wrapper').insertBefore(document.querySelector('.jdgm-rev'), document.querySelector('.jm-mfp-close')) } }, 2000); // end: custom section where this will apply to all widgets // start: if PREVIEW BADGE function fixPreviewBadgeAccessibility() { document.querySelectorAll('.jdgm-prev-badge__stars').forEach(function(el) { if (!el.hasAttribute('role') || el.getAttribute('role') !== 'button') { el.setAttribute('role', 'button'); } if (!el.hasAttribute('tabindex')) { el.setAttribute('tabindex', '0'); } var existingLabel = el.getAttribute('aria-label') || ''; if (existingLabel && !existingLabel.includes('go to reviews section')) { el.setAttribute('aria-label', existingLabel + ', go to reviews section'); } }); } if (document.querySelector('.jdgm-preview-badge')) { setTimeout(fixPreviewBadgeAccessibility, 1000); setInterval(fixPreviewBadgeAccessibility, 2000); } // end: if PREVIEW BADGE // start: if REVIEW CAROUSEL if (document.querySelector('.jdgm-carousel-wrapper')) { if (document.querySelector('.jdgm-carousel-number-of-reviews a')) { var x = 0; var intervalID = setInterval(function() { document.querySelector('.jdgm-carousel-number-of-reviews a').setAttribute('aria-label', `${document.querySelector('.jdgm-carousel-number-of-reviews a').innerText}, this link will open in a new window`); if (++x === 5) { window.clearInterval(intervalID); } }, 1000); } if (!jdgmSettings.featured_carousel_show_product) { document.querySelectorAll('.jdgm-carousel-item__product').forEach(el => { el.style.display = 'none'; }) } document.querySelectorAll('.jdgm-carousel-item__timestamp.jdgm-ellipsis').forEach(el => { el.setAttribute('role', 'text'); var event = new Date(el.getAttribute('data-time')); el.setAttribute('aria-label', `published on ${event.toLocaleDateString(undefined, options)}`); el.setAttribute('title', `published on ${event.toLocaleDateString(undefined, options)}`); }) document.querySelector(".jdgm-carousel-wrapper").setAttribute('aria-label', 'carousel'); document.querySelector(".jdgm-carousel-wrapper").setAttribute('role', 'region'); // start: change arrow from div to button var newLeftArrow = document.createElement('span'); var newRightArrow = document.createElement('span'); document.querySelector('.jdgm-carousel__left-arrow').replaceWith(newLeftArrow); document.querySelector('.jdgm-carousel__right-arrow').replaceWith(newRightArrow); newLeftArrow.classList.add('jdgm-carousel__left-arrow'); newRightArrow.classList.add('jdgm-carousel__right-arrow'); newLeftArrow.setAttribute('tabindex', '0'); newLeftArrow.setAttribute('role', 'button'); newLeftArrow.setAttribute('aria-label', 'previous'); newRightArrow.setAttribute('aria-label', 'next'); newRightArrow.setAttribute('tabindex', '0'); newRightArrow.setAttribute('role', 'button'); // end: change arrow from div to button //start: change review card to alert pop up(happens for carousel Gallery theme) document.querySelectorAll('.jdgm-carousel-item__full-review-link').forEach(el => { el.removeAttribute('role'); el.setAttribute('aria-label', 'this link will open review pop up') }) //end: change review card to alert pop up(happens for carousel Gallery theme) setInterval(function() { if (document.querySelectorAll('.jdgm-verified-by-judgeme').length > 1) { document.querySelectorAll('.jdgm-verified-by-judgeme')[0].style.display = 'none'; } // start: set alt attribute for carousel images to be more meaningful document.querySelectorAll('.jdgm-full-rev').forEach(el => { el.querySelector('.jdgm-full-rev__pic-link').setAttribute('aria-label', `user's picture about product ${el.getAttribute('data-product-title')}`) }) //end: set alt attribute for carousel images to be more meaningful document.querySelectorAll('.jdgm-carousel-item').forEach((el, index) => { el.setAttribute('role', 'group'); el.setAttribute('tabindex', '0'); el.setAttribute('aria-label', `slide ${index+1} of ${document.querySelector('.jdgm-carousel__item-wrapper').childElementCount}`); var observer = new IntersectionObserver(function(entries) { if (entries[0].isIntersecting === true) { el.setAttribute('aria-hidden', 'false'); } else el.setAttribute('aria-hidden', 'true'); }, { threshold: [0.25] }); observer.observe(el); }) }, 700); setTimeout(function() { jdgm.initializeCarousel() }, 2000); } // end: if REVIEW CAROUSEL // start: if REVIEW WIDGET if (document.querySelector('#judgeme_product_reviews')) { // in case they have more than one widget then the rest of this code might not work, so we will remove one if (document.querySelectorAll('.jdgm-widget.jdgm-review-widget').length > 1) { document.querySelectorAll('.jdgm-widget.jdgm-review-widget')[0].remove(); } var getWidgetHeader = document.querySelector('.jdgm-rev-widg__title'); if (getWidgetHeader) { getWidgetHeader.setAttribute('role', 'text'); getWidgetHeader.setAttribute('tabindex', '0'); } var actionsWrapper = document.querySelector('.jdgm-widget-actions-wrapper'); var histogram = document.querySelector('.jdgm-histogram.jdgm-temp-hidden'); // Make sure both elements exist and share the same parent if (actionsWrapper && histogram && actionsWrapper.parentNode) { // If they already share the same parent, this will work directly actionsWrapper.parentNode.insertBefore(histogram, actionsWrapper); } if (document.querySelector('.jdgm-rev__prod-link')) { document.querySelector('.jdgm-rev__prod-link').setAttribute('aria-label', `${document.querySelector('.jdgm-rev__prod-link').innerText}, this link opens in a new window.`) } var parentNode = document.querySelector('.jdgm-rev-widg__summary-inner'); var replaceNode = document.querySelector('.jdgm-rev-widg__summary-text'); var focusElement = document.querySelector('.jdgm-rev-widg__summary-average') if (parentNode && replaceNode && focusElement) { parentNode.insertBefore(focusElement, replaceNode); parentNode.setAttribute('style', 'text-align: center;') } document.querySelector('.jdgm-histogram__clear-filter').setAttribute('role', 'button'); document.querySelector('.jdgm-histogram__clear-filter').addEventListener('keydown', function(e) { if (e.key === 'Enter') { setTimeout(() => { var label = document.querySelector('.jdgm-rev-widg__sort-wrapper label'); var dropdown = document.querySelectorAll('.jdgm-sort-dropdown')[1]; dropdown.setAttribute('tabindex', '0') label.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" }); dropdown.focus() }, 1000); } }) // start: make the histogram focus to review section after interation document.querySelectorAll('.jdgm-histogram__row').forEach(el => { if (el.getAttribute('data-frequency') === '0') { el.setAttribute('aria-hidden', 'true') el.style = "pointer-events: none;" el.querySelector('.jdgm-histogram__star').removeAttribute('tabindex') } }) setTimeout(function() { if (document.querySelector('.jdgm-histogram__star')) { document.querySelectorAll('.jdgm-histogram__star').forEach(el => { el.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setTimeout(function() { document.querySelector('.jdgm-rev-widg__sort-wrapper label').scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" }); document.querySelector('.jdgm-rev-widg__reviews').setAttribute('tabindex', '0'); document.querySelector('.jdgm-rev-widg__reviews').focus() console.log('shift focus on review section 1') }, 2000); } }) }) } else { console.log('stars not found') } }, 1000); setTimeout(function() { const stars = document.querySelectorAll('.jdgm-histogram__star'); if (stars.length > 0) { stars.forEach(el => { el.addEventListener('keyup', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setTimeout(function() { var label = document.querySelector('.jdgm-rev-widg__sort-wrapper label'); var reviews = document.querySelector('.jdgm-rev-widg__reviews'); if (label && reviews) { label.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" }); reviews.setAttribute('tabindex', '0'); reviews.focus(); console.log('shift focus on review section 2'); } else { console.log('Review label or reviews section not found'); } }, 2000); } }); }); } else { console.log('stars not found'); } }, 1000); //end: make the histogram focus to review section after interation // start: make keyword chips accessible if (document.querySelector('.jdgm-chip')) { document.querySelector('.jdgm-keywords').setAttribute('role', 'tablist') var spans = document.querySelectorAll('.jdgm-chip'); var newChips = []; spans.forEach(span => { var buttonChip = document.createElement('button'); Array.from(span.attributes).forEach((attr, index) => { buttonChip.setAttribute(attr.name, attr.value); }); buttonChip.setAttribute('role', 'button'); buttonChip.setAttribute('tabindex', '0'); buttonChip.innerHTML = span.innerHTML; span.parentNode.replaceChild(buttonChip, span); newChips.push(buttonChip); }); newChips.forEach((chip, index) => { chip.addEventListener('keydown', (e) => { const total = newChips.length; if (e.key === 'ArrowRight') { e.preventDefault(); const nextIndex = (index + 1) % total; newChips[nextIndex].focus(); } if (e.key === 'ArrowLeft') { e.preventDefault(); const prevIndex = (index - 1 + total) % total; newChips[prevIndex].focus(); } if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); chip.click(); } }); }); setInterval(function() { document.querySelectorAll('.jdgm-chip').forEach(el => { if (el.classList.contains('active')) { el.setAttribute('aria-label', `Unfiltter reviews with keyword: ${el.getAttribute('data-text')}`) el.setAttribute('aria-selected', true) } else { el.setAttribute('aria-label', `Filtter reviews with keyword: ${el.getAttribute('data-text')}`) el.setAttribute('aria-selected', false) } }) }, 1000); } // end: make keyword chips accessible // start: add aria-label to social media share buttons document.querySelectorAll('.jdgm-rev__share-btn').forEach(el => { el.setAttribute('aria-label', `${jdgmSettings.reply_name} ${el.getAttribute('data-social-media')}, this link will open a new tab`) }) // end: add aria-label to social media share buttons // **** start: to trigger Voice over to pick up the first missing required input **** if (!jdgmSettings.disable_web_reviews) { var added = true; document.querySelector('.jdgm-write-rev-link').addEventListener('click', function() { setTimeout(function() { document.querySelectorAll('.jdgm-form__rating a').forEach(el => { //el.removeAttribute('aria-label'); //el.setAttribute('aria-label', `select ${el.getAttribute('title')} rating`); //el.setAttribute('role', 'button') }) //for widget 2.0 document.querySelectorAll('.jdgm-form div p a').forEach(el => { el.setAttribute('aria-label', `${el.innerText}, this link will open a new tab`); }) }, 500); if (added) { document.querySelectorAll('.jdgm-form__fieldset').forEach(el => { if (el.querySelector('.jdgm-form__rating') || el.querySelector('textarea') || el.querySelector('input[name="reviewer_name"]') || el.querySelector('input[name="reviewer_email"]') ) { el.querySelector('label').innerText = el.querySelector('label').innerText + ' (required)'; } }) added = false; } document.querySelector('.jdgm-form').addEventListener('submit', function() { console.log('form submitted') setTimeout(function() { var getChildren = Array.from(document.querySelector('.jdgm-form').children); getChildren.forEach(el => { if (el.querySelector('.jdgm-input-error')) { if (el.querySelector('.jdgm-input-error').checkVisibility() || el.querySelector('.jdgm-input-error').nodeName === 'INPUT') { el.children[0].classList.add('required-text-ada'); el.setAttribute('aria-label', `${el.children[0].innerText}, This field is required`); } else { el.children[0].classList.remove('required-text-ada'); el.setAttribute('aria-label', el.children[0].innerText); } } }) for (let index = 0; index < getChildren.length; index++) { if (getChildren[index].querySelector('.jdgm-input-error')) { getChildren[index].focus() console.log('focus'); break; } } }, 200); }) }) } // **** end: to trigger Voice over to pick up the first missing required input **** const revWid = document.querySelectorAll('.jdgm-widget'); revWid.forEach(el => { // **** start: to trigger Voice over to pick up the review submitted message **** el.addEventListener('submit', function(event) { const target = event.target; setTimeout(() => { if (target.tagName === 'FORM') { const focusElement = el.querySelector('.jdgm-notification'); if (focusElement) { document.querySelector('.jdgm-rev-widg').appendChild(focusElement); var parentNode = document.querySelector('.jdgm-rev-widg'); var replaceNode = document.querySelector('.jdgm-rev-widg__body'); parentNode.insertBefore(focusElement, replaceNode); focusElement.setAttribute('role', 'status'); focusElement.setAttribute('tabindex', '-1'); focusElement.setAttribute('aria-live', 'polite'); focusElement.focus(); focusElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" }); setTimeout(function() { document.querySelector('.jdgm-notification a').setAttribute('aria-label', 'Judge.me, this link will open in a new tab.'); focusElement.removeAttribute('role'); focusElement.removeAttribute('aria-live'); }, 400); } } const getTheReviewJustCreatedNow = document.querySelector('.jdgm-rev__rating'); getTheReviewJustCreatedNow.setAttribute('tabindex', '0') getTheReviewJustCreatedNow.setAttribute('aria-label', `${getTheReviewJustCreatedNow.getAttribute('data-score')} stars review`); getTheReviewJustCreatedNow.setAttribute('role', 'img'); }, 1000) }); // **** end: to trigger Voice over to pick up the review submitted message **** // **** start: to check whenever we actually click/change the filter **** var checkIfClicked = false; if (document.querySelector('.jdgm-row-actions .jdgm-sort-dropdown')) { document.querySelector('.jdgm-row-actions .jdgm-sort-dropdown').addEventListener('change', function() { checkIfClicked = true; console.log('click filter'); }); } // **** end: to check whenever we actually click/change the filter **** // **** start: to trigger Voice over to pick up the new review filter **** el.addEventListener('change', function(event) { const target = event.target; setTimeout(() => { if (checkIfClicked == true) { checkIfClicked = false; const focusElement = el.querySelector('.jdgm-rev-widg__reviews'); if (focusElement) { console.log('filter true'); getWidgetHeader.blur(); document.querySelector('.jdgm-rev-widg').blur(); document.querySelector('#judgeme_product_reviews').blur(); getWidgetHeader.removeAttribute('role'); getWidgetHeader.removeAttribute('tabindex'); focusElement.setAttribute('role', 'text'); focusElement.setAttribute('tabindex', '0'); focusElement.setAttribute('aria-live', 'polite'); convertReviewDate(); changeAltForReviewImages() var filterselected = document.getElementsByClassName("jdgm-row-actions jdgm-sort-dropdown")[0]; focusElement.setAttribute('aria-label', `reviews sorted by ${filterselected.selectedOptions[0].innerText}`); focusElement.focus(); } } }, 500) }); // **** end: to trigger Voice over to pick up the new review filter **** // start: to focus the first row of the review form after clicking the write review button if (!jdgmSettings.disable_web_reviews) { var getReviewButton = document.querySelector('.jdgm-write-rev-link'); getReviewButton.setAttribute('role', 'button'); getReviewButton.addEventListener('click', function() { var getReviewFormTitle = document.querySelector('.jdgm-form-wrapper > .jdgm-form > .jdgm-form__title'); getReviewFormTitle.setAttribute('role', 'text'); getReviewFormTitle.setAttribute('aria-live', 'polite'); getReviewFormTitle.setAttribute('tabindex', '-1'); var div = document.createElement('div'); div.classList.add('jdgm-no-dup'); if (!document.querySelector('.jdgm-form__fieldset-actions').querySelector('.jdgm-no-dup')) { document.querySelector('.jdgm-form__fieldset-actions').insertBefore(div, document.querySelector('.jdgm-form__fieldset-actions').childNodes[2]); document.querySelector('.jdgm-no-dup').appendChild(document.querySelector('.jdgm-submit-rev')) } getReviewFormTitle.focus(); setTimeout(function() { document.querySelector('input[name="review_title"]').blur(); }, 10); if (document.querySelector('.jdgm-form__rating')) { document.querySelector('.jdgm-form__rating').childNodes.forEach(el => { setInterval(function() { el.addEventListener('click', function() { setTimeout(function() { document.querySelector('input[name="review_title"]').blur(); }, 10); }) }, 500); }) } document.querySelectorAll('div.jdgm-form__title').forEach((el) => { const h3 = document.createElement('h3'); for (const attr of el.attributes) h3.setAttribute(attr.name, attr.value); while (el.firstChild) h3.appendChild(el.firstChild); el.replaceWith(h3); }); }) } if (jdgmSettings.enable_question_anwser) { document.querySelector('.jdgm-ask-question-btn').addEventListener('click', function() { document.querySelector('.jdgm-question-form-wrapper > .jdgm-form__title').focus(); setTimeout(function() { document.querySelector('#jdgm_question_reviewer_name').blur(); }, 10); }) } // end: to focus the first row of the review form after clicking the write review button // **** start: change alt name for review images to be more descriptive function fixReviewImageAccessibility() { document.querySelectorAll('.jdgm-rev').forEach(function(review) { var authorEl = review.querySelector('.jdgm-rev__author'); var authorName = authorEl ? authorEl.innerText.trim() : 'customer'; review.querySelectorAll('.jdgm-rev__pic-link').forEach(function(link, index) { var img = link.querySelector('.jdgm-rev__pic-img'); if (img) { img.setAttribute('alt', ''); } link.setAttribute('aria-label', 'View customer review photo ' + (index + 1) + ' by ' + authorName); }); }); } setTimeout(fixReviewImageAccessibility, 1500); setInterval(fixReviewImageAccessibility, 2000); // end: change alt name for review images to be more descriptive // **** start: set aria-current for the current page of review function setAriaCurrentAttr() { document.querySelectorAll('.jdgm-paginate__page').forEach(function(el) { el.removeAttribute('aria-current'); }); var currentPage = document.querySelector('.jdgm-paginate__page.jdgm-curt'); if (currentPage) { currentPage.setAttribute('aria-current', 'page'); } } setInterval(function() { setAriaCurrentAttr() }, 2000); // end: set aria-current for the current page of review // **** start: to add focus event to review widget after clicking the pagination **** setInterval(() => { if (document.querySelector('.jdgm-paginate__page.jdgm-paginate__first-page')) { document.querySelector('.jdgm-paginate__first-page').setAttribute('aria-label', 'First page') } if (document.querySelector('.jdgm-paginate__page.jdgm-paginate__last-page')) { document.querySelector('.jdgm-paginate__last-page').setAttribute('aria-label', 'Last page') } }, 2000); function focusReviewBack() { console.log('pagination clicked!'); setTimeout(() => { const focusElement = el.querySelector('.jdgm-rev-widg__reviews'); if (focusElement) { console.log('page true'); setTimeout(function() { if (document.querySelector('#label_for_new_reviews')) { document.querySelector('#label_for_new_reviews').remove() } //focusElement.blur(); var countCurrentReviews = document.querySelector('.jdgm-rev-widg__reviews').childNodes.length; var display_label = document.createElement('label'); display_label.innerText = `Displaying ${countCurrentReviews} new reviews` document.querySelector('.jdgm-rev-widg').insertBefore(display_label, document.querySelector('.jdgm-rev-widg__body')) display_label.setAttribute('role', 'text'); display_label.setAttribute('tabindex', '0'); display_label.id = 'label_for_new_reviews'; display_label.focus(); console.log('focus label') setTimeout(function() { //focusElement.blur() //console.log('blur') }, 300) }, 1000) /* getWidgetHeader.blur(); document.querySelector('.jdgm-rev-widg').blur(); document.querySelector('#judgeme_product_reviews').blur(); getWidgetHeader.removeAttribute('role'); getWidgetHeader.removeAttribute('tabindex'); focusElement.setAttribute('role', 'text'); focusElement.setAttribute('tabindex', '0'); focusElement.setAttribute('aria-live', 'polite'); setTimeout(function() { focusElement.blur(); }, 500) */ //setTimeout(function() { //getWidgetHeader.setAttribute('role', 'text'); //getWidgetHeader.setAttribute('tabindex', '2'); //}, 5000); convertReviewDate(); changeAltForReviewImages(); setAriaCurrentAttr(); } }, 1000) } setInterval(function() { document.querySelectorAll('.jdgm-paginate__page').forEach(ele => { ele.removeEventListener('click', function() { focusReviewBack() }); ele.addEventListener('click', function() { focusReviewBack() }); }) }, 2000); // **** end: to add focus event to review widget after clicking the pagination **** }) // **** start: to add focus event to review widget after clicking the badge **** var getStarRating = document.querySelector('.jdgm-preview-badge'); if (getStarRating) { //getStarRating.removeAttribute('role'); //getStarRating.setAttribute('href', '#judgeme_product_reviews'); //var newElement = $('.jdgm-prev-badge__stars').get(0).outerHTML.replace(/^$/, ""); // need jquery cdn in //$('.jdgm-prev-badge__stars').replaceWith(newElement); document.querySelectorAll('.jdgm-preview-badge').forEach(el => { el.addEventListener('click', function() { document.querySelector('.jdgm-rev-widg__title').setAttribute('role', 'text'); document.querySelector('.jdgm-rev-widg__title').setAttribute('tabindex', '0'); setTimeout(() => { document.querySelector('.jdgm-rev-widg__title').focus(); }, 200); }) }) } // **** end: to add focus event to review widget after clicking the badge **** // **** start: to make Voice over read the review date literarily **** function convertReviewDate() { document.querySelectorAll('.jdgm-rev__timestamp').forEach(el => { if (!el.querySelector('.visually-hidden')) { el.innerHTML = ` ${el.innerText}`; } }) } convertReviewDate() // **** end: to make Voice over read the review date literarily **** // **** start: to make Voice over read the limitation of characters input for review title and body(this is crazy hard, just for the VoiceOver to read as "XYZ characters") **** setTimeout(function() { if (document.querySelector('.jdgm-form-wrapper')) { // select the target node var parentNode1 = document.querySelectorAll('.jdgm-form-wrapper > .jdgm-form > .jdgm-form__fieldset')[1]; // title for widget 3.0, remmeber to change this for 2.1 version var replaceNode1 = document.querySelectorAll('.jdgm-countdown')[0]; var newNode1 = document.createElement('div'); newNode1.id = "new-counter-1"; //parentNode1.insertBefore(newNode1, replaceNode1); var parentNode2 = document.querySelectorAll('.jdgm-form-wrapper > .jdgm-form > .jdgm-form__fieldset')[2]; //body for widget 3.0, remmeber to change this for 2.1 version var replaceNode2 = document.querySelectorAll('.jdgm-countdown')[1]; var newNode2 = document.createElement('div'); newNode2.id = "new-counter-2"; //parentNode2.insertBefore(newNode2, replaceNode2); // fresh select the target node, it won't work if you assign target1 as newNode1 var target1 = document.querySelectorAll('.jdgm-countdown')[0]; var target2 = document.querySelectorAll('.jdgm-countdown')[1]; // create an observer instance var observer1 = new MutationObserver(function(mutations) { // mutations.forEach(function(mutation) { newNode1.setAttribute('aria-label', `${replaceNode1.innerText.replace(/[^0-9]/g,"")} characters`); newNode1.innerHTML = ``; // }); }); var observer2 = new MutationObserver(function(mutations) { // mutations.forEach(function(mutation) { newNode2.setAttribute('aria-label', `${replaceNode2.innerText.replace(/[^0-9]/g,"")} characters`); newNode2.innerHTML = ``; // }); }); // configuration of the observer: var config1 = { childList: true }; // ,subtree: true, characterData: true var config2 = { childList: true }; // ,subtree: true, characterData: true // pass in the target node, as well as the observer options observer1.observe(target1, config1); observer2.observe(target2, config2); } }, 1000); // **** end: to make Voice over read the limitation of characters input for review title and body **** // start: add labell to thump up and down buttons if (jdgmSettings.widget_thumb) { document.querySelectorAll('.jdgm-rev_thumb-up').forEach(el => { el.setAttribute('aria-label', 'thumb up') el.setAttribute('role', 'button') }) document.querySelectorAll('.jdgm-rev_thumb-down').forEach(el => { el.setAttribute('aria-label', 'thumb down') el.setAttribute('role', 'button') }) } // end: add labell to thump up and down buttons // start: set alt attribute for review widget carousel theme images to be more meaningful if (document.querySelector('.jdgm-rev__pic-link')) { document.querySelectorAll('.jdgm-rev').forEach(el => { if (el.querySelector('.jdgm-rev__pic-link')) { el.querySelector('.jdgm-rev__pic-link').setAttribute('aria-label', `user's picture about product ${el.getAttribute('data-product-title')}`) } }) } document.querySelectorAll('.jdgm-gallery__thumbnail').forEach(el => { el.setAttribute('alt', `thumbnail of the review image for item ${document.querySelector('#judgeme_product_reviews').getAttribute('data-product-title')}`) }) // end: set alt attribute for review widget carousel theme images to be more meaningful // start: add aria-laebl for medals, privacy links document.querySelectorAll('.jdgm-medal, .jdgm-link, .jdgm-form__fieldset > p > a').forEach(el => { el.setAttribute('aria-label', `${el.innerText}, this link will open a new tab`); }) // end: add aria-laebl for medals, privacy links // start: make review title input focusable after trigger write a review button const focusReviewTitleInput = setInterval(focusReviewTitleInputInterval, 1000); function focusReviewTitleInputInterval() { if (document.querySelectorAll('.jdgm-form__fieldset .jdgm-sort-dropdown')[0]) { document.querySelectorAll('.jdgm-form__fieldset .jdgm-sort-dropdown').forEach(el => { el.setAttribute('tabindex', '0'); for (let index = 0; index < el.children.length; index++) { el.children[index].setAttribute('tabindex', '0') } }) } if (document.querySelector('.jdgm-form__fieldset')) { document.querySelector('.jdgm-form__fieldset').setAttribute('tabindex', '0'); document.querySelector(`.jdgm-form__fieldset[aria-label=${jdgmSettings.widget_rating_field_text}] label`).id = 'rating-label'; var parentNode = document.querySelector('.jdgm-form'); var replaceNode = document.querySelectorAll('.jdgm-form__fieldset')[0]; var newNode = document.querySelectorAll('.jdgm-form__fieldset')[1]; parentNode.insertBefore(newNode, replaceNode); if (document.querySelector('.jdgm-form__rating')) { var formRating = document.querySelector('.jdgm-form__rating'); formRating.setAttribute('role', 'radiogroup') formRating.setAttribute('aria-labelledby', 'rating-label') var checkStar = true; formRating.childNodes.forEach((el, index) => { if (el.tagName !== 'INPUT') { el.setAttribute('role', 'radio') el.setAttribute('aria-checked', 'false') if (index != 0) { el.setAttribute('tabindex', '-1'); } else { el.setAttribute('tabindex', '0'); } } else { el.id = 'star-rating-value' } }) setInterval(function() { document.querySelector('.jdgm-form__rating').childNodes.forEach(el => { if (el.tagName !== 'INPUT') { el.setAttribute('role', 'radio') if (el.classList.contains('jdgm--off')) { el.setAttribute('aria-checked', 'false') } else { el.setAttribute('aria-checked', 'true') } } }) }, 100); if (checkStar) { setInterval(function() { checkStar = false; formRating.childNodes.forEach((el, index) => { el.addEventListener('keydown', function(event) { event.preventDefault(); if (event.keyCode === 13) { el.click() for (let pos = 0; pos <= 4; pos++) { if (pos <= index) { formRating.childNodes[pos].setAttribute('aria-checked', 'true') } else { formRating.childNodes[pos].setAttribute('aria-checked', 'false') } } document.querySelector('.jdgm-form__fieldset textarea').focus() checkStar = true } }) }) }, 1000); } } document.querySelectorAll('.jdgm-form__fieldset')[2].addEventListener('keyup', function() { document.querySelector('.jdgm-form__rating').childNodes[4].setAttribute('tabindex', '0'); //document.querySelector('.jdgm-form__rating').childNodes[4].setAttribute('aria-checked', 'false'); }) document.querySelectorAll('.jdgm-form__fieldset')[0].addEventListener('keyup', function() { document.querySelector('.jdgm-form__rating').childNodes[0].setAttribute('tabindex', '0'); //document.querySelector('.jdgm-form__rating').childNodes[0].setAttribute('aria-checked', 'false'); }) clearInterval(focusReviewTitleInput); } } // end: make review title input focusable after trigger write a review button } // end: if REVIEW WIDGET // start: if UGC WIDGET if (document.querySelector('.jdgm-ugc-media-wrapper')) { // start: set alt attribute for every UGC thumbnail to be more meaningful setInterval(function() { document.querySelectorAll('.jdgm-ugc-media__thumbnail').forEach(el => { el.setAttribute('alt', `Customer's Instagram post`) }) }, 2000); // end: set alt attribute for every UGC thumbnail to be more meaningful // start: replace from div to button for the parrent wrapper of jdgm-ugc-media__thumbnail so screen reader can clearly announce its purpose and functionality (function() { function replaceThumbnailWrappers() { var wrappers = document.querySelectorAll('div.jdgm-ugc-media__thumbnail-wrapper'); wrappers.forEach(function(wrapper) { var button = document.createElement('button'); // Copy attributes from the original div Array.prototype.slice.call(wrapper.attributes).forEach(function(attr) { button.setAttribute(attr.name, attr.value); }); // Preserve child elements while (wrapper.firstChild) { button.appendChild(wrapper.firstChild); } // Recommended for buttons used as clickable wrappers button.setAttribute('type', 'button'); // Replace div with button wrapper.parentNode.replaceChild(button, wrapper); }); } // Run once when the page is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', replaceThumbnailWrappers); } else { replaceThumbnailWrappers(); } // Run again if Judge.me loads the UGC media dynamically var observer = new MutationObserver(function() { replaceThumbnailWrappers(); }); observer.observe(document.body, { childList: true, subtree: true }); })(); // end: replace from div to button for the parrent wrapper of jdgm-ugc-media__thumbnail so screen reader can clearly announce its purpose and functionality document.querySelector('.jdgm-ugc-media').addEventListener('click', function() { setTimeout(function() { document.querySelector('.jdgm-gallery').blur() document.querySelectorAll('.jdgm-gallery__thumbnail').forEach(el => { el.blur(); el.removeAttribute('alt'); }) var instaPic = document.querySelector('.jm-mfp-img') if (instaPic) { instaPic.setAttribute('alt', `Instagram's image from user ${document.querySelector('.jdgm-rev__author').innerText.replace('@','')}`) instaPic.focus() } var instaVid = document.querySelector('.jm-mfp-iframe') if (instaVid) { instaVid.setAttribute('alt', `Instagram's video from user ${document.querySelector('.jdgm-rev__author').innerText.replace('@','')}`) instaVid.focus() } setTimeout(function() { document.querySelectorAll('.jdgm-gallery__thumbnail').forEach(el => { if (el.getAttribute('data-media-type') == 'image') { el.setAttribute('alt', 'Thumbnail of the Instagram image'); } else { el.setAttribute('alt', 'Thumbnail of the Instagram video'); } }) }, 2000); var closeButton = document.querySelector('.jm-mfp-close'); closeButton.addEventListener('click', function() { document.querySelector('.jdgm-ugc-media').setAttribute('tabindex', '0'); document.querySelector('.jdgm-ugc-media').focus(); }) }, 100); }) } // end: if UGC WIDGET // start: if video carousel if (document.querySelector('.jdgm-videos-carousel')) { document.querySelectorAll('.jdgm-arrow')[0].setAttribute('aria-label', 'previous'); document.querySelectorAll('.jdgm-arrow')[1].setAttribute('aria-label', 'next'); document.querySelectorAll('.jdgm-video-card iframe').forEach(el => { el.setAttribute('title', `User's video`) }) document.querySelectorAll('.jdgm-photo-card img').forEach(el => { el.setAttribute('alt', `User's picture`) }) } // end: if video carousel // start: if review snippet widget if (document.querySelector('.jdgm-review-snippet-wrapper')) { document.querySelectorAll('.jdgm-rev-snippet-widget__prev-btn, .jdgm-rev-snippet-widget__next-btn').forEach((btn) => { btn.setAttribute('role', 'button'); btn.setAttribute('tabindex', '0'); btn.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); btn.click(); } }); }); (function() { const cardsContainer = document.querySelector('.jdgm-rev-snippet-widget__cards-container'); if (!cardsContainer) return; const sliderRoot = cardsContainer.parentElement; let observer = null; function setCardVisibility(card, isVisible) { card.setAttribute('aria-hidden', isVisible ? 'false' : 'true'); const focusables = card.querySelectorAll('a, button, [tabindex]'); focusables.forEach((el) => { el.setAttribute('tabindex', isVisible ? '0' : '-1'); }); } function observeCards() { if (observer) observer.disconnect(); observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { setCardVisibility(entry.target, entry.intersectionRatio >= 0.6); }); }, { root: sliderRoot, threshold: [0, 0.6, 1], } ); cardsContainer.querySelectorAll('.jdgm-rev-snippet-card').forEach((card) => { observer.observe(card); }); } observeCards(); setInterval(observeCards, 5000); })(); } // end: if review snippet widget if (document.querySelector('.jdgm-all-reviews-widget')) { var countLoadMore = 1; document.querySelector('.jdgm-all-reviews-page__load-more').addEventListener('click', function() { setTimeout(function() { document.querySelectorAll('.jdgm-rev')[countLoadMore * 25].setAttribute('tabindex', '0'); document.querySelectorAll('.jdgm-rev')[countLoadMore * 25].focus(); countLoadMore += 1; console.log('focused'); }, 2000); }) } }); const altInterval = setInterval(() => { document.querySelectorAll('.jm-mfp-img').forEach(img => { if (!img.hasAttribute('alt') || img.getAttribute('alt').trim() === '') { img.setAttribute('alt', 'User picture'); } }); }, 1000); (function() { var ANNOUNCE_MODE = 'busy'; var DEBOUNCE_MS = 250; function debounce(fn, ms) { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn.apply(null, a), ms); }; } function getLiveRegion() { var el = document.getElementById('jdgm-live-typing-status'); if (!el) { el = document.createElement('div'); el.id = 'jdgm-live-typing-status'; el.setAttribute('aria-live', 'polite'); el.setAttribute('aria-atomic', 'true'); Object.assign(el.style, { position: 'absolute', left: '-9999px', width: '1px', height: '1px', overflow: 'hidden' }); document.body.appendChild(el); } return el; } function enhanceInput(input, index) { input.setAttribute('role', 'searchbox'); if (!input.getAttribute('aria-label') && !document.querySelector('label[for="' + input.id + '"]')) { input.setAttribute('aria-label', 'Search reviews'); } var hintId = 'jdgm-search-hint-' + (input.id || index); if (!document.getElementById(hintId)) { var hint = document.createElement('div'); hint.id = hintId; hint.textContent = 'Type to search reviews.'; Object.assign(hint.style, { position: 'absolute', left: '-9999px' }); document.body.appendChild(hint); } var describedby = (input.getAttribute('aria-describedby') || '').trim(); if (!describedby.split(/\s+/).includes(hintId)) { input.setAttribute('aria-describedby', (describedby + ' ' + hintId).trim()); } var live = getLiveRegion(); var lastMsg = ''; var announce = debounce(function() { var v = (input.value || '').trim(); var msg = v.length === 0 ? 'Search field cleared.' : (ANNOUNCE_MODE === 'echo' ? ('Typing: ' + v) : 'Searching…'); if (msg === lastMsg) { live.textContent = ''; setTimeout(function() { live.textContent = msg; }, 10); } else { live.textContent = msg; } lastMsg = msg; }, DEBOUNCE_MS); input.addEventListener('input', announce, { passive: true }); } function initAll() { document.querySelectorAll('.jdgm-review-search').forEach(enhanceInput); } initAll(); var mo = new MutationObserver(function(muts) { for (var m of muts) { if (m.type === 'childList') { if ([...m.addedNodes].some(n => n.nodeType === 1 && (n.matches?.('.jdgm-review-search') || n.querySelector?.('.jdgm-review-search')))) { initAll(); } } if (m.type === 'attributes' && m.target.matches?.('.jdgm-review-search')) { enhanceInput(m.target); } } }); mo.observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] }); })(); /** * Judge.me UGC Media Grid — ADA Accessibility Fixes * Added on 4th March 2025 */ (function() { if (!document.querySelector('.jdgm-ugc-media-wrapper')) return; /* Fix A: More Descriptive Image Alt Text */ function fixImageAltText() { var thumbnails = document.querySelectorAll('img.jdgm-ugc-media__thumbnail'); if (!thumbnails.length) return; thumbnails.forEach(function(img, i) { var link = img.closest('.jdgm-ugc-media__thumbnail-link'); var mediaType = link ? (link.getAttribute('data-media-type') || '') : ''; var alt = 'Customer Instagram post image ' + (i + 1); if (mediaType.toLowerCase() === 'video') { alt = 'Customer Instagram video thumbnail ' + (i + 1); } else if (mediaType.toLowerCase() === 'carousel_album') { alt = 'Customer Instagram album image ' + (i + 1); } img.setAttribute('alt', alt); }); } /* Fix B: Inaccessible Popup Behavior — add dialog semantics & restore focus on close */ var prevFocus = null; new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(n) { if (n.nodeType !== 1) return; if (n.classList && n.classList.contains('jm-mfp-wrap')) { prevFocus = document.activeElement; n.setAttribute('role', 'dialog'); n.setAttribute('aria-modal', 'true'); n.setAttribute('aria-label', 'Instagram post details'); var close = n.querySelector('.jm-mfp-close'); if (close) { close.setAttribute('aria-label', 'Close popup'); close.focus(); } } }); m.removedNodes.forEach(function(n) { if (n.nodeType !== 1) return; if (n.classList && n.classList.contains('jm-mfp-wrap') && prevFocus) { prevFocus.focus(); prevFocus = null; } }); }); fixNewTabLinks(); fixImageAltText(); }).observe(document.body, { childList: true, subtree: true }); /* Fix C: Links Opening in a New Tab Without Warning */ function fixNewTabLinks() { var links = document.querySelectorAll( '.jdgm-ugc-media__primary-btn, .jdgm-ugc-media__secondary-btn, .jdgm-ugc-media__reviews-btn' ); if (!links.length) return; links.forEach(function(link) { if (link.getAttribute('data-ada-fixed')) return; var text = link.textContent.trim(); link.setAttribute('aria-label', text + ' (opens in a new tab)'); link.setAttribute('data-ada-fixed', 'true'); }); } setTimeout(function() { fixImageAltText(); fixNewTabLinks(); }, 1000); })(); window.addEventListener("load", (event) => { setTimeout(() => { var inputElement = document.querySelectorAll('.jdgm-ugc-media__thumbnail-link'); inputElement.forEach(el => { el.setAttribute('tabindex', '0') el.addEventListener('keydown', function(event) { console.log(`Key pressed on the element: ${event.key}`); if (event.key === 'Enter') { el.click(); } }); }) }, 2000); });