update issue counting and threshold checks in accessibility components

Author: LadyBluenotes

packages/devtools-a11y/src/core/components/IssueList.tsx

@@ -79,14 +79,10 @@ export function A11yIssueList(props: A11yIssueListProps) {
       <div class={styles().summaryGrid}>
         <For each={IMPACTS}>
           {(impact) => {
-            const count = () =>
-              ally.allyResult.audit?.issues.reduce(
-                (count, issue) =>
-                  issue.impact === impact && issue.meetsThreshold
-                    ? count + 1
-                    : count,
-                0,
-              ) || 0
+            // Count issues from the reactive filteredIssues memo so counts update when config.threshold changes
+            const issuesForImpact = () =>
+              ally.filteredIssues().filter((issue) => issue.impact === impact)
+            const count = () => issuesForImpact().length || 0
 
             const active = () => ally.impactKey() === impact
 

packages/devtools-a11y/src/core/components/Settings.tsx

@@ -66,9 +66,9 @@ export function A11ySettingsOverlay(props: A11ySettingsOverlayProps) {
                 { value: 'moderate', label: 'Moderate' },
                 { value: 'minor', label: 'Minor' },
               ]}
-              onChange={(value: string) =>
+              onChange={(value: string) =>{
                 setConfig('threshold', value as SeverityThreshold)
-              }
+              }}
             />
             <Select<RuleSetPreset>
               label="Rule Set"
@@ -83,9 +83,9 @@ export function A11ySettingsOverlay(props: A11ySettingsOverlayProps) {
                 { value: 'best-practice', label: 'Best Practice' },
                 { value: 'all', label: 'All Rules' },
               ]}
-              onChange={(value: string) =>
+              onChange={(value: string) => {
                 setConfig('ruleSet', value as RuleSetPreset)
-              }
+              }}
             />
           </div>
         </div>

packages/devtools-a11y/src/core/components/Shell.tsx

@@ -39,7 +39,7 @@ export function Shell() {
 
           <Show when={allyResult.state === 'done' && filteredIssues()}>
             <span class={styles().headerSub}>
-              {`${allyResult.audit?.issues.length} issue${allyResult.audit?.issues.length !== 1 ? 's' : ''}`}
+              {`${filteredIssues().length} issue${filteredIssues().length !== 1 ? 's' : ''}`}
             </span>
           </Show>
         </div>

packages/devtools-a11y/src/core/utils/ally-audit.utils.ts

@@ -76,7 +76,7 @@ const RULE_SET_CONFIGS: Record<RuleSetPreset, Partial<RunOptions>> = {
 /**
  * Check if an impact level meets or exceeds the threshold
  */
-function meetsThreshold(
+export function meetsThreshold(
   impact: SeverityThreshold | null | undefined,
   threshold: SeverityThreshold,
 ): boolean {
@@ -268,7 +268,7 @@ export async function runAudit(
         ? document.querySelector(context) || document
         : context
 
-    const customIssues = runCustomRules(contextElement, customRulesConfig)
+    const customIssues = runCustomRules(contextElement, customRulesConfig, threshold)
 
     // Merge all issues
     const allIssues = [...axeIssues, ...customIssues]

packages/devtools-a11y/src/core/utils/custom-audit.utils.ts

@@ -8,6 +8,8 @@
  */
 
 import type { A11yIssue, CustomRulesConfig } from '../types/types'
+import type { SeverityThreshold } from '../types/types'
+import { meetsThreshold } from './ally-audit.utils'
 
 /**
  * Interactive HTML elements that can receive focus and have implicit roles
@@ -332,6 +334,7 @@ function getSelector(element: Element): string {
  */
 function checkClickHandlerOnNonInteractive(
   context: Document | Element = document,
+  threshold: SeverityThreshold = 'serious',
 ): Array<A11yIssue> {
   const issues: Array<A11yIssue> = []
   const timestamp = Date.now()
@@ -385,7 +388,7 @@ function checkClickHandlerOnNonInteractive(
             html: element.outerHTML.slice(0, 200),
           },
         ],
-        meetsThreshold: true,
+        meetsThreshold: meetsThreshold('serious', threshold),
         timestamp,
       })
     } else if (hasFocus && !hasKeyboard) {
@@ -407,7 +410,7 @@ function checkClickHandlerOnNonInteractive(
             html: element.outerHTML.slice(0, 200),
           },
         ],
-        meetsThreshold: true,
+        meetsThreshold: meetsThreshold('moderate', threshold),
         timestamp,
       })
     }
@@ -424,9 +427,12 @@ function checkClickHandlerOnNonInteractive(
  */
 function checkMouseOnlyEvents(
   context: Document | Element = document,
+  threshold: SeverityThreshold = 'serious',
 ): Array<A11yIssue> {
   const issues: Array<A11yIssue> = []
   const timestamp = Date.now()
+  // default threshold will be provided by runCustomRules
+  // We'll accept threshold by adding a parameter in the function signature
 
   // Build selector for elements with mouse events
   const mouseEventSelectors = MOUSE_ONLY_EVENTS.map(
@@ -473,7 +479,7 @@ function checkMouseOnlyEvents(
           html: element.outerHTML.slice(0, 200),
         },
       ],
-      meetsThreshold: true,
+      meetsThreshold: meetsThreshold('serious', threshold),
       timestamp,
     })
   }
@@ -489,6 +495,7 @@ function checkMouseOnlyEvents(
  */
 function checkStaticElementInteraction(
   context: Document | Element = document,
+  threshold: SeverityThreshold = 'serious',
 ): Array<A11yIssue> {
   const issues: Array<A11yIssue> = []
   const timestamp = Date.now()
@@ -533,7 +540,7 @@ function checkStaticElementInteraction(
             html: element.outerHTML.slice(0, 200),
           },
         ],
-        meetsThreshold: true,
+        meetsThreshold: meetsThreshold('serious', threshold),
         timestamp,
       })
     }
@@ -562,7 +569,7 @@ function checkStaticElementInteraction(
             html: element.outerHTML.slice(0, 200),
           },
         ],
-        meetsThreshold: true,
+        meetsThreshold: meetsThreshold('moderate', threshold),
         timestamp,
       })
     }
@@ -577,6 +584,7 @@ function checkStaticElementInteraction(
 export function runCustomRules(
   context: Document | Element = document,
   config: CustomRulesConfig = {},
+  threshold: SeverityThreshold = 'serious',
 ): Array<A11yIssue> {
   const {
     clickHandlerOnNonInteractive = true,
@@ -587,15 +595,15 @@ export function runCustomRules(
   const issues: Array<A11yIssue> = []
 
   if (clickHandlerOnNonInteractive) {
-    issues.push(...checkClickHandlerOnNonInteractive(context))
+    issues.push(...checkClickHandlerOnNonInteractive(context, threshold))
   }
 
   if (mouseOnlyEventHandlers) {
-    issues.push(...checkMouseOnlyEvents(context))
+    issues.push(...checkMouseOnlyEvents(context, threshold))
   }
 
   if (staticElementInteraction) {
-    issues.push(...checkStaticElementInteraction(context))
+    issues.push(...checkStaticElementInteraction(context, threshold))
   }
 
   return issues