Merge branch 'release/1.4.2'

README.txt

@@ -174,6 +174,20 @@ No, Accessibility Checker runs completely on your server and does not require yo
 
 == Changelog ==
 
+= 1.4.2 =
+Added: frontend highlighting loading message
+Removed: frontend highlighting ignored issues
+Removed: frontend highlighting from customizer
+Fixed: frontend highlighting link styles
+Updated: frontend highlighing to allow elements that violate multiple rules
+Fixed: frontend highlighting elements not highlighting after closing the controls panel
+Fixed: frontend highlighting not finding images due to extra whitespace
+Updated: ambiguous text check to ignore svgs and icons
+Updated: animated gif check include animated webP images
+Updated: animated gif check to disregard url parameters
+Fixed: undefined array key "query"
+Fixed: Reading level icon logic
+
 = 1.4.1 =
 Updated: Freemius SDK to the latest version
 

accessibility-checker.php

@@ -10,7 +10,7 @@
  * Plugin Name:       Accessibility Checker
  * Plugin URI:        https://a11ychecker.com
  * Description:       Audit and check your website for accessibility before you hit publish. In-post accessibility scanner and guidance.
- * Version:           1.4.1
+ * Version:           1.4.2
  * Author:            Equalize Digital
  * Author URI:        https://equalizedigital.com
  * License:           GPL-2.0+
