Skip to content

Commit

Permalink
essential fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@aubreyquinn
aubreyquinn committed Nov 8, 2024
1 parent ce4749e commit a7b7c4c
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 46 deletions.
6 changes: 6 additions & 0 deletions lib/rules/input-components-require-accessible-name.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,12 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
return;
}

console.log("aria-label::: ", hasNonEmptyProp(node.attributes, "aria-label"));
console.log("hasFieldParent::: ", hasFieldParent(context));
console.log("isInsideLabelTag::: ", isInsideLabelTag(context));
console.log("hasAssociatedLabelViaHtmlFor::: ", hasAssociatedLabelViaHtmlFor(node, context));
console.log("hasAssociatedLabelViaAriaLabelledBy::: ", hasAssociatedLabelViaAriaLabelledBy(node, context));

// wrapped in Label tag, labelled with htmlFor, labelled with aria-labelledby
if (
hasNonEmptyProp(node.attributes, "aria-label") ||
Expand Down
46 changes: 36 additions & 10 deletions lib/util/labelUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,17 @@ const hasLabelWithHtmlForId = (idValue: string, context: TSESLint.RuleContext<st
return false;
}
const sourceCode = context.getSourceCode();
const regex = /<Label[^>]*htmlFor[^>]*=[^>]*[{"|{'|"|']([^>'"}]*)['|"|'}|"}][^>]*>/gim;
const matches = regex.exec(sourceCode.text);
return !!matches && matches.some(match => match === idValue);
console.log("sourceCode", sourceCode.getText()); // Optional debugging

const regex = /<(Label|label)[^>]*htmlFor[^>]*=["{']([^"'{}]*)["'}]/gi;
let match;
while ((match = regex.exec(sourceCode.text)) !== null) {
// `match[2]` contains the `htmlFor` attribute value
if (match[2] === idValue) {
return true;
}
}
return false;
};

/**
Expand All @@ -59,10 +67,16 @@ const hasLabelWithHtmlId = (idValue: string, context: TSESLint.RuleContext<strin
}
const sourceCode = context.getSourceCode();
console.log("sourceCode", sourceCode.getText());
const regex = /<Label[^>]*id[^>]*=[^>]*[{"|{'|"|']([^>'"}]*)['|"|'}|"}][^>]*>/gim;

const matches = regex.exec(sourceCode.text);
return !!matches && matches.some(match => match === idValue);
const regex = /<(Label|label)[^>]*id[^>]*=["{']([^"'{}]*)["'}]/gi;
let match;
while ((match = regex.exec(sourceCode.text)) !== null) {
// match[2] should contain the id value
if (match[2] === idValue) {
return true;
}
}
return false;
};

/***
Expand All @@ -79,10 +93,18 @@ const hasOtherElementWithHtmlId = (idValue: string, context: TSESLint.RuleContex
return false;
}
const sourceCode: string = context.getSourceCode().text;
const regex = /<(div|span|p|h[1-6])[^>]*id[^>]*=[^>]*[{"|{'|"|']([^>'"}]*)['|"|'}|"}][^>]*>/gim;

const matches = regex.exec(sourceCode);
return !!matches && matches.some(match => match === idValue);
console.log("sourceCode", sourceCode); // For debugging, if needed

// Adjusted regex pattern for elements with `id` attribute
const regex = /<(div|span|p|h[1-6])[^>]*id[^>]*=["{']([^"'{}]*)["'}]/gi;
let match;
while ((match = regex.exec(sourceCode)) !== null) {
// `match[2]` contains the `id` value in each matched element
if (match[2] === idValue) {
return true;
}
}
return false;
};

/**
Expand All @@ -99,6 +121,7 @@ const hasAssociatedLabelViaAriaLabelledBy = (
context: TSESLint.RuleContext<string, unknown[]>
): boolean => {
const _hasAriaLabelledBy = hasNonEmptyProp(openingElement.attributes, "aria-labelledby");
console.log(" --- _hasAriaLabelledBy::", _hasAriaLabelledBy);
const prop = getProp(openingElement.attributes as unknown as JSXOpeningElement["attributes"], "aria-labelledby");

// Check if the prop exists before passing it to getPropValue
Expand All @@ -110,7 +133,10 @@ const hasAssociatedLabelViaAriaLabelledBy = (
}

const hasHtmlId = hasLabelWithHtmlId(idValue, context);
console.log(" --- hasHtmlId::", hasHtmlId);

const hasElementWithHtmlId = hasOtherElementWithHtmlId(idValue, context);
console.log(" --- hasElementWithHtmlId:::", hasElementWithHtmlId);

return _hasAriaLabelledBy && (hasHtmlId || hasElementWithHtmlId);
};
Expand Down
75 changes: 39 additions & 36 deletions tests/lib/rules/input-components-require-accessible-name.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,39 +31,40 @@ function generateTestCases(labelComponent: string, componentName: string) {
function generateTestCasesLabel(labelComponent: string, componentName: string) {
return {
valid: [
`<><${labelComponent} htmlFor="some-id">Some Label</${labelComponent}><${componentName} id="some-id"/></>`,
`<><${labelComponent} id="test-span">Some Label</${labelComponent}><${componentName} id="some-id" aria-labelledby="test-span"/></>`,
`<${labelComponent}>test</${labelComponent}>`,
`<${labelComponent}>test<${componentName} /></${labelComponent}>`,
`<${labelComponent}>test<SomeNesting><${componentName} /></SomeNesting></${labelComponent}>`,
`<Field label="this is my label"><${componentName} /></Field>`,
`<${componentName} aria-label="this is my component" />`
// `<><${labelComponent} htmlFor="some-id">Some Label</${labelComponent}><${componentName} id="some-id"/></>`,
// `<><${labelComponent} id="test-span">Some Label</${labelComponent}><${componentName} id="some-id" aria-labelledby="test-span"/></>`,
// `<${labelComponent}>test</${labelComponent}>`,
// `<${labelComponent}>test<${componentName} /></${labelComponent}>`,
// `<${labelComponent}>test<SomeNesting><${componentName} /></SomeNesting></${labelComponent}>`,
// `<Field label="this is my label"><${componentName} /></Field>`,
// `<${componentName} aria-label="this is my component" />`,
`<><${labelComponent} id="paragraph_label-2">type here</${labelComponent}><${componentName} aria-labelledby="paragraph_label-2"></${componentName}><${labelComponent} id="paragraph_label-3">type here</${labelComponent}><${componentName} aria-labelledby="paragraph_label-3"></${componentName}></>`
],
invalid: [
{
code: `<><${componentName}/></>`,
errors: [{ messageId: "missingLabelOnInput" }]
},
{
code: `<><${labelComponent}/><${componentName}/></>`,
errors: [{ messageId: "missingLabelOnInput" }]
},
{
code: `<><${labelComponent} htmlFor="id"/><${componentName} /></>`,
errors: [{ messageId: "missingLabelOnInput" }]
},
{
code: `<${componentName} id="some-id"/>`,
errors: [{ messageId: "missingLabelOnInput" }]
},
{
code: `<><${labelComponent}>Some Label</${labelComponent}><${componentName} id="some-id"/></>`,
errors: [{ messageId: "missingLabelOnInput" }]
},
{
code: `<><Field></Field><${componentName} id="some-id"/></>`,
errors: [{ messageId: "missingLabelOnInput" }]
}
// {
// code: `<><${componentName}/></>`,
// errors: [{ messageId: "missingLabelOnInput" }]
// },
// {
// code: `<><${labelComponent}/><${componentName}/></>`,
// errors: [{ messageId: "missingLabelOnInput" }]
// },
// {
// code: `<><${labelComponent} htmlFor="id"/><${componentName} /></>`,
// errors: [{ messageId: "missingLabelOnInput" }]
// },
// {
// code: `<${componentName} id="some-id"/>`,
// errors: [{ messageId: "missingLabelOnInput" }]
// },
// {
// code: `<><${labelComponent}>Some Label</${labelComponent}><${componentName} id="some-id"/></>`,
// errors: [{ messageId: "missingLabelOnInput" }]
// },
// {
// code: `<><Field></Field><${componentName} id="some-id"/></>`,
// errors: [{ messageId: "missingLabelOnInput" }]
// }
]
};
}
Expand All @@ -72,13 +73,15 @@ function generateAllTestCases() {
const testSets: any[] = [];

// For each input-based component, generate test cases
applicableComponents.forEach(components => {
elementsUsedAsLabels.forEach(labels => {
testSets.push(generateTestCases(labels, components));
});
["Input"].forEach(components => {
// applicableComponents.forEach(components => {
// elementsUsedAsLabels.forEach(labels => {
// testSets.push(generateTestCases(labels, components));
// });

// Also generate test cases for each native DOM element
labelBasedComponents.forEach(labels => {
["Label"].forEach(labels => {
// labelBasedComponents.forEach(labels => {
testSets.push(generateTestCasesLabel(labels, components));
});
});
Expand Down
13 changes: 13 additions & 0 deletions tests/lib/rules/utils/labelUtils.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,19 @@ describe("labelUtils", () => {
expect(result).toBe(true);
});

test("returns true if aria-labelledby references an existing label element without duplicates", () => {
const customContext: TSESLint.RuleContext<string, unknown[]> = {
getSourceCode: () => ({
getText: () => "<Label id='existing-label-id'>Test Label</Label><Label id='existing-label-id-2'>Test Label</Label>",
text: () => "<Label id='existing-label-id'>Test Label</Label>"
})
} as unknown as TSESLint.RuleContext<string, unknown[]>;

openingElement.attributes = [createJSXAttribute("aria-labelledby", "existing-label-id")];
const result = hasAssociatedLabelViaAriaLabelledBy(openingElement, customContext);
expect(result).toBe(true);
});

test("returns true if aria-labelledby references an existing non-label element", () => {
const customContext: TSESLint.RuleContext<string, unknown[]> = {
getSourceCode: () => ({
Expand Down

0 comments on commit a7b7c4c

Please sign in to comment.