@transferwise/icons 3.13.0 → 3.14.0

package/build/components/ach.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface AchIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface AchIconProps {
 }
 
 export const Ach: React.FunctionComponent<AchIconProps> = ({
-  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 Ach: React.FunctionComponent<AchIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-ach ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'ach-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 Ach: React.FunctionComponent<AchIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/activity.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface ActivityIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface ActivityIconProps {
 }
 
 export const Activity: React.FunctionComponent<ActivityIconProps> = ({
-  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 Activity: React.FunctionComponent<ActivityIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-activity ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'activity-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 Activity: React.FunctionComponent<ActivityIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/alert-circle-fill.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface AlertCircleFillIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface AlertCircleFillIconProps {
 }
 
 export const AlertCircleFill: React.FunctionComponent<AlertCircleFillIconProps> = ({
-  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 AlertCircleFill: React.FunctionComponent<AlertCircleFillIconProps>
   return (
     <span
       className={`tw-icon tw-icon-alert-circle-fill ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'alert-circle-fill-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 AlertCircleFill: React.FunctionComponent<AlertCircleFillIconProps>
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/alert-circle.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface AlertCircleIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface AlertCircleIconProps {
 }
 
 export const AlertCircle: React.FunctionComponent<AlertCircleIconProps> = ({
-  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 AlertCircle: React.FunctionComponent<AlertCircleIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-alert-circle ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'alert-circle-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 AlertCircle: React.FunctionComponent<AlertCircleIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/alert.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface AlertIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface AlertIconProps {
 }
 
 export const Alert: React.FunctionComponent<AlertIconProps> = ({
-  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 Alert: React.FunctionComponent<AlertIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-alert ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'alert-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) && (
@@ -45,7 +49,6 @@ export const Alert: React.FunctionComponent<AlertIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/alipay.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface AlipayIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface AlipayIconProps {
 }
 
 export const Alipay: React.FunctionComponent<AlipayIconProps> = ({
-  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 Alipay: React.FunctionComponent<AlipayIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-alipay ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'alipay-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 Alipay: React.FunctionComponent<AlipayIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/arrow-diagonal-down.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface ArrowDiagonalDownIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface ArrowDiagonalDownIconProps {
 }
 
 export const ArrowDiagonalDown: React.FunctionComponent<ArrowDiagonalDownIconProps> = ({
-  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 ArrowDiagonalDown: React.FunctionComponent<ArrowDiagonalDownIconPro
   return (
     <span
       className={`tw-icon tw-icon-arrow-diagonal-down ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'arrow-diagonal-down-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 ArrowDiagonalDown: React.FunctionComponent<ArrowDiagonalDownIconPro
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/arrow-diagonal-up.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface ArrowDiagonalUpIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface ArrowDiagonalUpIconProps {
 }
 
 export const ArrowDiagonalUp: React.FunctionComponent<ArrowDiagonalUpIconProps> = ({
-  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 ArrowDiagonalUp: React.FunctionComponent<ArrowDiagonalUpIconProps>
   return (
     <span
       className={`tw-icon tw-icon-arrow-diagonal-up ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'arrow-diagonal-up-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 ArrowDiagonalUp: React.FunctionComponent<ArrowDiagonalUpIconProps>
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/arrow-down.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface ArrowDownIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface ArrowDownIconProps {
 }
 
 export const ArrowDown: React.FunctionComponent<ArrowDownIconProps> = ({
-  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 ArrowDown: React.FunctionComponent<ArrowDownIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-arrow-down ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'arrow-down-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 ArrowDown: React.FunctionComponent<ArrowDownIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/arrow-left.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface ArrowLeftIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface ArrowLeftIconProps {
 }
 
 export const ArrowLeft: React.FunctionComponent<ArrowLeftIconProps> = ({
-  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 ArrowLeft: React.FunctionComponent<ArrowLeftIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-arrow-left ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'arrow-left-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 ArrowLeft: React.FunctionComponent<ArrowLeftIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/arrow-right.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface ArrowRightIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface ArrowRightIconProps {
 }
 
 export const ArrowRight: React.FunctionComponent<ArrowRightIconProps> = ({
-  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 ArrowRight: React.FunctionComponent<ArrowRightIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-arrow-right ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'arrow-right-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 ArrowRight: React.FunctionComponent<ArrowRightIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/arrow-up.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface ArrowUpIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface ArrowUpIconProps {
 }
 
 export const ArrowUp: React.FunctionComponent<ArrowUpIconProps> = ({
-  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 ArrowUp: React.FunctionComponent<ArrowUpIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-arrow-up ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'arrow-up-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 ArrowUp: React.FunctionComponent<ArrowUpIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };

package/build/components/atm.tsx

@@ -2,6 +2,8 @@
 import { IconSize } from '../types';
 
 export interface AtmIconProps {
+  description?: string;
+  isFocusable?: boolean;
   size?: IconSize;
   filled?: boolean;
   className?: string;
@@ -11,11 +13,12 @@ export interface AtmIconProps {
 }
 
 export const Atm: React.FunctionComponent<AtmIconProps> = ({
-  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 Atm: React.FunctionComponent<AtmIconProps> = ({
   return (
     <span
       className={`tw-icon tw-icon-atm ${className ? className : ''}`}
-      aria-hidden={!title ? 'true' : undefined}
-      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'atm-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 Atm: React.FunctionComponent<AtmIconProps> = ({
           </>
         )}
       </svg>
-      {title && <span className="sr-only">{title}</span>}
     </span>
   );
 };