Merge branch 'main' into prettier

Author: zoltan-dulac

content/body/form-error-checking.php

@@ -271,6 +271,30 @@
       }
       </script>
 
+      <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebPage",
+        "name": "Accessible Form Validation: HTML5 and Custom Approaches",
+        "description": "Learn how to make form validation and error checking accessible using HTML5 and custom validation methods. Includes code examples and best practices.",
+        "url": "https://www.useragentman.com/enable/form-error-checking.php",
+        "mainEntity": [
+          {
+            "@type": "HowTo",
+            "name": "Using HTML5 for Accessible Form Validation",
+            "text": "You can use just the required and pattern attributes on HTML forms to do client-side validation without JavaScript.",
+            "url": "https://www.useragentman.com/enable/form-error-checking.php#using-native-html5-validation--heading"
+          },
+          {
+            "@type": "HowTo",
+            "name": "Using Custom Validation for Accessible Form Validation",
+            "text": "You can use enable-a11y node package to handle client-side form validation and error messages.",
+            "url": "https://www.useragentman.com/enable/form-error-checking.php#using-custom-validation--heading"
+          }
+        ]
+      }
+    </script>
+
 
 <?= includeNPMInstructions("accessibility", [], null, false, [
     "needsAccessibilityLib" => true,

templates/data/meta-info.json

@@ -80,8 +80,8 @@
     "desc": "Many designers will turn off focus styles on web apps. There are better solutions that ensure they appear for only the users that need them."
   },
   "form-error-checking.php": {
-    "title": "Accessible Form Error Checking",
-    "desc": "It is not hard to ensure forms work correctly with screen readers and other technology."
+    "title": "How to Ensure Accessible Form Validation and Error Checking",
+    "desc": "Learn how to make your form validation and error checking accessible. Follow best practices to ensure your web forms are compliant with WCAG guidelines and user-friendly for everyone."
   },
   "form.php": {
     "title": "Accessible Form Structure",

templates/includes/documentation-header.php

@@ -305,7 +305,7 @@ class="enable-flyout enable-flyout__level enable-flyout__dropdown">
                                     }, {
                                         "id": "flyout__link",
                                         "props": {
-                                            "label": "Form Error Checking",
+                                            "label": "Accessible Form Validation",
                                             "url-slug": "form-error-checking",
                                             "alt": ""
                                         }
@@ -589,7 +589,7 @@ class="enable-flyout enable-flyout__level enable-flyout__dropdown">
                             "content": [{
                                 "id": "flyout__link",
                                 "props": {
-                                    "label": "Form Error Checking",
+                                    "label": "Accessible Form Validation",
                                     "url-slug": "form-error-checking",
                                     "alt": ""
                                 }

templates/includes/meta-info.php

@@ -14,9 +14,10 @@
 <meta property="og:alt" content="" />
 <meta property="article:author" content="Zoltan Hawryluk" />
 
-
+<meta name="description" content="<?= $fileProps->desc ?>" />
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:description" content="<?= $fileProps->desc ?>" />
 <meta name="twitter:title" content="<?= $fileProps->title ?>" />
 <meta name="twitter:image" content="<?= $fileProps->posterImg ?>" />
+<link rel="icon" type="image/x-icon" href="images/ENABLE.svg">