@transferwise/components 46.118.0 → 46.119.0

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -220,7 +220,9 @@ export const Muted: StoryObj<PreviewStoryArgs> = {
 /**
  * While main sentiments (`warning`, `negative`, `neutral`) must retain their associated
  * `StatusIcons`, the `positive` and `proposition` ones allow for Icon overrides to bring it
- * closer to the prompt's content.
+ * closer to the prompt's content. <br /><br />
+ * It's also possible to override the default icon's accessible name announced by screen readers
+ * via `iconLabel` prop, which is especially useful for the `proposition` sentiment.
  */
 export const IconOverrides: StoryObj<PreviewStoryArgs> = {
   render: (args: PreviewStoryArgs) => {
@@ -229,7 +231,7 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
         <InlinePrompt {...args} media={<Travel />} sentiment="positive">
           Your travel account is set up and ready to use.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Taxi />} sentiment="proposition">
+        <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" iconLabel="Taxi addon: ">
           Connect Wise with your taxi app to get exclusive discounts.
         </InlinePrompt>
         <InlinePrompt {...args} media={<Taxi />} sentiment="negative">

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -28,6 +28,11 @@ export type InlinePromptProps = {
    * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.
    */
   media?: React.ReactNode;
+  /**
+   * Override for the sentiment's-derived, default, accessible name announced by the screen readers.
+   * To be used primarily for `proposition` sentiment.
+   */
+  iconLabel?: string;
   id?: string;
   className?: string;
   'data-testid'?: string;
@@ -47,6 +52,7 @@ export const InlinePrompt = ({
   className,
   children,
   media = null,
+  iconLabel,
   'data-testid': dataTestId,
   ...rest
 }: InlinePromptProps) => {
@@ -54,7 +60,7 @@ export const InlinePrompt = ({
 
   const renderMedia = () => {
     if (muted) {
-      return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" />;
+      return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" title={iconLabel} />;
     }
     if (loading) {
       return (
@@ -71,10 +77,10 @@ export const InlinePrompt = ({
     }
 
     if (sentiment === 'proposition') {
-      return media || <GiftBox />;
+      return media || <GiftBox title={iconLabel} />;
     }
 
-    return <StatusIcon size={16} sentiment={sentiment} />;
+    return <StatusIcon size={16} sentiment={sentiment} iconLabel={iconLabel} />;
   };
 
   return (

package/src/tile/__snapshots__/Tile.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Tile matches snapshot when regular size 1`] = `
 <DocumentFragment>

package/src/tooltip/__snapshots__/Tooltip.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Tooltip Component renders an empty list when no items are passed 1`] = `
 <div>