@@ -76,7 +76,7 @@ function edac_fs() {
 
 // Current plugin version.
 if ( ! defined( 'EDAC_VERSION' ) ) {
-	define( 'EDAC_VERSION', '1.4.1' );
+	define( 'EDAC_VERSION', '1.4.2' );
 }
 
 // Current database version.
@@ -821,16 +821,7 @@ function edac_summary_ajax() {
 		$html['password_protected'] = $notice_text;
 		$html['content']           .= '<div class="edac-summary-notice">' . $notice_text . '</div>';
 	}
-/*
-	$post_id = intval( $_REQUEST['post_id'] );
-	$summary = edac_summary( $post_id );
 
-	if ( $summary['readability'] <= 9 ) {
-		$simplified_summary_text = 'Your content has a reading level at or below 9th grade and does not require a simplified summary.';
-	} else {
-		$simplified_summary_text = $summary['simplified_summary'] ? 'A Simplified summary has been included for this content.' : 'A Simplified summary has not been included for this content.';
-	}
-*/
 	$post_id = intval( $_REQUEST['post_id'] );
 	$summary = edac_summary( $post_id );
 	$simplified_summary_text = '';
@@ -902,14 +893,14 @@ function edac_summary_ajax() {
 	<div class="edac-summary-readability">
 		<div class="edac-summary-readability-level">
 			<div><img src="' . plugin_dir_url( __FILE__ ) . 'assets/images/readability icon navy.png" alt="" width="54"></div>
-			<div class="edac-panel-number' . ( ( $summary['readability'] <= 9 ) ? ' passed-text-color' : ' failed-text-color' ) . '">
+			<div class="edac-panel-number' . ( ( (int) $summary['readability'] <= 9 || 'none' === $simplified_summary_prompt ) ? ' passed-text-color' : ' failed-text-color' ) . '">
 				' . $summary['readability'] . '
 			</div>
-			<div class="edac-panel-number-label' . ( ( $summary['readability'] <= 9 ) ? ' passed-text-color' : ' failed-text-color' ) . '">Reading <br />Level</div>
+			<div class="edac-panel-number-label' . ( ( (int) $summary['readability'] <= 9 || 'none' === $simplified_summary_prompt ) ? ' passed-text-color' : ' failed-text-color' ) . '">Reading <br />Level</div>
 		</div>
 		<div class="edac-summary-readability-summary">
-			<div class="edac-summary-readability-summary-icon' . ( ('none' !== $simplified_summary_prompt && ( $summary['simplified_summary'] || $summary['readability'] <= 9 ) ) ? ' active' : '' ) . '"></div>
-			<div class="edac-summary-readability-summary-text' . ( ('none' !== $simplified_summary_prompt && ( $summary['simplified_summary'] || $summary['readability'] <= 9 ) ) ? ' active' : '' ) . '">' . $simplified_summary_text . '</div>
+			<div class="edac-summary-readability-summary-icon' . ( ( 'none' === $simplified_summary_prompt || $summary['simplified_summary'] || (int) $summary['readability'] <= 9 ) ? ' active' : '' ) . '"></div>
+			<div class="edac-summary-readability-summary-text' . ( ( 'none' === $simplified_summary_prompt || $summary['simplified_summary'] || (int) $summary['readability'] <= 9 ) ? ' active' : '' ) . '">' . $simplified_summary_text . '</div>
 		</div>
 	</div>
 	<div class="edac-summary-disclaimer"><small>* True accessibility requires manual testing in addition to automated scans. <a href="https://a11ychecker.com/help4280">Learn how to manually test for accessibility</a>.</small></div>

build/accessibility-checker-app/css/main.css

@@ -4,6 +4,9 @@ body.edac-app-disable-styles {
 body.edac-app-disable-styles #wpadminbar {
   display: none !important;
 }
+body.edac-app-wait * {
+  cursor: wait !important;
+}
 
 .edac-highlight {
   all: unset;
@@ -18,6 +21,13 @@ body.edac-app-disable-styles #wpadminbar {
   outline-offset: 5px !important;
   outline-color: magenta !important;
 }
+.edac-highlight-element-selected-min-width {
+  min-width: 25px !important;
+  display: inline-block !important;
+}
+.edac-highlight-element-selected-min-height {
+  min-height: 16px !important;
+}
 .edac-highlight-btn {
   all: unset;
   width: 46px !important;
@@ -52,6 +62,10 @@ body.edac-app-disable-styles #wpadminbar {
 .edac-highlight-panel * {
   all: unset;
 }
+.edac-highlight-panel a:not(.edac-highlight-panel-description-reference) {
+  all: revert !important;
+  color: #ffffff !important;
+}
 .edac-highlight-panel-toggle {
   width: 50px !important;
   height: 50px !important;

build/accessibility-checker-app/main.bundle.js

@@ -1523,7 +1523,14 @@ class AccessibilityCheckerHighlight {
   /**
    * Constructor
    */
-  constructor() {
+  constructor(settings = {}) {
+    const defaultSettings = {
+      showIgnored: false
+    };
+    this.settings = {
+      ...defaultSettings,
+      ...settings
+    };
     this.addHighlightPanel();
     this.nextButton = document.querySelector('#edac-highlight-next');
     this.previousButton = document.querySelector('#edac-highlight-previous');
@@ -1614,7 +1621,7 @@ class AccessibilityCheckerHighlight {
     // Compare the outer HTML of the parsed element with all elements on the page
     const allElements = document.body.querySelectorAll('*');
     for (const element of allElements) {
-      if (element.outerHTML === firstParsedElement.outerHTML) {
+      if (element.outerHTML.replace(/\W/g, '') === firstParsedElement.outerHTML.replace(/\W/g, '')) {
         const tooltip = this.addTooltip(element, value, index);
         this.tooltips.push(tooltip);
         return element;
@@ -1631,21 +1638,29 @@ class AccessibilityCheckerHighlight {
    * Note: This function assumes that `edac_script_vars` is a global variable containing necessary data.
    */
   highlightAjax() {
+    const self = this;
     return new Promise(function (resolve, reject) {
       const xhr = new XMLHttpRequest();
       const url = edac_script_vars.ajaxurl + '?action=edac_frontend_highlight_ajax&post_id=' + edac_script_vars.postID + '&nonce=' + edac_script_vars.nonce;
+      self.showWait(true);
       xhr.open('GET', url);
       xhr.onload = function () {
         if (xhr.status === 200) {
+          self.showWait(false);
           const response = JSON.parse(xhr.responseText);
           //console.log(response);
           if (true === response.success) {
             const response_json = JSON.parse(response.data);
-            resolve(response_json);
+            if (self.settings.showIgnored) {
+              resolve(response_json);
+            } else {
+              resolve(response_json.filter(item => item.rule_type !== 'ignored'));
+            }
           } else {
             //console.log(response);
           }
         } else {
+          self.showWait(false);
           console.log('Request failed.  Returned status of ' + xhr.status);
           reject({
             status: xhr.status,
@@ -1654,6 +1669,7 @@ class AccessibilityCheckerHighlight {
         }
       };
       xhr.onerror = function () {
+        self.showWait(false);
         reject({
           status: xhr.status,
           statusText: xhr.statusText
@@ -1663,28 +1679,31 @@ class AccessibilityCheckerHighlight {
     });
   }
 
+  /**
+   * This function toggles showing Wait
+   */
+  showWait(status = true) {
+    if (status) {
+      document.querySelector('body').classList.add('edac-app-wait');
+    } else {
+      document.querySelector('body').classList.remove('edac-app-wait');
+    }
+  }
+
   /**
    * This function removes the highlight/tooltip buttons and runs cleanups for each.
    */
   removeHighlightButtons() {
     this.tooltips.forEach(item => {
-      //find the associated element 
-      const id = item.tooltip.dataset.id;
-
-      //remove the data-element-id added we created the tooltip/button
-      const element = document.querySelector(`[data-element-id="${id}"]`);
-      if (element) {
-        element.removeAttribute('data-element-id');
-      }
-
       //remove click listener
       item.tooltip.removeEventListener('click', item.listeners.onClick);
 
       //remove position/resize listener: https://floating-ui.com/docs/autoUpdate
       item.listeners.cleanup();
-
-      //remove tooltip
-      item.tooltip.remove();
+    });
+    const buttons = document.querySelectorAll('.edac-highlight-btn');
+    buttons.forEach(button => {
+      button.remove();
     });
   }
 
@@ -1706,9 +1725,6 @@ class AccessibilityCheckerHighlight {
 
     //add data-id to the tooltip/button so we can find it later.
     tooltip.dataset.id = value.id;
-
-    //add data-element-id to the element so we can find it later.
-    element.dataset.elementId = value.id;
     const onClick = e => {
       const id = e.currentTarget.dataset.id;
       this.showIssue(id);
@@ -1765,7 +1781,7 @@ class AccessibilityCheckerHighlight {
 			<div id="edac-highlight-panel-controls" class="edac-highlight-panel-controls" tabindex="0">
 				<button id="edac-highlight-panel-controls-close" class="edac-highlight-panel-controls-close" aria-label="Close accessibility highlights panel" aria-label="Close">×</button>
 				<div class="edac-highlight-panel-controls-title">Accessibility Checker</div>
-				<div class="edac-highlight-panel-controls-summary"></div>
+				<div class="edac-highlight-panel-controls-summary">Loading...</div>
 				<div class="edac-highlight-panel-controls-buttons">
 					<div>
 						<button id="edac-highlight-previous"><span aria-hidden="true">« </span>Previous</button>
@@ -1840,19 +1856,26 @@ class AccessibilityCheckerHighlight {
     if (id === undefined) {
       return;
     }
+    const issue = this.issues.find(issue => issue.id == id);
     this.currentButtonIndex = this.issues.findIndex(issue => issue.id == id);
-    const issueElement = document.querySelector(`[data-id="${id}"]`);
-    const element = document.querySelector(`[data-element-id="${id}"]`);
-    if (issueElement && element) {
-      issueElement.classList.add('edac-highlight-btn-selected');
+    const tooltip = issue.tooltip;
+    const element = issue.element;
+    if (tooltip && element) {
+      tooltip.classList.add('edac-highlight-btn-selected');
       element.classList.add('edac-highlight-element-selected');
+      if (element.offsetWidth < 20) {
+        element.classList.add('edac-highlight-element-selected-min-width');
+      }
+      if (element.offsetHeight < 5) {
+        element.classList.add('edac-highlight-element-selected-min-height');
+      }
       element.scrollIntoView({
         block: 'center'
       });
-      if ((0,tabbable__WEBPACK_IMPORTED_MODULE_2__.isFocusable)(issueElement)) {
+      if ((0,tabbable__WEBPACK_IMPORTED_MODULE_2__.isFocusable)(tooltip)) {
         //issueElement.focus();
 
-        if (!this.checkVisibility(issueElement) || !this.checkVisibility(element)) {
+        if (!this.checkVisibility(tooltip) || !this.checkVisibility(element)) {
           this.currentIssueStatus = 'The element is not visible. Try disabling styles.';
           //TODO: console.log(`Element with id ${id} is not visible!`);
         } else {
@@ -1905,7 +1928,12 @@ class AccessibilityCheckerHighlight {
 
       this.issues = json;
       json.forEach(function (value, index) {
-        const matchedElement = this.findElement(value, index);
+        const element = this.findElement(value, index);
+        if (element !== null) {
+          const tooltip = this.addTooltip(element, value, index);
+          this.issues[index].tooltip = tooltip.tooltip;
+          this.issues[index].element = element;
+        }
       }.bind(this));
       this.showIssueCount();
       if (id !== undefined) {
@@ -1942,7 +1970,10 @@ class AccessibilityCheckerHighlight {
     //remove selected class from previously selected elements
     const selectedElements = document.querySelectorAll('.edac-highlight-element-selected');
     selectedElements.forEach(selectedElement => {
-      selectedElement.classList.remove('edac-highlight-element-selected');
+      selectedElement.classList.remove('edac-highlight-element-selected', 'edac-highlight-element-selected-min-width', 'edac-highlight-element-selected-min-height');
+      if (selectedElement.classList.length == 0) {
+        selectedElement.removeAttribute('class');
+      }
     });
   };
 

includes/enqueue-scripts.php

@@ -63,7 +63,7 @@ function edac_enqueue_scripts() {
 
 	$post_id = is_object( $post ) ? $post->ID : null;
 
-	if( $post_id && current_user_can( 'edit_post', $post_id ) ) {
+	if ( $post_id && current_user_can( 'edit_post', $post_id ) && ! is_customize_preview() ) {
 
 		wp_enqueue_script( 'edac-app', plugin_dir_url( __DIR__ ) . 'build/accessibility-checker-app/main.bundle.js', false, EDAC_VERSION, false );
 
@@ -87,6 +87,6 @@ function edac_enqueue_scripts() {
 			)
 		);
 
-	}		
+	}       
 
-}
+}

includes/rules/img_animated_gif.php

@@ -20,7 +20,7 @@ function edac_rule_img_animated_gif( $content, $post ) {
 	$errors = array();
 
 	// check for image gifs.
-	$gifs = $dom->find( 'img[src$=gif]' );
+	$gifs = $dom->find( 'img[src$=.gif],img[src*=.gif?],img[src*=.gif#]' );
 	if ( $gifs ) {
 		foreach ( $gifs as $gif ) {
 
@@ -32,6 +32,19 @@ function edac_rule_img_animated_gif( $content, $post ) {
 		}
 	}
 
+	// check for image Webp.
+	$webps = $dom->find( 'img[src$=.webp],img[src*=.webp?],img[src*=.webp#]' );
+	if ( $webps ) {
+		foreach ( $webps as $webp ) {
+
+			if ( edac_img_webp_is_animated( $webp->getAttribute( 'src' ) ) == false ) {
+				continue;
+			}
+
+			$errors[] = $webp->outertext;
+		}
+	}
+
 	// check for giphy gifs.
 	$giphy_gifs = $dom->find( 'iframe' );
 	if ( $giphy_gifs ) {
@@ -85,3 +98,27 @@ function edac_img_gif_is_animated( $filename ) {
 	fclose( $fh );
 	return $count > 1;
 }
+
+/**
+ * Checks if a webp image is animated
+ *
+ * @param  string $filename The filename.
+ * @return bool
+ */
+function edac_img_webp_is_animated( $filename ) {
+	if ( ! ( $fh = @fopen( $filename, 'rb' ) ) ) {
+		return false;
+	}
+
+	// See: https://stackoverflow.com/questions/45190469/how-to-identify-whether-webp-image-is-static-or-animated.
+	$result = false;
+	fseek( $fh, 12 );
+	if ( 'VP8X' === fread( $fh, 4 ) ) {
+		fseek( $fh, 20 );
+		$byte = fread( $fh, 1 );
+		$result = ( ( ord( $byte ) >> 1 ) & 1 ) ? true : false;
+	}
+	fclose( $fh );
+	return $result;
+
+}

includes/rules/link_ambiguous_text.php

@@ -45,7 +45,7 @@ function edac_rule_link_ambiguous_text( $content, $post ) {
 		$error_code = $a->outertext;
 
 		// check aria-label.
-		if ( $a->hasAttribute( 'aria-label' ) ) {
+		if ( $a->hasAttribute( 'aria-label' ) && '' !== $a->getAttribute( 'aria-label' ) ) {
 
 			$text = $a->getAttribute( 'aria-label' );
 			$error = edac_check_ambiguous_phrase( $text );

includes/validate.php

@@ -239,7 +239,7 @@ function edac_get_content( $post ) {
 	// sanity check: confirm the permalink url is on this site.
 	if ( $parsed_url['host'] === $parsed_site_url['host'] ) {
 
-		if ( $parsed_url['query'] ) {
+		if ( array_key_exists( 'query', $parsed_url ) && $parsed_url['query'] ) {
 			// the permalink structure is using a querystring.
 			$url = get_the_permalink( $post->ID ) . '&c=' . time();