fixrule(svg_graphics_labelled, img_alt_valid) Ignore SVG accessible name requirement when its ancestor is a widget or requires presentational child V3

.github/workflows/test.yml

@@ -135,15 +135,15 @@ jobs:
       - run: npm run build
         working-directory: accessibility-checker
 
-      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Baselines/*.test.js
+      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Baselines/*.test.mjs
         working-directory: accessibility-checker
-      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Functions.Defined/*.test.js
+      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Functions.Defined/*.test.mjs
         working-directory: accessibility-checker
-      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.ObjectStructure/*.test.js
+      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.ObjectStructure/*.test.mjs
         working-directory: accessibility-checker
-      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Scans/aChecker.assertionCompliance.test.js
+      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Scans/aChecker.assertionCompliance.test.mjs
         working-directory: accessibility-checker
-      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Scans/aChecker.Content.Puppeteer.test.js
+      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Scans/aChecker.Content.Puppeteer.test.mjs
         working-directory: accessibility-checker
 
 ###############################################################################
@@ -154,7 +154,7 @@ jobs:
 
       strategy:
         matrix:
-          node-version: [14.x, 18.x]
+          node-version: [18.x]
 
       steps:
       - uses: actions/checkout@v3
@@ -183,15 +183,15 @@ jobs:
       - run: npm run build
         working-directory: accessibility-checker
 
-      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Baselines/*.test.js
+      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Baselines/*.test.mjs
         working-directory: accessibility-checker
-      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Functions.Defined/*.test.js
+      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Functions.Defined/*.test.mjs
         working-directory: accessibility-checker
-      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.ObjectStructure/*.test.js
+      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.ObjectStructure/*.test.mjs
         working-directory: accessibility-checker
-      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Scans/aChecker.assertionCompliance.test.js
+      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Scans/aChecker.assertionCompliance.test.mjs
         working-directory: accessibility-checker
-      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Scans/aChecker.Content.Puppeteer.test.js
+      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Scans/aChecker.Content.Puppeteer.test.mjs
         working-directory: accessibility-checker
 
 ###############################################################################
@@ -231,9 +231,9 @@ jobs:
       - run: npm run build
         working-directory: accessibility-checker
 
-      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Scans/aChecker.Content.test.js
+      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Scans/aChecker.Content.test.mjs
         working-directory: accessibility-checker
-      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Scans/aChecker.URL.test.js
+      - run: npx mocha -R dot test/mocha/aChecker.Fast/aChecker.Scans/aChecker.URL.test.mjs
         working-directory: accessibility-checker
 
 ###############################################################################
@@ -273,9 +273,9 @@ jobs:
       - run: npm run build
         working-directory: accessibility-checker
 
-      - run: npx mocha -R dot test/mocha/aChecker.Slow1/aChecker.Scans/**/*.test.js
+      - run: npx mocha -R dot test/mocha/aChecker.Slow1/aChecker.Scans/**/*.test.mjs
         working-directory: accessibility-checker
-      - run: npx mocha -R dot test/mocha/aChecker.Slow1/aChecker.ObjectStructure/**/*.test.js
+      - run: npx mocha -R dot test/mocha/aChecker.Slow1/aChecker.ObjectStructure/**/*.test.mjs
         working-directory: accessibility-checker
 
 
@@ -474,6 +474,8 @@ jobs:
         working-directory: common/module
       - run: npm install
         working-directory: karma-accessibility-checker
+      - run: npm install --no-save forever
+        working-directory: karma-accessibility-checker
       - run: npm run setup
         working-directory: karma-accessibility-checker
       - run: sleep 10

accessibility-checker-engine/src/v4/rules/img_alt_valid.ts

