@transferwise/icons 3.9.3 → 3.11.0-beta.1

package/build/components/star-fill.tsx

@@ -7,6 +7,7 @@ export interface StarFillIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const StarFill: React.FunctionComponent<StarFillIconProps> = ({
@@ -14,6 +15,7 @@ export const StarFill: React.FunctionComponent<StarFillIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const StarFill: React.FunctionComponent<StarFillIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-star-fill ${className ? className : ''}`}
+      className={`tw-icon tw-icon-star-fill tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'star-fill-icon'}
     >
       <svg

package/build/components/star.tsx

@@ -7,6 +7,7 @@ export interface StarIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Star: React.FunctionComponent<StarIconProps> = ({
@@ -14,6 +15,7 @@ export const Star: React.FunctionComponent<StarIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Star: React.FunctionComponent<StarIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-star ${className ? className : ''}`}
+      className={`tw-icon tw-icon-star tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'star-icon'}
     >
       <svg

package/build/components/stationery.tsx

@@ -7,6 +7,7 @@ export interface StationeryIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Stationery: React.FunctionComponent<StationeryIconProps> = ({
@@ -14,6 +15,7 @@ export const Stationery: React.FunctionComponent<StationeryIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Stationery: React.FunctionComponent<StationeryIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-stationery ${className ? className : ''}`}
+      className={`tw-icon tw-icon-stationery tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'stationery-icon'}
     >
       <svg

package/build/components/stop.tsx

@@ -7,6 +7,7 @@ export interface StopIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Stop: React.FunctionComponent<StopIconProps> = ({
@@ -14,6 +15,7 @@ export const Stop: React.FunctionComponent<StopIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Stop: React.FunctionComponent<StopIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-stop ${className ? className : ''}`}
+      className={`tw-icon tw-icon-stop tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'stop-icon'}
     >
       <svg

package/build/components/suitcase.tsx

@@ -7,6 +7,7 @@ export interface SuitcaseIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Suitcase: React.FunctionComponent<SuitcaseIconProps> = ({
@@ -14,6 +15,7 @@ export const Suitcase: React.FunctionComponent<SuitcaseIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Suitcase: React.FunctionComponent<SuitcaseIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-suitcase ${className ? className : ''}`}
+      className={`tw-icon tw-icon-suitcase tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'suitcase-icon'}
     >
       <svg

package/build/components/sunglasses.tsx

@@ -7,6 +7,7 @@ export interface SunglassesIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Sunglasses: React.FunctionComponent<SunglassesIconProps> = ({
@@ -14,6 +15,7 @@ export const Sunglasses: React.FunctionComponent<SunglassesIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Sunglasses: React.FunctionComponent<SunglassesIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-sunglasses ${className ? className : ''}`}
+      className={`tw-icon tw-icon-sunglasses tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'sunglasses-icon'}
     >
       <svg

package/build/components/switch.tsx

@@ -7,6 +7,7 @@ export interface SwitchIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Switch: React.FunctionComponent<SwitchIconProps> = ({
@@ -14,6 +15,7 @@ export const Switch: React.FunctionComponent<SwitchIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Switch: React.FunctionComponent<SwitchIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-switch ${className ? className : ''}`}
+      className={`tw-icon tw-icon-switch tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'switch-icon'}
     >
       <svg

package/build/components/takeaway.tsx

@@ -7,6 +7,7 @@ export interface TakeawayIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Takeaway: React.FunctionComponent<TakeawayIconProps> = ({
@@ -14,6 +15,7 @@ export const Takeaway: React.FunctionComponent<TakeawayIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Takeaway: React.FunctionComponent<TakeawayIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-takeaway ${className ? className : ''}`}
+      className={`tw-icon tw-icon-takeaway tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'takeaway-icon'}
     >
       <svg

package/build/components/target.tsx

@@ -7,6 +7,7 @@ export interface TargetIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Target: React.FunctionComponent<TargetIconProps> = ({
@@ -14,6 +15,7 @@ export const Target: React.FunctionComponent<TargetIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Target: React.FunctionComponent<TargetIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-target ${className ? className : ''}`}
+      className={`tw-icon tw-icon-target tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'target-icon'}
     >
       <svg

package/build/components/tax.tsx

@@ -7,6 +7,7 @@ export interface TaxIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Tax: React.FunctionComponent<TaxIconProps> = ({
@@ -14,6 +15,7 @@ export const Tax: React.FunctionComponent<TaxIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Tax: React.FunctionComponent<TaxIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-tax ${className ? className : ''}`}
+      className={`tw-icon tw-icon-tax tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'tax-icon'}
     >
       <svg

package/build/components/taxi.tsx

@@ -7,6 +7,7 @@ export interface TaxiIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Taxi: React.FunctionComponent<TaxiIconProps> = ({
@@ -14,6 +15,7 @@ export const Taxi: React.FunctionComponent<TaxiIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Taxi: React.FunctionComponent<TaxiIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-taxi ${className ? className : ''}`}
+      className={`tw-icon tw-icon-taxi tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'taxi-icon'}
     >
       <svg

package/build/components/team.tsx

@@ -7,6 +7,7 @@ export interface TeamIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Team: React.FunctionComponent<TeamIconProps> = ({
@@ -14,6 +15,7 @@ export const Team: React.FunctionComponent<TeamIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Team: React.FunctionComponent<TeamIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-team ${className ? className : ''}`}
+      className={`tw-icon tw-icon-team tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'team-icon'}
     >
       <svg

package/build/components/theme.tsx

@@ -7,6 +7,7 @@ export interface ThemeIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Theme: React.FunctionComponent<ThemeIconProps> = ({
@@ -14,6 +15,7 @@ export const Theme: React.FunctionComponent<ThemeIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Theme: React.FunctionComponent<ThemeIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-theme ${className ? className : ''}`}
+      className={`tw-icon tw-icon-theme tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'theme-icon'}
     >
       <svg

package/build/components/transfer.tsx

@@ -7,6 +7,7 @@ export interface TransferIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Transfer: React.FunctionComponent<TransferIconProps> = ({
@@ -14,6 +15,7 @@ export const Transfer: React.FunctionComponent<TransferIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Transfer: React.FunctionComponent<TransferIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-transfer ${className ? className : ''}`}
+      className={`tw-icon tw-icon-transfer tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'transfer-icon'}
     >
       <svg

package/build/components/transport.tsx

@@ -7,6 +7,7 @@ export interface TransportIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Transport: React.FunctionComponent<TransportIconProps> = ({
@@ -14,6 +15,7 @@ export const Transport: React.FunctionComponent<TransportIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Transport: React.FunctionComponent<TransportIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-transport ${className ? className : ''}`}
+      className={`tw-icon tw-icon-transport tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'transport-icon'}
     >
       <svg

package/build/components/travel.tsx

@@ -7,6 +7,7 @@ export interface TravelIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Travel: React.FunctionComponent<TravelIconProps> = ({
@@ -14,6 +15,7 @@ export const Travel: React.FunctionComponent<TravelIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Travel: React.FunctionComponent<TravelIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-travel ${className ? className : ''}`}
+      className={`tw-icon tw-icon-travel tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'travel-icon'}
     >
       <svg

package/build/components/trustly.tsx

@@ -7,6 +7,7 @@ export interface TrustlyIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Trustly: React.FunctionComponent<TrustlyIconProps> = ({
@@ -14,6 +15,7 @@ export const Trustly: React.FunctionComponent<TrustlyIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Trustly: React.FunctionComponent<TrustlyIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-trustly ${className ? className : ''}`}
+      className={`tw-icon tw-icon-trustly tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'trustly-icon'}
     >
       <svg

package/build/components/twitter.tsx

@@ -7,6 +7,7 @@ export interface TwitterIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Twitter: React.FunctionComponent<TwitterIconProps> = ({
@@ -14,6 +15,7 @@ export const Twitter: React.FunctionComponent<TwitterIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Twitter: React.FunctionComponent<TwitterIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-twitter ${className ? className : ''}`}
+      className={`tw-icon tw-icon-twitter tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'twitter-icon'}
     >
       <svg

package/build/components/two-step.tsx

@@ -7,6 +7,7 @@ export interface TwoStepIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const TwoStep: React.FunctionComponent<TwoStepIconProps> = ({
@@ -14,6 +15,7 @@ export const TwoStep: React.FunctionComponent<TwoStepIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const TwoStep: React.FunctionComponent<TwoStepIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-two-step ${className ? className : ''}`}
+      className={`tw-icon tw-icon-two-step tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'two-step-icon'}
     >
       <svg

package/build/components/unlock.tsx

@@ -7,6 +7,7 @@ export interface UnlockIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Unlock: React.FunctionComponent<UnlockIconProps> = ({
@@ -14,6 +15,7 @@ export const Unlock: React.FunctionComponent<UnlockIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Unlock: React.FunctionComponent<UnlockIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-unlock ${className ? className : ''}`}
+      className={`tw-icon tw-icon-unlock tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'unlock-icon'}
     >
       <svg

package/build/components/upload.tsx

@@ -7,6 +7,7 @@ export interface UploadIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Upload: React.FunctionComponent<UploadIconProps> = ({
@@ -14,6 +15,7 @@ export const Upload: React.FunctionComponent<UploadIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Upload: React.FunctionComponent<UploadIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-upload ${className ? className : ''}`}
+      className={`tw-icon tw-icon-upload tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'upload-icon'}
     >
       <svg

package/build/components/upward-graph.tsx

@@ -7,6 +7,7 @@ export interface UpwardGraphIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const UpwardGraph: React.FunctionComponent<UpwardGraphIconProps> = ({
@@ -14,6 +15,7 @@ export const UpwardGraph: React.FunctionComponent<UpwardGraphIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const UpwardGraph: React.FunctionComponent<UpwardGraphIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-upward-graph ${className ? className : ''}`}
+      className={`tw-icon tw-icon-upward-graph tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'upward-graph-icon'}
     >
       <svg

package/build/components/venmo.tsx

@@ -7,6 +7,7 @@ export interface VenmoIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const Venmo: React.FunctionComponent<VenmoIconProps> = ({
@@ -14,6 +15,7 @@ export const Venmo: React.FunctionComponent<VenmoIconProps> = ({
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -24,9 +26,9 @@ export const Venmo: React.FunctionComponent<VenmoIconProps> = ({
 
   return (
     <span
-      className={`tw-icon tw-icon-venmo ${className ? className : ''}`}
+      className={`tw-icon tw-icon-venmo tw-icon-${size} ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'venmo-icon'}
     >
       <svg