Skip to content

Commit

Permalink
handle missing style prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@lounsbrough
lounsbrough committed Dec 12, 2023
1 parent 88be4c7 commit 5a57920
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 67 deletions.
114 changes: 57 additions & 57 deletions src/ReactColorA11y.cy.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/// <reference types="Cypress" />
/// <reference types="../cypress/cypress.d.ts" />

import React from 'react';
import { colord } from 'colord';
import ReactColorA11y from './ReactColorA11y';
import React from 'react'
import { colord } from 'colord'
import ReactColorA11y from './ReactColorA11y'

const expectColorsToMatch = (color1: string, color2: string) => {
expect(colord(color1).toHex()).to.be.equal(colord(color2).toHex());
expect(colord(color1).toHex()).to.be.equal(colord(color2).toHex())
}

describe('ReactColorA11y', () => {
Expand All @@ -17,10 +17,10 @@ describe('ReactColorA11y', () => {
{ original: 'rgb(255, 100, 200)', lighter: 'rgb(255, 100, 200)', darker: 'rgb(197, 0, 127)' },
{ original: 'rgb(120, 255, 120)', lighter: 'rgb(120, 255, 120)', darker: 'rgb(0, 120, 0)' },
{ original: 'rgb(255, 255, 255)', lighter: 'rgb(255, 255, 255)', darker: 'rgb(0, 0, 0)' }
];
]

const lightBackground = 'rgb(230, 230, 230)';
const darkBackground = 'rgb(25, 25, 25)';
const lightBackground = 'rgb(230, 230, 230)'
const darkBackground = 'rgb(25, 25, 25)'

it('should lighten colors until required contrast reached', () => {
cy.mount(
Expand All @@ -31,15 +31,15 @@ describe('ReactColorA11y', () => {
))}
</ReactColorA11y>
</div>
);
)

cy.wait(100);
cy.wait(100)

expectedColorMappings.forEach(({ original, lighter }) => {
cy.contains(`${original} text`).invoke('css', 'color')
.then((color: string) => expectColorsToMatch(color, lighter));
});
});
.then((color: string) => expectColorsToMatch(color, lighter))
})
})

it('should darken colors until required contrast reached', () => {
cy.mount(
Expand All @@ -50,15 +50,15 @@ describe('ReactColorA11y', () => {
))}
</ReactColorA11y>
</div>
);
)

cy.wait(100);
cy.wait(100)

expectedColorMappings.forEach(({ original, darker }) => {
cy.contains(`${original} text`).invoke('css', 'color')
.then((color: string) => expectColorsToMatch(color, darker));
});
});
.then((color: string) => expectColorsToMatch(color, darker))
})
})

it('should handle svg fill and stroke', () => {
cy.mount(
Expand All @@ -71,24 +71,24 @@ describe('ReactColorA11y', () => {
</svg>
</ReactColorA11y>
</div>
);
)

cy.wait(100);
cy.wait(100)

expectedColorMappings.forEach(({ lighter }, index) => {
cy.get(`#${index}`).then(($element: any) => {
expectColorsToMatch($element.attr('fill'), lighter);
expectColorsToMatch($element.attr('stroke'), lighter);
expectColorsToMatch($element.css('fill'), lighter);
expectColorsToMatch($element.css('stroke'), lighter);
});
});
});
expectColorsToMatch($element.attr('fill'), lighter)
expectColorsToMatch($element.attr('stroke'), lighter)
expectColorsToMatch($element.css('fill'), lighter)
expectColorsToMatch($element.css('stroke'), lighter)
})
})
})

describe('preserveContrastDirectionIfPossible', () => {
describe('lighter starting direction', () => {
const backgroundColor = 'rgb(150, 150, 150)';
const foregroundColor = 'rgb(151, 151, 151)';
const backgroundColor = 'rgb(150, 150, 150)'
const foregroundColor = 'rgb(151, 151, 151)'

it('should preserve lighter color if possible', () => {
cy.mount(
Expand All @@ -97,13 +97,13 @@ describe('ReactColorA11y', () => {
<p style={{ color: foregroundColor }}>{'text'}</p>
</ReactColorA11y>
</div>
);
)

cy.wait(100);
cy.wait(100)

cy.contains('text').invoke('css', 'color')
.then((color: string) => expectColorsToMatch(color, 'rgb(212, 212, 212)'));
});
.then((color: string) => expectColorsToMatch(color, 'rgb(212, 212, 212)'))
})

it('should not preserve lighter color if that behavior is requested', () => {
cy.mount(
Expand All @@ -112,13 +112,13 @@ describe('ReactColorA11y', () => {
<p style={{ color: foregroundColor }}>{'text'}</p>
</ReactColorA11y>
</div>
);
)

cy.wait(100);
cy.wait(100)

cy.contains('text').invoke('css', 'color')
.then((color: string) => expectColorsToMatch(color, 'rgb(97, 97, 97)'));
});
.then((color: string) => expectColorsToMatch(color, 'rgb(97, 97, 97)'))
})

it('should switch to darker color if needed to meet contrast', () => {
cy.mount(
Expand All @@ -127,18 +127,18 @@ describe('ReactColorA11y', () => {
<p style={{ color: foregroundColor }}>{'text'}</p>
</ReactColorA11y>
</div>
);
)

cy.wait(100);
cy.wait(100)

cy.contains('text').invoke('css', 'color')
.then((color: string) => expectColorsToMatch(color, 'rgb(41, 41, 41)'));
});
});
.then((color: string) => expectColorsToMatch(color, 'rgb(41, 41, 41)'))
})
})

