-
Notifications
You must be signed in to change notification settings - Fork 0
Open
Description
checkContrastForChildren(element = this.containerElement) {
const children = element.children;
for (const child of children) {
const isValidElement = !child.hasAttribute("disabled") && !child.hasAttribute("hidden");
if (isValidElement && !child.hasAttribute("data-color-contrast")) {
const hasDirectText = Array.from(child.childNodes).some(
(node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== "",
);
const hasText = "value" in child ? child.value !== "" : hasDirectText;
if (hasText) {
const childStyle = this.colorUtil.getElementStyle(child);
const contrast = this.calculateContrastRatio(
this.colorUtil.getEffectiveBackgroundColor(child),
childStyle.color,
);
// check whether the element matches the criteria or not
const isLargeFont = childStyle.fontSize <= this.criteriaInfo.fontSize;
const isBold = childStyle.fontWeight <= this.criteriaInfo.fontWeight;
this.contrastThreshold = isLargeFont && isBold ? 4.5 : 3.1;
if (contrast < this.contrastThreshold) {
const currEleStyle = window.getComputedStyle(child);
child.setAttribute("data-color-contrast", contrast);
child.setAttribute("data-border-width", currEleStyle.borderWidth);
child.setAttribute("data-border-style", currEleStyle.borderStyle);
child.setAttribute("data-border-color", currEleStyle.borderColor);
child.style.border = "2px solid red";
const childStyleVal = {
class: `${child.tagName.toLowerCase()}.${child.classList.value}`,
bgColor: this.colorUtil.getEffectiveBackgroundColor(child),
color: childStyle.color,
fontSize: childStyle.fontSize,
fontWeight: childStyle.fontWeight,
contrastRatio: contrast,
content: child.textContent,
};
console.table(childStyleVal);
} else {
if (child.hasAttribute("data-border-width")) {
const borderWidth = child.attributes["data-border-width"];
const borderStyle = child.attributes["data-border-style"];
const borderColor = child.attributes["data-border-color"];
child.style.border = `${borderWidth} ${borderStyle} ${borderColor}`;
}
}
}
if (child.children.length > 0) {
this.checkContrastForChildren(child);
}
}
}
}
provide element info as an obj
Metadata
Metadata
Assignees
Labels
No labels