@@ -15,6 +15,7 @@ import { Rule, RuleResult, RuleFail, RuleContext, RulePass, RuleContextHierarchy
 import { eRulePolicy, eToolkitLevel } from "../api/IRule";
 import { AriaUtil } from "../util/AriaUtil";
 import { VisUtil } from "../util/VisUtil";
+import { AccNameUtil } from "../util/AccNameUtil";
 
 export const img_alt_valid: Rule = {
     id: "img_alt_valid",
@@ -53,8 +54,8 @@ export const img_alt_valid: Rule = {
     act: "23a2a8",
     run: (context: RuleContext, options?: {}, contextHierarchies?: RuleContextHierarchy): RuleResult | RuleResult[] => {
         const ruleContext = context["dom"].node as Element;
-        // If not visible to the screen reader, ignore
-        if (VisUtil.isNodeHiddenFromAT(ruleContext))
+        // If not visible to the screen reader, or can be ignored
+        if (VisUtil.isNodeHiddenFromAT(ruleContext) || AccNameUtil.isAccessibleNameIgnorable(ruleContext))
             return null;
 
         if (AriaUtil.getAriaLabel(ruleContext).trim().length !== 0) {

accessibility-checker-engine/src/v4/rules/svg_graphics_labelled.ts

@@ -49,7 +49,7 @@ export const svg_graphics_labelled: Rule = {
         const ruleContext = context["dom"].node as Element;
 
         //skip the rule
-        if (VisUtil.isNodeHiddenFromAT(ruleContext) || VisUtil.isNodePresentational(ruleContext)) return null;
+        if (VisUtil.isNodeHiddenFromAT(ruleContext) || VisUtil.isNodePresentational(ruleContext) || AccNameUtil.isAccessibleNameIgnorable(ruleContext)) return null;
 
         const name_pair = AccNameUtil.computeAccessibleName(ruleContext);
         if (name_pair && name_pair.name && name_pair.name.trim().length > 0)

accessibility-checker-engine/src/v4/util/AccNameUtil.ts

@@ -481,4 +481,20 @@ export class AccNameUtil {
 
         return null;
     }
+
+    // if accessible name can be ignored for image or svg
+    public static isAccessibleNameIgnorable(elem: Element) : boolean {
+        if (!elem) return false;
+
+        const nodeName = elem.nodeName.toLowerCase();
+        if (nodeName !== 'img' && nodeName !== 'svg') return false;
+
+        let parent = elem.parentElement;
+        if (parent) {
+            // if the parent is a widget and has an aria label, then image/svg label is not necessary
+            if ((AriaUtil.isWidget(parent) || AriaUtil.containsPresentationalChildrenOnly(parent)) && AriaUtil.hasAriaLabel(parent))
+                return true; 
+        }
+        return false;
+    }
 } 

accessibility-checker-engine/src/v4/util/ClipPathUtil.ts

@@ -116,8 +116,8 @@ export class ClipPathUtil {
 
             // to prevent the bottom edge from crossing over the top edge and right edge from crossing over the left edge. 
             // for example, rect(10px 0 0 20px) is clamped to rect(10px 20px 10px 20px)
-            if (numbers[2] < numbers[0] ) numbers[2] = numbers[0];
-            if (numbers[1] < numbers[3] ) numbers[1] = numbers[3];
+            numbers[2] = Math.max(numbers[0], numbers[2]);
+            numbers[1] = Math.max(numbers[1], numbers[3])
 
             let top = parseInt(numbers[0]);
             if (isNaN(top)) {

accessibility-checker-engine/test/test.html

@@ -5,15 +5,53 @@
     <title>test case</title>
     </head>
     <body>
+      <a href="https://ibm.com">Content</a>
+      <hr style="margin-top:50px;">
+    <div>Auto Scrollable w/o tabindex</div>  
+    <section id='section1'  style="height: 100px; width: 500px; overflow-x: auto; overflow-y: auto;">
       <hr style="margin-top:50px;">
     <section id='section1'  style="height: 100px; width: 500px; overflow-x: hidden; overflow-y: hidden;">
-      <p>
-          Web Content Accessibility Guidelines (WCAG) covers a wide range of recommendations for making Web content more
-          accessible.
-      </p>
-
-  </section>
+  <div>Auto Scrollable w/o tabindex</div> 
+  <section id='section3' style="height: 100px; width: 500px; overflow-x: auto; overflow-y: auto;">
+    <h1>WCAG Abstract (no tabindex)</h1>
+    <p>
+        Web Content Accessibility Guidelines (WCAG) covers a wide range of recommendations for making Web content more
+        accessible. Following these guidelines will make content more accessible to a wider range of people with
+        disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement,
+        speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities
+        and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines
+        address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines
+        will also often make Web content more usable to users in general.
+    </p>
+</section>
+<hr style="margin-top:50px;">
+  <div>Auto Scrollable w/ tabindex='-1'</div> 
+  <section id='section3' tabindex='-1' style="height: 100px; width: 500px; overflow-x: auto; overflow-y: auto;">
+    <h1>WCAG Abstract</h1>
+    <p>
+        Web Content Accessibility Guidelines (WCAG) covers a wide range of recommendations for making Web content more
+        accessible. Following these guidelines will make content more accessible to a wider range of people with
+        disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement,
+        speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities
+        and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines
+        address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines
+        will also often make Web content more usable to users in general.
+    </p>
+</section>
+
   <hr style="margin-top:50px;">
+  <div>iframe w/o tabindex short content</div> 
+      <iframe id='section2' style="height: 100px; width: 500px; overflow-x: auto; overflow-y: auto;"
+      srcdoc="Web Content Accessibility Guidelines (WCAG) covers a wide range of recommendations for making Web content more
+      accessible." 
+
+      >
+    </iframe>
+
+    <hr style="margin-top:50px;">
+    <div>iframe w/o tabindex long content</div> 
+        <iframe id='section2' role='none' style="height: 100px; width: 500px; overflow-x: auto; overflow-y: auto;"
+        srcdoc="Web Content Accessibility Guidelines (WCAG) covers a wide range of recommendations for making Web content more
       <iframe id='section2' src='./test2.html' style="height: 100px; width: 500px; overflow-x: hidden; overflow-y: hidden;">
 
       </body>
@@ -26,14 +64,29 @@
     <h1>WCAG Abstract</h1>
     <p>
         Web Content Accessibility Guidelines (WCAG) covers a wide range of recommendations for making Web content more
+
+        will also often make Web content more usable to users in general." 
+
+        >
+      </iframe>
+
+      <hr style="margin-top:50px;">
+    <div>iframe w/ tabindex='-1'</div> 
+        <iframe id='section2' tabindex='-1' style="height: 100px; width: 500px; overflow-x: auto; overflow-y: auto;"
+        srcdoc="Web Content Accessibility Guidelines (WCAG) covers a wide range of recommendations for making Web content more
         accessible. Following these guidelines will make content more accessible to a wider range of people with
         disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement,
         speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities
         and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines
         address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines
-        will also often make Web content more usable to users in general.
-    </p>
-</section>
+        will also often make Web content more usable to users in general." 
+
+        >
+      </iframe>
+
+      <iframe role='none' src="./tinker.html">
+      </iframe>
+
 
 <hr style="margin-top:50px;">
 <button aria-label="a test button">
@@ -49,73 +102,24 @@ <h1>WCAG Abstract</h1>
 <button aria-label="a test nutton"><img src="http://thinkingstiff.com/images/matt.jpg" alt=""></button>
 <button aria-label="a test nutton"><img src="http://thinkingstiff.com/images/matt.jpg" role="none"></button>
 
-<a href="http://ibm.com"><img src="http://thinkingstiff.com/images/matt.jpg" />Here</a>
-
-<a href="http://ibm.com"><img src="http://thinkingstiff.com/images/matt.jpg" alt="image" /></a>
+        will also often make Web content more usable to users in general.
+    </p>
+</section>
 
-<ol>
-  <li>Option 1<img src="http://thinkingstiff.com/images/matt.jpg"></li>
-  <li>Option 2<img src="http://thinkingstiff.com/images/matt.jpg"></li>
-</ol>
+<hr style="margin-top:50px;">
+<button aria-label="a test button">
+	<svg>
+	</svg>
+</button>
 
+<button aria-label="a test nutton"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
+<button><img src="http://thinkingstiff.com/images/matt.jpg" alt="an image"></button>
+<button><img src="http://thinkingstiff.com/images/matt.jpg">Submit</button>
+<button><img src="http://thinkingstiff.com/images/matt.jpg" alt="">Submit</button>
 
-    </main>
+<button aria-label="a test nutton"><img src="http://thinkingstiff.com/images/matt.jpg" alt=""></button>
+<button aria-label="a test nutton"><img src="http://thinkingstiff.com/images/matt.jpg" role="none"></button>
 
-    <script>
-        UnitTest = {
-            ruleIds: ["element_scrollable_tabbable", "element_tabbable_role_valid"],
-            results: [  
-            {
-            "ruleId": "element_scrollable_tabbable",
-            "value": [
-              "INFORMATION",
-              "PASS"
-            ],
-            "path": {
-              "dom": "/html[1]/body[1]/section[1]",
-              "aria": "/document[1]"
-            },
-            "reasonId": "pass_tabbable",
-            "message": "The scrollable element is tabbable",
-            "messageArgs": [],
-            "apiArgs": [],
-            "category": "Accessibility"
-          },
-          {
-            "ruleId": "element_tabbable_role_valid",
-            "value": [
-              "INFORMATION",
-              "FAIL"
-            ],
-            "path": {
-              "dom": "/html[1]/body[1]/section[2]",
-              "aria": "/document[1]"
-            },
-            "reasonId": "fail_no_valid_role",
-            "message": "The tabbable element does not have a valid widget role",
-            "messageArgs": [],
-            "apiArgs": [],
-            "category": "Accessibility"
-          },
-          {
-            "ruleId": "element_tabbable_role_valid",
-            "value": [
-              "INFORMATION",
-              "FAIL"
-            ],
-            "path": {
-              "dom": "/html[1]/body[1]/section[3]",
-              "aria": "/document[1]"
-            },
-            "reasonId": "fail_no_valid_role",
-            "message": "The tabbable element does not have a valid widget role",
-            "messageArgs": [],
-            "apiArgs": [],
-            "category": "Accessibility"
-          }
-        ]
-        }
-    </script>
 </body>
 
 </html>