feat: auto accessibility

Author: mrholek

src/CIcon.css

@@ -75,4 +75,17 @@
   width: 0.875rem;
   height: 0.875rem;
   font-size: 0.875rem;
+}
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  position: absolute!important;
+  width: 1px!important;
+  height: 1px!important;
+  padding: 0!important;
+  margin: -1px!important;
+  overflow: hidden!important;
+  clip: rect(0,0,0,0)!important;
+  white-space: nowrap!important;
+  border: 0!important;
 }

src/CIcon.tsx

@@ -3,7 +3,7 @@ import React, { HTMLAttributes, forwardRef, useState, useMemo } from 'react'
 import classNames from 'classnames'
 import './CIcon.css'
 
-export interface CIconProps extends HTMLAttributes<SVGSVGElement> {
+export interface CIconProps extends Omit<HTMLAttributes<SVGSVGElement>, 'content'> {
   /**
    * A string of all className you want applied to the component.
    */
@@ -17,7 +17,7 @@ export interface CIconProps extends HTMLAttributes<SVGSVGElement> {
   /**
    * Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
    */
-  customClassName?: string | string[] // eslint-disable-line @typescript-eslint/ban-types
+  customClassName?: string | string[]
   /**
    * Name of the icon placed in React object or SVG content.
    */
@@ -136,30 +136,37 @@ export const CIcon = forwardRef<SVGSVGElement, CIconProps>(
           className,
         )
 
-    return use ? (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className={_className}
-        {...(height && { height: height })}
-        {...(width && { width: width })}
-        role="img"
-        {...rest}
-        ref={ref}
-      >
-        <use href={use}></use>
-      </svg>
-    ) : (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox={viewBox}
-        className={_className}
-        {...(height && { height: height })}
-        {...(width && { width: width })}
-        role="img"
-        dangerouslySetInnerHTML={{ __html: titleCode + iconCode }}
-        {...rest}
-        ref={ref}
-      />
+    return (
+      <>
+        {use ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className={_className}
+            {...(height && { height: height })}
+            {...(width && { width: width })}
+            role="img"
+            aria-hidden="true"
+            {...rest}
+            ref={ref}
+          >
+            <use href={use}></use>
+          </svg>
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox={viewBox}
+            className={_className}
+            {...(height && { height: height })}
+            {...(width && { width: width })}
+            role="img"
+            aria-hidden="true"
+            dangerouslySetInnerHTML={{ __html: titleCode + iconCode }}
+            {...rest}
+            ref={ref}
+          />
+        )}
+        {title && <span className="visually-hidden">{title}</span>}
+      </>
     )
   },
 )