@transferwise/icons 3.9.2 → 3.10.0

package/README.md

@@ -33,7 +33,7 @@ const YourComponent = () => <BankIcon size={24} data-testid="bank-icon" />;
 will result in
 
 ```html
-<span class="tw-icon tw-icon-bank" aria-hidden="true" role="presentation">
+<span class="tw-icon tw-icon-bank" aria-hidden="true" role="none">
   <svg width="24" height="24" fill="currentColor">
     <path
       d="M22.003 9.408l-10-7.405-10 7.405 1.195 1.595 8.805-6.52 8.805 6.52 1.195-1.595z"
@@ -140,7 +140,7 @@ Each React icon component has an optional `title` property in case your icon has
 <ActivityIcon size={24} title="Wise card transcation" />
 ```
 
-By default icon will be removed from accessibility tree as [`aria-hidden="true"`](https://www.w3.org/TR/wai-aria-1.1/#aria-hidden) and [`role="presentation""`](https://www.w3.org/TR/using-aria/#presentation) attributes will be added.
+By default icon will be removed from accessibility tree as [`aria-hidden="true"`](https://www.w3.org/TR/wai-aria-1.1/#aria-hidden) and [`role="none"`](https://www.w3.org/TR/using-aria/#none) attributes will be added.
 
 # Contributing
 

package/build/components/ach.tsx

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

package/build/components/activity.tsx

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

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

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

package/build/components/alert-circle.tsx

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

package/build/components/alert.tsx

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

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

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

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

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

package/build/components/arrow-down.tsx

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

package/build/components/arrow-left.tsx

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

package/build/components/arrow-right.tsx

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

package/build/components/arrow-up.tsx

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

package/build/components/atm.tsx

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

package/build/components/auto-convert.tsx

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

package/build/components/balance.tsx

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

package/build/components/bank-strikethrough.tsx

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

package/build/components/bank-transfer.tsx

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

package/build/components/bank.tsx

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

package/build/components/bar-chart.tsx

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

package/build/components/barcode.tsx

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

package/build/components/batch.tsx

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

package/build/components/beach.tsx

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

package/build/components/bill-split.tsx

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

package/build/components/bills.tsx

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

package/build/components/bin.tsx

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

package/build/components/book.tsx

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