Merge pull request #103 from calibreapp/add-aria-labels-to-all-providers

Add aria labels to all providers

Author: Michael Dijkstra

src/components/Chatwoot/index.tsx

@@ -25,12 +25,12 @@ const styles: {
     width: '24px'
   },
   close: {
-    backgroundColor: "#fff",
-    height: "24px",
-    left: "32px",
-    position: "absolute",
-    top: "20px",
-    width: "2px",
+    backgroundColor: '#fff',
+    height: '24px',
+    left: '32px',
+    position: 'absolute',
+    top: '20px',
+    width: '2px'
   }
 }
 
@@ -46,6 +46,9 @@ const Provider = ({ color }: Props): JSX.Element | null => {
   return (
     <div>
       <div
+        aria-label="Load Chat"
+        aria-busy="true"
+        aria-live="polite"
         onClick={() => loadChat({ open: true })}
         onMouseEnter={() => loadChat({ open: false })}
         style={{
@@ -61,8 +64,8 @@ const Provider = ({ color }: Props): JSX.Element | null => {
           />
         ) : (
           <>
-            <div style={{ ...styles.close, transform: "rotate(45deg)" }} />
-            <div style={{ ...styles.close, transform: "rotate(-45deg)" }} />
+            <div style={{ ...styles.close, transform: 'rotate(45deg)' }} />
+            <div style={{ ...styles.close, transform: 'rotate(-45deg)' }} />
           </>
         )}
       </div>

src/components/Drift/index.tsx

@@ -75,6 +75,9 @@ const Drift = ({
     <div style={positionStyles}>
       <div style={styles.container}>
         <div
+          aria-label="Load Chat"
+          aria-busy="true"
+          aria-live="polite"
           onClick={() => loadChat({ open: true })}
           onMouseEnter={() => loadChat({ open: false })}
           style={{

src/components/Intercom/index.tsx

@@ -108,6 +108,9 @@ const Intercom = ({ color }: Props): JSX.Element | null => {
     >
       <div style={styles.region}>
         <div
+          aria-label="Load Chat"
+          aria-busy="true"
+          aria-live="polite"
           onClick={() => loadChat({ open: true })}
           onMouseEnter={() => loadChat({ open: false })}
           style={styles.launcher}
@@ -138,7 +141,13 @@ const Intercom = ({ color }: Props): JSX.Element | null => {
               transform: state === 'initial' ? 'rotate(-30deg)' : 'rotate(0deg)'
             }}
           >
-            <svg focusable="false" viewBox="0 0 16 14" width="28" height="25" style={{ width : '16px' }}>
+            <svg
+              focusable="false"
+              viewBox="0 0 16 14"
+              width="28"
+              height="25"
+              style={{ width: '16px' }}
+            >
               <path
                 fill="rgb(255, 255, 255)"
                 fillRule="evenodd"

src/components/Messenger/index.tsx

@@ -57,7 +57,11 @@ const CustomerChat = memo(
       greeting_dialog_delay: greetingDialogDelay
     }
 
-    return <div><div className="fb-customerchat" {...fields} /></div>
+    return (
+      <div>
+        <div className="fb-customerchat" {...fields} />
+      </div>
+    )
   }
 )
 
@@ -71,6 +75,9 @@ const Widget = ({ color }: { color: string }): JSX.Element | null => {
   return (
     <div
       style={styles}
+      aria-label="Load Chat"
+      aria-busy="true"
+      aria-live="polite"
       onClick={() => loadChat({ open: true })}
       onMouseEnter={() => loadChat({ open: false })}
     >

src/components/Userlike/index.tsx

@@ -68,6 +68,9 @@ const Userlike = ({
   return (
     <div style={{ ...styles.container, ...positionStyles, ...shapeStyle }}>
       <button
+        aria-label="Load Chat"
+        aria-busy="true"
+        aria-live="polite"
         onClick={() => loadChat({ open: true })}
         onMouseEnter={() => loadChat({ open: false })}
         style={{