diff --git a/site/content/docs/06-accessibility-warnings.md b/site/content/docs/06-accessibility-warnings.md index b151349e67..ab9225047d 100644 --- a/site/content/docs/06-accessibility-warnings.md +++ b/site/content/docs/06-accessibility-warnings.md @@ -190,7 +190,7 @@ export default { 'label-has-associated-control': { labelComponents: ['CustomInputLabel'], controlComponents: ['CustomInput'], - depth: 3, + depth: 5, } } } @@ -200,7 +200,7 @@ export default { - `labelComponents` is a list of Svelte component names that should be checked for an associated control. - `controlComponents` is a list of Svelte component names that will output an input element. -- `depth` (default 3, max 25) is an integer that determines how deep within the label element the rule should look for an element to determine if the label element has associated control. +- `depth` (default 5, max 25) is an integer that determines how deep within the label element the rule should look for an element to determine if the label element has associated control. --- diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts index 0dc78ad00c..14a0a6c78f 100644 --- a/src/compiler/compile/utils/a11y.ts +++ b/src/compiler/compile/utils/a11y.ts @@ -179,7 +179,7 @@ export function contains_input_child( rule_options: CompileOptions['a11y']['rules']['label-has-associated-control'] ): boolean { // magic number inspired from https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/src/rules/label-has-associated-control.js - const max_depth = Math.min(rule_options?.depth ?? 3, 25); + const max_depth = Math.min(rule_options?.depth ?? 5, 25); const additional_component_names = rule_options?.controlComponents; function traverse_children(