@transferwise/icons 3.9.2 → 3.10.0

package/build/components/reload.tsx

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

package/build/components/rent.tsx

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

package/build/components/request-receive.tsx

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

package/build/components/request-send.tsx

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

package/build/components/rewards.tsx

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

package/build/components/sad-emoji.tsx

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

package/build/components/salary.tsx

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

package/build/components/sales-and-royalties.tsx

@@ -7,6 +7,7 @@ export interface SalesAndRoyaltiesIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const SalesAndRoyalties: React.FunctionComponent<SalesAndRoyaltiesIconProps> = ({
@@ -14,6 +15,7 @@ export const SalesAndRoyalties: React.FunctionComponent<SalesAndRoyaltiesIconPro
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -26,7 +28,7 @@ export const SalesAndRoyalties: React.FunctionComponent<SalesAndRoyaltiesIconPro
     <span
       className={`tw-icon tw-icon-sales-and-royalties ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'sales-and-royalties-icon'}
     >
       <svg

package/build/components/savings.tsx

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

package/build/components/scan-qr-code.tsx

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

package/build/components/search.tsx

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

package/build/components/send.tsx

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

package/build/components/settings.tsx

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

package/build/components/share-android.tsx

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

package/build/components/share-ios.tsx

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

package/build/components/shield.tsx

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

package/build/components/shopping-bag.tsx

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

package/build/components/slider.tsx

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

package/build/components/sofort.tsx

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

package/build/components/software-and-hosting.tsx

@@ -7,6 +7,7 @@ export interface SoftwareAndHostingIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const SoftwareAndHosting: React.FunctionComponent<SoftwareAndHostingIconProps> = ({
@@ -14,6 +15,7 @@ export const SoftwareAndHosting: React.FunctionComponent<SoftwareAndHostingIconP
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -26,7 +28,7 @@ export const SoftwareAndHosting: React.FunctionComponent<SoftwareAndHostingIconP
     <span
       className={`tw-icon tw-icon-software-and-hosting ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'software-and-hosting-icon'}
     >
       <svg

package/build/components/software-and-web-hosting.tsx

@@ -7,6 +7,7 @@ export interface SoftwareAndWebHostingIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const SoftwareAndWebHosting: React.FunctionComponent<SoftwareAndWebHostingIconProps> = ({
@@ -14,6 +15,7 @@ export const SoftwareAndWebHosting: React.FunctionComponent<SoftwareAndWebHostin
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -26,7 +28,7 @@ export const SoftwareAndWebHosting: React.FunctionComponent<SoftwareAndWebHostin
     <span
       className={`tw-icon tw-icon-software-and-web-hosting ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'software-and-web-hosting-icon'}
     >
       <svg

package/build/components/speech-bubble-exclamation.tsx

@@ -7,6 +7,7 @@ export interface SpeechBubbleExclamationIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const SpeechBubbleExclamation: React.FunctionComponent<SpeechBubbleExclamationIconProps> = ({
@@ -14,6 +15,7 @@ export const SpeechBubbleExclamation: React.FunctionComponent<SpeechBubbleExclam
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -26,7 +28,7 @@ export const SpeechBubbleExclamation: React.FunctionComponent<SpeechBubbleExclam
     <span
       className={`tw-icon tw-icon-speech-bubble-exclamation ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'speech-bubble-exclamation-icon'}
     >
       <svg

package/build/components/speech-bubble-message.tsx

@@ -7,6 +7,7 @@ export interface SpeechBubbleMessageIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const SpeechBubbleMessage: React.FunctionComponent<SpeechBubbleMessageIconProps> = ({
@@ -14,6 +15,7 @@ export const SpeechBubbleMessage: React.FunctionComponent<SpeechBubbleMessageIco
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -26,7 +28,7 @@ export const SpeechBubbleMessage: React.FunctionComponent<SpeechBubbleMessageIco
     <span
       className={`tw-icon tw-icon-speech-bubble-message ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'speech-bubble-message-icon'}
     >
       <svg

package/build/components/speech-bubble-pending.tsx

@@ -7,6 +7,7 @@ export interface SpeechBubblePendingIconProps {
   className?: string;
   title?: string;
   ['data-testid']?: string;
+  role?: React.AriaRole;
 }
 
 export const SpeechBubblePending: React.FunctionComponent<SpeechBubblePendingIconProps> = ({
@@ -14,6 +15,7 @@ export const SpeechBubblePending: React.FunctionComponent<SpeechBubblePendingIco
   className = undefined,
   title = undefined,
   filled = undefined,
+  role = undefined,
   ...restProps
 }) => {
   if (filled) {
@@ -26,7 +28,7 @@ export const SpeechBubblePending: React.FunctionComponent<SpeechBubblePendingIco
     <span
       className={`tw-icon tw-icon-speech-bubble-pending ${className ? className : ''}`}
       aria-hidden={!title ? 'true' : undefined}
-      role={!title ? 'presentation' : undefined}
+      role={role ?? (title ? undefined : 'none')}
       data-testid={restProps['data-testid'] || 'speech-bubble-pending-icon'}
     >
       <svg

package/build/components/speech-bubble.tsx

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

package/build/components/speech-bubbles.tsx

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