From 90d98160c4b84c1b1a3db2fd1494762ce8305bce Mon Sep 17 00:00:00 2001
From: David Lounsbrough <lounsbrough@users.noreply.github.com>
Date: Wed, 5 Jun 2024 10:56:57 -0500
Subject: [PATCH] Allow ignoring specific elements as needed (#19)

## Describe your changes
In some cases, consumers may need to ignore specific elements from being
corrected. This PR allows a data attribute to be set on such elements,
so that they are ignored by the color correction logic.

## 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.
---
 README.md                 | 12 ++++++++++++
 src/ReactColorA11y.cy.tsx | 16 ++++++++++++++++
 src/ReactColorA11y.tsx    |  2 +-
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a5ee82b..90b3e7d 100644
--- a/README.md
+++ b/README.md
@@ -66,3 +66,15 @@ It is recommended to provide a single child component inside `ReactColorA11y`. I
 | flipBlackAndWhite | bool | false | This is an edge case. Should `#000000` be flipped to `#ffffff` when lightening, or should it only lighten as much as it needs to reach the required contrast ratio? Similarly for the opposite case. |
 | preserveContrastDirectionIfPossible | bool | true | Try to preserve original contrast direction. For example, if the original foreground color is lighter than the background, try to lighten the foreground. If the required contrast ratio can not be met by lightening, then darkening may occur as determined by the luminance threshold. |
 | backgroundColorOverride | string | '' | If provided, this color will be used as the effective background color for determining the foreground color. This may be necessary if autodetection of the effective background color is not working, because of absolute positioning, z-index, or other cases where determining this is complex. |
+
+## ignoreColorA11y data attribute
+
+If you have some elements which you need to ignore in the color corrections for accessibility, you can add the data attribute `ignoreColorA11y` to those elements. A trivial example would be:
+```xml
+<div style="background: white">
+  <svg>
+    <rect fill="red"/>
+    <rect fill="white" data-ignore-color-ally=""/>
+  </svg>
+</div>
+```
diff --git a/src/ReactColorA11y.cy.tsx b/src/ReactColorA11y.cy.tsx
index f9493d2..9d86020 100644
--- a/src/ReactColorA11y.cy.tsx
+++ b/src/ReactColorA11y.cy.tsx
@@ -242,6 +242,22 @@ describe('ReactColorA11y', () => {
     })
   })
 
+  describe('ignoreColorA11y attribute', () => {
+    it('should ignore elements which have the ignoreColorA11y data attribute set', () => {
+      cy.mount(
+        <div style={{ backgroundColor: 'rgb(0, 0, 0)' }}>
+          <ReactColorA11y>
+            <p data-ignore-color-a11y style={{ color: 'rgb(10, 10, 10)' }}>{'ignored'}</p>
+            <p style={{ color: 'rgb(0, 50, 100)' }}>{'not ignored'}</p>
+          </ReactColorA11y>
+        </div>
+      )
+
+      cy.contains('ignored').shouldHaveColor('css', 'color', 'rgb(10, 10, 10)')
+      cy.contains('not ignored').shouldHaveColor('css', 'color', 'rgb(0, 114, 228)')
+    })
+  })
+
   describe('colorPaletteKey', () => {
     const TestComponent = () => {
       const [colorPalette, setColorPalette] = useState('light')
diff --git a/src/ReactColorA11y.tsx b/src/ReactColorA11y.tsx
index fde666b..806186a 100644
--- a/src/ReactColorA11y.tsx
+++ b/src/ReactColorA11y.tsx
@@ -160,7 +160,7 @@ const ReactColorA11y: React.FunctionComponent<ReactColorA11yProps> = ({
   }
 
   const enforceColorsOnElement = (element: HTMLElement | null): void => {
-    if (element?.getAttribute === undefined) {
+    if (element?.getAttribute === undefined || element.dataset.ignoreColorA11y !== undefined) {
       return
     }