Skip to content

Commit 17025e0

Browse files
authored
Expect fill style to be handled (#4)
## Describe your changes `fill` can be set via css alternatively to setting via the html fill attribute. ## Checklist before requesting a review - [x] I have performed a self-review of my code - [x] If it is a core feature, I have added thorough tests.
1 parent 62e23b3 commit 17025e0

File tree

2 files changed

+6
-2
lines changed

2 files changed

+6
-2
lines changed

src/ReactColorA11y.cy.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ describe('ReactColorA11y', () => {
6363
<ReactColorA11y flipBlackAndWhite>
6464
<svg height={100} width={100}>
6565
{expectedColorMappings.map(({ original }, index) => (
66-
<circle id={index.toString()} key={original} cx={50} cy={50} r={50} stroke={original} fill={original} style={{ stroke: original }} />
66+
<circle id={index.toString()} key={original} cx={50} cy={50} r={50} stroke={original} fill={original} style={{ stroke: original, fill: original }} />
6767
))}
6868
</svg>
6969
</ReactColorA11y>
@@ -76,6 +76,7 @@ describe('ReactColorA11y', () => {
7676
cy.get(`#${index}`).then(($element) => {
7777
expectColorsToMatch($element.attr('fill'), lighter);
7878
expectColorsToMatch($element.attr('stroke'), lighter);
79+
expectColorsToMatch($element.css('fill'), lighter);
7980
expectColorsToMatch($element.css('stroke'), lighter);
8081
});
8182
});

src/ReactColorA11y.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -153,10 +153,13 @@ const ReactColorA11y: React.FunctionComponent<ReactColorA11yProps> = ({
153153
element.setAttribute('stroke', calculateA11yColor(backgroundColor, strokeColor))
154154
}
155155

156-
const { color: computedColor, stroke: computedStroke } = getComputedStyle(element)
156+
const { color: computedColor, stroke: computedStroke, fill: computedFill } = getComputedStyle(element)
157157
if (computedColor !== null) {
158158
element.style.color = calculateA11yColor(backgroundColor, computedColor)
159159
}
160+
if (computedFill !== null) {
161+
element.style.fill = calculateA11yColor(backgroundColor, computedFill)
162+
}
160163
if (computedStroke !== null) {
161164
element.style.stroke = calculateA11yColor(backgroundColor, computedStroke)
162165
}

0 commit comments

Comments
 (0)