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

@@ -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>
+```

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')

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
     }