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 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}`); //document.querySelectorAll('.jdgm-carousel-item__review-body')[index].setAttribute('role', 'text'); //document.querySelectorAll('.jdgm-carousel-item__review-body')[index].setAttribute('tabindex', '0'); 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__header'); getWidgetHeader.setAttribute('role', 'text'); getWidgetHeader.setAttribute('tabindex', '0'); if (document.querySelector('.jdgm-widget-actions-wrapper')) { var parentNode = getWidgetHeader; var replaceNode = document.querySelector('.jdgm-widget-actions-wrapper'); var newNode = document.querySelector('.jdgm-histogram.jdgm-temp-hidden'); //parentNode.insertBefore(newNode, replaceNode); } 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') //parentNode.insertBefore(focusElement, replaceNode); //document.querySelector('.jdgm-rev-widg__summary-stars').setAttribute('style', 'float: left; margin-right: 5px;') // 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) { 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 (document.querySelector('.jdgm-submit-rev')) { document.querySelector('.jdgm-submit-rev').addEventListener('click', function() { setTimeout(function() { document.querySelector('.jdgm-form').children.forEach(el => { if (el.querySelector('.jdgm-input-error')) { if (el.querySelector('.jdgm-input-error').checkVisibility()) { el.children[0].classList.add('required-text-ada'); } else { el.children[0].classList.remove('required-text-ada'); } } }) if (document.querySelector('.jdgm-input-error')) { var getErrorfield = document.querySelectorAll('.jdgm-input-error'); for (let index = 0; index < getErrorfield.length; index++) { if (getErrorfield[index].checkVisibility()) { getErrorfield[index].blur(); getErrorfield[index + 1].setAttribute('role', 'text'); getErrorfield[index + 1].setAttribute('tab-index', '0'); getErrorfield[index + 1].setAttribute('aria-live', 'polite'); getErrorfield[index + 1].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', 'text'); 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', 'this link opens in a new window'); 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-sort-dropdown')) { document.querySelector('.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(); var filterselected = document.getElementsByClassName("jdgm-sort-dropdown")[0]; focusElement.setAttribute('aria-label', `reviews sorted by ${filterselected.selectedOptions[0].innerText}`); focusElement.focus(); //setTimeout(function() { //getWidgetHeader.setAttribute('role', 'text'); //getWidgetHeader.setAttribute('tabindex', '2'); //}, 5000); } } }, 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.addEventListener('click', function() { getReviewButton.setAttribute('role', 'button'); var getReviewFormTitle = document.querySelectorAll('.jdgm-form__title'); getReviewFormTitle.forEach(el => { el.setAttribute('role', 'text'); el.setAttribute('aria-live', 'polite'); el.setAttribute('tabindex', '-1'); el.focus(); }) document.querySelector('.jdgm-form-wrapper > .jdgm-form > .jdgm-form__title').focus(); setTimeout(function() { document.querySelector('input[name="review_title"]').blur(); }, 10); 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); }) }) } 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: to add focus event to review widget after clicking the pagination **** function focusReviewBack() { console.log('pagination clicked!'); setTimeout(() => { const focusElement = el.querySelector('.jdgm-rev-widg__reviews'); if (focusElement) { console.log('page 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(); focusElement.focus(); //setTimeout(function() { //getWidgetHeader.setAttribute('role', 'text'); //getWidgetHeader.setAttribute('tabindex', '2'); //}, 5000); } }, 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-prev-badge__stars'); 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.querySelector('.jdgm-prev-badge').addEventListener('click', function() { getWidgetHeader.removeAttribute('role'); getWidgetHeader.removeAttribute('tabindex'); document.querySelector('.jdgm-rev-widg').blur(); document.querySelector('#judgeme_product_reviews').blur(); document.querySelector('.jdgm-rev-widg__title').setAttribute('role', 'text'); document.querySelector('.jdgm-rev-widg__title').setAttribute('tabindex', '0'); document.querySelector('.jdgm-rev-widg__title').focus(); document.querySelector('.jdgm-rev-widg').blur(); document.querySelector('#judgeme_product_reviews').blur(); setTimeout(function() { getWidgetHeader.setAttribute('role', 'text'); getWidgetHeader.setAttribute('tabindex', '2'); }, 5000); }) // **** 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 => { var event = new Date(el.getAttribute('data-content')); event.setDate(event.getDate() - 1); el.setAttribute('aria-label', `published on ${event.toLocaleDateString(undefined, options)}`); el.innerHTML = ``; }) } convertReviewDate() // **** end: to make Voice over read the review date literarily **** document.querySelectorAll('.jdgm-rev__icon').forEach(el => { el.setAttribute('aria-label', `first initial of reviewer's name`); el.setAttribute('role', 'text'); el.setAttribute('title', `first initial of reviewer's name`); }) // **** 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')}`) } }) } // 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() { document.querySelectorAll('.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'); 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); document.querySelector('.jdgm-form__rating').childNodes.forEach(el => { el.setAttribute('tabindex', '0'); el.addEventListener('keydown', function(event) { event.preventDefault(); if (event.keyCode === 13) { el.click() } el.removeAttribute('tabindex'); document.querySelector('.jdgm-form__rating').childNodes.forEach(ell => { if (el != ell) { ell.setAttribute('tabindex', '0'); } }) }) }) document.querySelectorAll('.jdgm-form__fieldset')[2].addEventListener('keyup', function() { document.querySelector('.jdgm-form__rating').childNodes[4].setAttribute('tabindex', '0'); }) document.querySelectorAll('.jdgm-form__fieldset')[0].addEventListener('keyup', function() { document.querySelector('.jdgm-form__rating').childNodes[0].setAttribute('tabindex', '0'); }) 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, this will open a pop up`) }) }, 2000); // end: set alt attribute for every UGC thumbnail to be more meaningful 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 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); }) } });

Fjallraven Byron Hat in Dark Olive-Taupe

Check out this heat 🔥

You may also like