feat(added aria-label to icon): added aria-label to icon

src/components/atoms/Button/Button.md

@@ -88,7 +88,7 @@ import { faArrowCircleRight, faArrowCircleLeft, faCoffee } from '@fortawesome/fr
     </FlexCol>
     <FlexCol xs={4}>
       <Button>
-        Have some {'\u00A0'}
+        Have some coffee {'\u00A0'}
         <FontAwesomeIcon icon={faCoffee} />
       </Button>
     </FlexCol>

src/components/atoms/Icon/Icon.md

@@ -2,6 +2,8 @@
 
 Use `<Icon />` whenever you want to render an icon in your application.
 
+An `<Icon />` should be used for decorative purposes only. In the rare case where it is used to convey information, an 'ariaLabel' is required.
+
 This library ( _and the design-system behind_ ) have a strict dependency on the **font-awesome** icon library.
 
 This component is just a wrapper around `<FontAwesomeIcon />` from `'@fortawesome/react-fontawesome'` with just the component name and the `icon` prop renamed for convenience:
@@ -40,6 +42,6 @@ import { Icon, colors } from '@zopauk/react-components';
 import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
 <>
-  <Icon variant={faCoffee} bgColor={colors.grey} />
+  <Icon variant={faCoffee} bgColor={colors.grey} ariaLabel={'coffee cup'} />
 </>;
 ```

src/components/atoms/Icon/Icon.tsx

@@ -9,6 +9,7 @@ import { IconDefinition } from '@fortawesome/fontawesome-common-types';
 export interface IconProps extends Omit<FontAwesomeIconProps, 'icon' | 'border'> {
   variant: IconDefinition;
   bgColor?: Colors[keyof Colors];
+  ariaLabel?: string;
 }
 
 export const RoundBadge = styled.div<{ color: Colors[keyof Colors] }>`
@@ -21,8 +22,16 @@ export const RoundBadge = styled.div<{ color: Colors[keyof Colors] }>`
   padding: ${spacing[6]};
 `;
 
-export default function Icon({ variant, bgColor, className, ...rest }: IconProps) {
-  const renderIcon = (className?: string) => <FontAwesomeIcon {...rest} icon={variant} className={className} />;
+export default function Icon({ variant, bgColor, ariaLabel, className, ...rest }: IconProps) {
+  const renderIcon = (className?: string) => (
+    <FontAwesomeIcon
+      {...rest}
+      icon={variant}
+      className={className}
+      aria-label={ariaLabel}
+      aria-hidden={ariaLabel ? false : true}
+    />
+  );
 
   return bgColor ? (
     <RoundBadge className={className} color={bgColor}>