@transferwise/icons 3.13.0 → 3.14.0

package/build/components/boxes.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface BoxesIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface BoxesIconProps {
 }
 
 export const Boxes: React.FunctionComponent<BoxesIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const Boxes: React.FunctionComponent<BoxesIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-boxes ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'boxes-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const Boxes: React.FunctionComponent<BoxesIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/briefcase.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface BriefcaseIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface BriefcaseIconProps {
 }
 
 export const Briefcase: React.FunctionComponent<BriefcaseIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const Briefcase: React.FunctionComponent<BriefcaseIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-briefcase ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'briefcase-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -44,7 +48,6 @@ export const Briefcase: React.FunctionComponent<BriefcaseIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/building.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface BuildingIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface BuildingIconProps {
 }
 
 export const Building: React.FunctionComponent<BuildingIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const Building: React.FunctionComponent<BuildingIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-building ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'building-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const Building: React.FunctionComponent<BuildingIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/bulb.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface BulbIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface BulbIconProps {
 }
 
 export const Bulb: React.FunctionComponent<BulbIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const Bulb: React.FunctionComponent<BulbIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-bulb ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'bulb-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const Bulb: React.FunctionComponent<BulbIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/calendar-check.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface CalendarCheckIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface CalendarCheckIconProps {
 }
 
 export const CalendarCheck: React.FunctionComponent<CalendarCheckIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const CalendarCheck: React.FunctionComponent<CalendarCheckIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-calendar-check ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'calendar-check-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const CalendarCheck: React.FunctionComponent<CalendarCheckIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/calendar-success.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface CalendarSuccessIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface CalendarSuccessIconProps {
 }
 
 export const CalendarSuccess: React.FunctionComponent<CalendarSuccessIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const CalendarSuccess: React.FunctionComponent<CalendarSuccessIconProps>
   return (
     <span
       className={`tw-icon tw-icon-calendar-success ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'calendar-success-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const CalendarSuccess: React.FunctionComponent<CalendarSuccessIconProps>
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/calendar.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface CalendarIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface CalendarIconProps {
 }
 
 export const Calendar: React.FunctionComponent<CalendarIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const Calendar: React.FunctionComponent<CalendarIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-calendar ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'calendar-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const Calendar: React.FunctionComponent<CalendarIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/camera.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface CameraIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface CameraIconProps {
 }
 
 export const Camera: React.FunctionComponent<CameraIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const Camera: React.FunctionComponent<CameraIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-camera ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'camera-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const Camera: React.FunctionComponent<CameraIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/car.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface CarIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface CarIconProps {
 }
 
 export const Car: React.FunctionComponent<CarIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const Car: React.FunctionComponent<CarIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-car ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'car-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -50,7 +54,6 @@ export const Car: React.FunctionComponent<CarIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/card-cvc.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface CardCvcIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface CardCvcIconProps {
 }
 
 export const CardCvc: React.FunctionComponent<CardCvcIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const CardCvc: React.FunctionComponent<CardCvcIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-card-cvc ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'card-cvc-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const CardCvc: React.FunctionComponent<CardCvcIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/card-detail.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface CardDetailIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface CardDetailIconProps {
 }
 
 export const CardDetail: React.FunctionComponent<CardDetailIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const CardDetail: React.FunctionComponent<CardDetailIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-card-detail ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'card-detail-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const CardDetail: React.FunctionComponent<CardDetailIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/card-number.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface CardNumberIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface CardNumberIconProps {
 }
 
 export const CardNumber: React.FunctionComponent<CardNumberIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const CardNumber: React.FunctionComponent<CardNumberIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-card-number ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'card-number-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const CardNumber: React.FunctionComponent<CardNumberIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/card-strikethrough.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface CardStrikethroughIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface CardStrikethroughIconProps {
 }
 
 export const CardStrikethrough: React.FunctionComponent<CardStrikethroughIconProps> = ({
-  size = 16,
   className = undefined,
-  title = undefined,
+  isFocusable = false,
   filled = undefined,
+  title = undefined,
   role = undefined,
+  size = 16,
   ...restProps
 }) => {
   if (filled) {
@@ -27,15 +30,16 @@ export const CardStrikethrough: React.FunctionComponent<CardStrikethroughIconPro
   return (
     <span
       className={`tw-icon tw-icon-card-strikethrough ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'card-strikethrough-icon'}
     >
       <svg
+        aria-label={title}
+        aria-hidden={!title ? true : undefined}
+        focusable={isFocusable}
+        role={role ?? (title ? 'graphics-symbol img' : 'none')}
         width={String(size)}
         height={String(size)}
         fill="currentColor"
-        focusable="false"
         viewBox="0 0 24 24"
       >
         {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
@@ -48,7 +52,6 @@ export const CardStrikethrough: React.FunctionComponent<CardStrikethroughIconPro
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };