/* 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 if (document.querySelector('.jdgm-preview-badge')) { setTimeout(function() { document.querySelectorAll('.jdgm-prev-badge__stars').forEach(el => { el.setAttribute('role', 'image') el.setAttribute('aria-label', `${el.getAttribute('aria-label')}, go to reviews section`) }) }, 1000); } // 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}`); //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') if (parentNode && replaceNode && focusElement) { parentNode.insertBefore(focusElement, replaceNode); parentNode.setAttribute('style', 'text-align: center;') } setTimeout(function() { var filterby = document.createElement('label'); filterby.innerText = "Sort by:"; filterby.setAttribute('for', 'jdgm_filter_by_text'); if (document.querySelector('.jdgm-rev-widg__sort-wrapper')) { document.querySelector('.jdgm-rev-widg__sort-wrapper').insertBefore(filterby, document.querySelector('.jdgm-rev-widg__sort-wrapper .jdgm-sort-dropdown-wrapper')) document.querySelector('.jdgm-rev-widg__sort-wrapper .jdgm-sort-dropdown-wrapper .jdgm-sort-dropdown').id = "jdgm_filter_by_text"; } }, 2000); // 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') } }) 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" }); if (document.querySelector('.jdgm-rev')) { document.querySelector('.jdgm-rev-widg__reviews').setAttribute('tabindex', '0'); document.querySelector('.jdgm-rev-widg__reviews').focus() } }, 1200); } }) }) //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(); var filterselected = document.getElementsByClassName("jdgm-row-actions 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.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); }) } }) } 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'); 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.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 => { 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')}`) } }) } // 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') } }) }, 100); if (checkStar) { setInterval(function() { checkStar = false; var formRating = document.querySelector('.jdgm-form__rating'); formRating.childNodes.forEach((el, index) => { el.addEventListener('keydown', function(event) { event.preventDefault(); if (event.key === 'ArrowRight' || event.key === 'Right') { event.preventDefault(); var x = 0; var intervalID = setInterval(function() { if (index == 0 && document.querySelectorAll('.jdgm-form__rating > .jdgm-star.jdgm--on').length == 1) { formRating.childNodes[0].setAttribute('aria-checked', 'true') formRating.childNodes[1].setAttribute('aria-checked', 'false') formRating.childNodes[2].setAttribute('aria-checked', 'false') formRating.childNodes[3].setAttribute('aria-checked', 'false') formRating.childNodes[4].setAttribute('aria-checked', 'false') } else if (index == 4) { formRating.childNodes[0].setAttribute('aria-checked', 'false') formRating.childNodes[1].setAttribute('aria-checked', 'false') formRating.childNodes[2].setAttribute('aria-checked', 'false') formRating.childNodes[3].setAttribute('aria-checked', 'false') formRating.childNodes[4].setAttribute('aria-checked', 'true') } else if (formRating.childNodes[index + 1]) { formRating.childNodes[index + 1].setAttribute('aria-checked', 'true') // current star var formRating2 = document.querySelector('.jdgm-form__rating'); formRating2.childNodes.forEach((ell, indexx) => { if (index + 1 != indexx) { ell.setAttribute('aria-checked', 'false') // other stars } }) } if (++x === 6) { window.clearInterval(intervalID); } }, 50); } if (event.key === 'ArrowLeft' || event.key === 'Left') { event.preventDefault(); var x = 0; var intervalID = setInterval(function() { if (index >= 1) { if (formRating.childNodes[index - 1]) { formRating.childNodes[index - 1].setAttribute('aria-checked', 'true') // current star var formRating2 = document.querySelector('.jdgm-form__rating'); formRating2.childNodes.forEach((ell, indexx) => { if (index - 1 != indexx) { ell.setAttribute('aria-checked', 'false') // other stars } }) } } else if (index == 0) { formRating.childNodes[0].setAttribute('aria-checked', 'true') formRating.childNodes[1].setAttribute('aria-checked', 'false') formRating.childNodes[2].setAttribute('aria-checked', 'false') formRating.childNodes[3].setAttribute('aria-checked', 'false') formRating.childNodes[4].setAttribute('aria-checked', 'false') } if (++x === 6) { window.clearInterval(intervalID); } }, 50); } if (event.keyCode === 13) { formRating.childNodes[index].click() event.preventDefault(); var x = 0; var intervalID = setInterval(function() { if (formRating.childNodes[index]) { formRating.childNodes[index].setAttribute('aria-checked', 'true') // current star var formRating2 = document.querySelector('.jdgm-form__rating'); formRating2.childNodes.forEach((ell, indexx) => { if (index != indexx) { ell.setAttribute('aria-checked', 'false') // other stars ell.setAttribute('tabindex', '-1') } }) } if (++x === 6) { window.clearInterval(intervalID); } }, 50); 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, 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); }) } });