fix(engine): fix color contrast for text with graphic background and update role and attribute allowances for body/search/button/input/summary/li elements per ARIA in HTML updates

.gitignore

@@ -35,3 +35,4 @@ jspm_packages
 .gz
 .tar
 accessibility-checker-engine/karma.conf.js
+karma-accessibility-checker/package.json

accessibility-checker-engine/src/v2/aria/ARIADefinitions.ts

@@ -1710,6 +1710,7 @@ export class ARIADefinitions {
         "body": {
             implicitRole: ["generic"],
             validRoles: null,
+            otherDisallowedAriaAttributes: ['aria-hidden'],
             globalAriaAttributesValid: true
         },
         "br": {
@@ -1720,7 +1721,7 @@ export class ARIADefinitions {
         },
         "button": {
             implicitRole: ["button"],
-            validRoles: ["checkbox", "combobox", "link", "menuitem", "menuitemcheckbox", "menuitemradio", "option", "radio", "switch", "tab"],
+            validRoles: ["checkbox", "combobox", "gridcell", "link", "menuitem", "menuitemcheckbox", "menuitemradio", "option", "radio", "slider", "switch", "tab", "treeitem"],
             globalAriaAttributesValid: true
         },
         "canvas": {
@@ -1906,11 +1907,6 @@ export class ARIADefinitions {
             validRoles: null,
             globalAriaAttributesValid: true
         },
-        "li": {
-            implicitRole: ["listitem"],
-            validRoles: ["menuitem", "menuitemcheckbox", "menuitemradio", "none", "option", "presentation", "radio", "separator", "tab", "treeitem"],
-            globalAriaAttributesValid: true
-        },
         "link": {
             implicitRole: null,
             validRoles: null,
@@ -2051,6 +2047,11 @@ export class ARIADefinitions {
             validRoles: null,
             globalAriaAttributesValid: false
         },
+        "search": {
+            implicitRole: ['search'],
+            validRoles: ['search', 'form', 'group', 'none', 'presentation', 'region'],
+            globalAriaAttributesValid: true
+        },
         "slot": {
             implicitRole: null,
             validRoles: null,
@@ -2086,11 +2087,6 @@ export class ARIADefinitions {
             validRoles: ["any"],
             globalAriaAttributesValid: true
         },
-        "summary": {
-            implicitRole: ["button"],
-            validRoles: null,
-            globalAriaAttributesValid: true
-        },
         "sup": {
             implicitRole: ["superscript"],
             validRoles: ["any"],
@@ -2294,7 +2290,7 @@ export class ARIADefinitions {
         "input": {
             "button": {
                 implicitRole: ["button"],
-                validRoles: ["checkbox", "combobox", "link", "menuitem", "menuitemcheckbox", "menuitemradio", "option", "radio", "switch", "tab"],
+                validRoles: ["checkbox", "combobox", "gridcell", "link", "menuitem", "menuitemcheckbox", "menuitemradio", "option", "radio", "slider", "switch", "tab", "treeitem"],
                 globalAriaAttributesValid: true
             },
             "checkbox-with-aria-pressed": {
@@ -2358,7 +2354,7 @@ export class ARIADefinitions {
             },
             "image": {
                 implicitRole: ["button"],
-                validRoles: ["link", "menuitem", "menuitemcheckbox", "menuitemradio", "radio", "switch"],
+                validRoles: ["checkbox", "gridcell", "link", "menuitem", "menuitemcheckbox", "menuitemradio", "option", "radio", "slider", "switch", "tab", "treeitem"],
                 globalAriaAttributesValid: true
             },
             "month": {
@@ -2396,7 +2392,7 @@ export class ARIADefinitions {
             },
             "reset": {
                 implicitRole: ["button"],
-                validRoles: null,
+                validRoles: ["checkbox", "combobox", "gridcell", "link", "menuitem", "menuitemcheckbox", "menuitemradio", "option", "radio", "slider", "switch", "tab", "treeitem"],
                 globalAriaAttributesValid: true
             },
             "search-no-list": {
@@ -2412,7 +2408,7 @@ export class ARIADefinitions {
             },
             "submit": {
                 implicitRole: ["button"],
-                validRoles: null,
+                validRoles: ["checkbox", "combobox", "gridcell", "link", "menuitem", "menuitemcheckbox", "menuitemradio", "option", "radio", "slider", "switch", "tab", "treeitem"],
                 globalAriaAttributesValid: true
             },
             "tel-no-list": {
@@ -2476,6 +2472,18 @@ export class ARIADefinitions {
                 globalAriaAttributesValid: true
             }
         },
+        "li": {
+            "child-of-list-role": {
+                implicitRole: ['listitem'],
+                validRoles: null,
+                globalAriaAttributesValid: true
+            },
+            "no-child-of-list-role": {
+                implicitRole: ['listitem'],
+                validRoles: ["any"],
+                globalAriaAttributesValid: true
+            }
+        },
         "section": {
             "with-name": {
                 implicitRole: ["region"],
@@ -2504,6 +2512,19 @@ export class ARIADefinitions {
                 otherDisallowedAriaAttributes: ["aria-multiselectable"]
             }
         },
+        "summary": {
+            "first-summary-of-detail": {
+                implicitRole: null,
+                validRoles: null,
+                globalAriaAttributesValid: true,
+                otherAllowedAriaAttributes: ["aria-disabled", "aria-haspopup"]
+            },
+            "no-first-summary-of-detail": {
+                implicitRole: null,
+                validRoles: ["any"],
+                globalAriaAttributesValid: true
+            }
+        },
         "tbody": {
             "des-table": {
                 implicitRole: ["rowgroup"],

accessibility-checker-engine/src/v2/checker/accessibility/util/legacy.ts

@@ -21,6 +21,7 @@ import { DOMWalker } from "../../../dom/DOMWalker";
 import { VisUtil } from "../../../dom/VisUtil";
 import { FragmentUtil } from "./fragment";
 import { getDefinedStyles } from "../../../../v4/util/CSSUtil";
+import { DOMUtil } from "../../../dom/DOMUtil";
 
 export class RPTUtil {
 
@@ -376,7 +377,15 @@ export class RPTUtil {
         "video": function (element) {
             return element.hasAttribute("controls");
         },
-        "summary": true
+        "summary": function (element) {
+            // first summary child of a details element is automatically focusable 
+            return element.parentElement && element.parentElement.nodeName.toLowerCase() === 'details' 
+                   && DOMUtil.sameNode([...element.parentElement.children].filter(elem=>elem.nodeName.toLowerCase() === 'summary')[0], element);
+        },
+        "details": function (element) {
+            //details element without a direct summary child is automatically focusable
+            return element.children && [...element.children].filter(elem=>elem.nodeName.toLowerCase() === 'summary').length === 0;
+        }
     }
 
     public static wordCount(str) : number {
@@ -2543,14 +2552,21 @@ export class RPTUtil {
                             RPTUtil.attributeNonEmpty(ruleContext, "list") ? tagProperty = specialTagProperties["text-with-list"] : tagProperty = specialTagProperties["text-no-list"];
                         }
                         break;
+                    case "li":
+                        specialTagProperties = ARIADefinitions.documentConformanceRequirementSpecialTags["li"];
+                        if (ruleContext.parentElement && RPTUtil.hasRoleInSemantics(ruleContext.parentElement, "list"))
+                            tagProperty = specialTagProperties["child-of-list-role"];
+                        else
+                            tagProperty = specialTagProperties["no-child-of-list-role"];
+                        break;
                     case "section":
                         name = ARIAMapper.computeName(ruleContext);
                         if (name && name.trim().length > 0) {
                             tagProperty = specialTagProperties["with-name"];
                         } else {
                             tagProperty = specialTagProperties["without-name"];
                         }
-                        break;
+                        break;    
                     case "select":
                         specialTagProperties = ARIADefinitions.documentConformanceRequirementSpecialTags["select"];
                         if (ruleContext.hasAttribute("multiple") ||
@@ -2559,6 +2575,14 @@ export class RPTUtil {
                         else
                             tagProperty = specialTagProperties["no-multiple-attr-size-gt1"];
                         break;
+                    case "summary":
+                        specialTagProperties = ARIADefinitions.documentConformanceRequirementSpecialTags["summary"];
+                        if (ruleContext.parentElement && ruleContext.parentElement.nodeName.toLowerCase() === 'details' 
+                            && DOMUtil.sameNode([...ruleContext.parentElement.children].filter(elem=>elem.nodeName.toLowerCase() === 'summary')[0], ruleContext))
+                            tagProperty = specialTagProperties["first-summary-of-detail"];
+                        else
+                            tagProperty = specialTagProperties["no-first-summary-of-detail"];
+                        break;
                     case "tbody":
                     case "td":
                     case "tr":

accessibility-checker-engine/src/v2/dom/ColorUtil.ts

@@ -225,6 +225,7 @@ export class ColorUtil {
         var retVal = {
             "hasGradient": false,
             "hasBGImage": false,
+            "textShadow": false,
             "fg": null,
             "bg": null
         };
@@ -267,7 +268,7 @@ export class ColorUtil {
                         overallWorst = worstColor;
                     }
                 }
-                return overallWorst;
+                return overallWorst; // return the darkest color
             } catch (e) {
                 console.log(e);
             }
@@ -285,7 +286,7 @@ export class ColorUtil {
             // cStyle is the computed style of this layer
             var cStyle = win.getComputedStyle(procNext);
             if (cStyle === null) continue;
-
+            
             // thisBgColor is the color of this layer or null if the layer is transparent
             var thisBgColor = null;
             if (cStyle.backgroundColor && cStyle.backgroundColor != "transparent" && cStyle.backgroundColor != "rgba(0, 0, 0, 0)") {
@@ -300,13 +301,19 @@ export class ColorUtil {
                         if (!gradColors[i].length) {
                             gradColors.splice(i--, 1);
                         } else {
-                            gradColorComp.push(ColorUtil.Color(gradColors[i]));
+                            let colorComp = ColorUtil.Color(gradColors[i]);
+                            if (colorComp.alpha !== undefined && colorComp.alpha < 1) {
+                                // mix the grdient bg color wit parent bg if alpha < 1
+                                let compStackBg = thisStackBG || priorStackBG;
+                                colorComp = colorComp.getOverlayColor(compStackBg);
+                            }
+                            gradColorComp.push(colorComp);
                         }
                     }
                     thisBgColor = guessGradColor(gradColorComp, thisStackBG || priorStackBG, fg);
                 }
             }
-
+            
             // Handle non-solid opacity
             if (thisStackOpacity === null || (cStyle.opacity && cStyle.opacity.length > 0 && parseFloat(cStyle.opacity) < 1)) {
                 // New stack, reset
@@ -370,6 +377,10 @@ export class ColorUtil {
         }
         retVal.fg = fg;
         retVal.bg = priorStackBG;
+
+        if (cStyle.textShadow && cStyle.textShadow !== 'none')
+            retVal.textShadow = true;
+
         return retVal;
     } catch (err) {
         // something happened, then...
@@ -413,10 +424,10 @@ export class ColorObj {
 
     contrastRatio(bgColor : ColorObj) { 
         let fgColor: ColorObj = this;
-
+        
         if (typeof (this.alpha) != "undefined")
             fgColor = this.getOverlayColor(bgColor);
-
+             
         let lum1 = fgColor.relativeLuminance();
         if (!bgColor.relativeLuminance) {
             let s = "";

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

@@ -107,7 +107,6 @@ export * from "./heading_content_exists"
 export * from "./heading_markup_misuse"
 export * from "./html_lang_exists"
 export * from "./html_skipnav_exists"
-export * from "./IBMA_Color_Contrast_WCAG2AA_PV"
 export * from "./iframe_interactive_tabbable"
 export * from "./imagebutton_alt_exists"
 export * from "./imagemap_alt_exists"