describe('darker starting direction', () => {
const backgroundColor = 'rgb(100, 100, 100)';
const foregroundColor = 'rgb(99, 99, 99)';
const backgroundColor = 'rgb(100, 100, 100)'
const foregroundColor = 'rgb(99, 99, 99)'

it('should preserve darker color if possible', () => {
cy.mount(
Expand All @@ -147,13 +147,13 @@ describe('ReactColorA11y', () => {
<p style={{ color: foregroundColor }}>{'text'}</p>
</ReactColorA11y>
</div>
);
)

cy.wait(100);
cy.wait(100)

cy.contains('text').invoke('css', 'color')
.then((color: string) => expectColorsToMatch(color, 'rgb(51, 51, 51)'));
});
.then((color: string) => expectColorsToMatch(color, 'rgb(51, 51, 51)'))
})

it('should not preserve darker color if that behavior is requested', () => {
cy.mount(
Expand All @@ -162,13 +162,13 @@ describe('ReactColorA11y', () => {
<p style={{ color: foregroundColor }}>{'text'}</p>
</ReactColorA11y>
</div>
);
)

cy.wait(100);
cy.wait(100)

cy.contains('text').invoke('css', 'color')
.then((color: string) => expectColorsToMatch(color, 'rgb(153, 153, 153)'));
});
.then((color: string) => expectColorsToMatch(color, 'rgb(153, 153, 153)'))
})

it('should switch to lighter color if needed to meet contrast', () => {
cy.mount(
Expand All @@ -177,13 +177,13 @@ describe('ReactColorA11y', () => {
<p style={{ color: foregroundColor }}>{'text'}</p>
</ReactColorA11y>
</div>
);
)

cy.wait(100);
cy.wait(100)

cy.contains('text').invoke('css', 'color')
.then((color: string) => expectColorsToMatch(color, 'rgb(227, 227, 227)'));
});
});
.then((color: string) => expectColorsToMatch(color, 'rgb(227, 227, 227)'))
})
})
})
});
})
22 changes: 12 additions & 10 deletions src/ReactColorA11y.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,15 +152,17 @@ const ReactColorA11y: React.FunctionComponent<ReactColorA11yProps> = ({
element.setAttribute('stroke', calculateA11yColor(backgroundColor, strokeColor))
}

const { color: computedColor, stroke: computedStroke, fill: computedFill } = getComputedStyle(element)
if (computedColor !== null) {
element.style.color = calculateA11yColor(backgroundColor, computedColor)
}
if (computedFill !== null) {
element.style.fill = calculateA11yColor(backgroundColor, computedFill)
}
if (computedStroke !== null) {
element.style.stroke = calculateA11yColor(backgroundColor, computedStroke)
if (element.style !== undefined) {
const { color: computedColor, stroke: computedStroke, fill: computedFill } = getComputedStyle(element)
if (computedColor !== null) {
element.style.color = calculateA11yColor(backgroundColor, computedColor)
}
if (computedFill !== null) {
element.style.fill = calculateA11yColor(backgroundColor, computedFill)
}
if (computedStroke !== null) {
element.style.stroke = calculateA11yColor(backgroundColor, computedStroke)
}
}
}

Expand All @@ -174,7 +176,7 @@ const ReactColorA11y: React.FunctionComponent<ReactColorA11yProps> = ({

useEffect(() => {
if (reactColorA11yRef.current === null || reactColorA11yRef.current === undefined) {
return () => {}
return () => { }
}

const mutationCallback = (): void => {
Expand Down

0 comments on commit 5a57920

Please sign in to comment.