Merge pull request #372 from creativedotdesign/feature/validate-html-…

…test-fixes

Feature/validate html test fixes

cypress.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'cypress';
 import * as dotenv from 'dotenv';
 import setupPlugins from './cypress/plugins/index';
+import htmlvalidate from 'cypress-html-validate/plugin';
 
 dotenv.config();
 
@@ -12,6 +13,8 @@ export default defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
+      htmlvalidate.install(on);
+
       setupPlugins(on, config);
     },
     baseUrl: process.env.VITE_ASSET_URL,

cypress/e2e/htmlValidate.spec.ts

@@ -0,0 +1,15 @@
+describe('HTML Validation Tests', () => {
+  it('should be valid', () => {
+    cy.task('sitemapLocations').then((pages) => {
+      pages.forEach((page) => {
+        cy.visit(page);
+        cy.htmlvalidate({
+          rules: {
+            'require-sri': 'off',
+            'element-permitted-content': 'off',
+          },
+        });
+      });
+    });
+  });
+});

cypress/support/e2e.ts

@@ -2,3 +2,4 @@ import './vue';
 import './assertions';
 // import './baseUrl';
 import './checkElementExists';
+import 'cypress-html-validate/commands';

header.php

@@ -19,21 +19,21 @@
         <?php echo bloginfo('name'); ?>
       </a>
 
-      <button class="flex lg:hidden js-menu-toggle" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation" data-cy="open-mobile-menu">
+      <button type="button" class="flex lg:hidden js-menu-toggle" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation" data-cy="open-mobile-menu">
         <!-- Hamburger Icon -->
         <span class="w-6 h-6">
-          <?php echo svg(['sprite' => 'icon-hamburger', 'class' => 'w-full h-full']); ?>
+          <?php echo svg(['sprite' => 'icon-hamburger', 'title' => 'Open Menu', 'class' => 'w-full h-full']); ?>
         </span>
 
         <span class="sr-only"><?php _e('Toggle Navigation Button', 'tofino'); ?></span>
       </button>
 
       <div class="inactive absolute inset-0 bg-white lg:bg-transparent w-full h-screen lg:h-auto lg:relative lg:w-auto lg:flex lg:items-center" id="main-menu">
         <!-- Close Icon -->
-        <button class="absolute z-10 w-4 h-4 top-5 right-7 lg:hidden js-menu-toggle"
+        <button type="button" class="absolute z-10 w-4 h-4 top-5 right-7 lg:hidden js-menu-toggle"
           data-cy="close-mobile-menu"
         >
-          <?php echo svg(['sprite' => 'icon-close', 'class' => 'w-full h-full']); ?>
+          <?php echo svg(['sprite' => 'icon-close', 'title' => 'Close Menu', 'class' => 'w-full h-full']); ?>
         </button>
 
         <?php if (has_nav_menu('header_navigation')):

inc/lib/init.php

@@ -191,7 +191,7 @@ function show_maintenance_message()
     echo '<div class="error notice"><p><strong>' . __('Maintenance Mode', 'tofino') . '</strong> ' . get_field('maintenance_mode_text', 'general-options') . '</p></div>';
 
     if (!isset($_COOKIE['tofino_maintenance_alert_dismissed'])) {
-      echo '<div class="maintenance-mode-alert"><h1>' . __('Maintenance Mode', 'tofino') . '</h1><p>' . get_field('maintenance_mode_text', 'general-options') . '</p><button>' . __('I understand', 'tofino') . '</button></div>';
+      echo '<div class="maintenance-mode-alert"><h1>' . __('Maintenance Mode', 'tofino') . '</h1><p>' . get_field('maintenance_mode_text', 'general-options') . '</p><button type="button">' . __('I understand', 'tofino') . '</button></div>';
     }
   }
 }

inc/lib/vite.php

@@ -99,8 +99,8 @@ private static function cssTag(string $entry): string
     $tags = '';
 
     foreach (self::cssUrls($entry) as $url) {
-      wp_register_style("tofino/$entry", $url);
-      wp_enqueue_style("tofino/$entry", $url);
+      wp_register_style("tofino-" . sanitize_title($entry), $url);
+      wp_enqueue_style("tofino-" . sanitize_title($entry), $url);
     }
 
     return $tags;

package.json

@@ -55,6 +55,7 @@
     "axe-html-reporter": "^2.2.3",
     "cypress": "^13.6.2",
     "cypress-axe": "^1.5.0",
+    "cypress-html-validate": "^6.1.0",
     "dotenv": "^16.3.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",