From 6fabc7134aeb99e89b85f8c872b00c4dbf759f15 Mon Sep 17 00:00:00 2001
From: Leyan Lo <leyan@uber.com>
Date: Wed, 20 Mar 2024 16:36:50 -0700
Subject: [PATCH] fix(icons): add title="" to icons (#5329)

add title="" to icons to prevent the wrong name being read on screen readers
---
 documentation-site/components/version-selector.jsx     |  2 +-
 documentation-site/examples/button-group/dropdown.tsx  |  5 ++++-
 documentation-site/examples/button-group/enhancer.tsx  |  6 +++---
 documentation-site/examples/button/dropdown.tsx        |  4 +++-
 documentation-site/examples/button/with-enhancers.tsx  |  6 ++++--
 documentation-site/examples/fixed-marker/dragging.tsx  |  4 +++-
 .../examples/fixed-marker/end-enhancer-color.tsx       |  4 +++-
 .../examples/fixed-marker/start-enhancer.tsx           |  4 +++-
 .../large-square-anchor-start-enhancer.tsx             |  4 +++-
 .../examples/floating-marker/start-enhancer.tsx        |  4 +++-
 .../floating-route-marker/start-end-enhancer.tsx       |  4 ++--
 documentation-site/examples/icon/button.tsx            |  8 ++++++--
 documentation-site/examples/input/enhancers.tsx        |  2 +-
 documentation-site/examples/list/enhancers.tsx         |  2 +-
 documentation-site/examples/list/menu-adapter.tsx      |  2 +-
 documentation-site/examples/list/sublist.tsx           | 10 +++++++---
 documentation-site/examples/list/tap-target.tsx        |  2 +-
 .../examples/snackbar/action-button-usage.tsx          |  6 +++---
 documentation-site/examples/table/pagination.tsx       |  7 +++++--
 19 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/documentation-site/components/version-selector.jsx b/documentation-site/components/version-selector.jsx
index 1fbebb8be6..2bd664ed5e 100644
--- a/documentation-site/components/version-selector.jsx
+++ b/documentation-site/components/version-selector.jsx
@@ -61,7 +61,7 @@ const VersionSelector = () => {
       <Button
         size="compact"
         kind={KIND.tertiary}
-        endEnhancer={() => <ChevronDown size={20} />}
+        endEnhancer={() => <ChevronDown size={20} title="" />}
       >
         v{version}
       </Button>
diff --git a/documentation-site/examples/button-group/dropdown.tsx b/documentation-site/examples/button-group/dropdown.tsx
index c961f5f12d..81e432aa14 100644
--- a/documentation-site/examples/button-group/dropdown.tsx
+++ b/documentation-site/examples/button-group/dropdown.tsx
@@ -27,7 +27,10 @@ const Dropdown = (props: { children: React.ReactNode }) => {
         <StatefulMenu items={items} onItemSelect={() => setIsOpen(false)} />
       }
     >
-      <Button {...props} endEnhancer={() => <TriangleDown size={24} />}>
+      <Button
+        {...props}
+        endEnhancer={() => <TriangleDown size={24} title="" />}
+      >
         {props.children}
       </Button>
     </Popover>
diff --git a/documentation-site/examples/button-group/enhancer.tsx b/documentation-site/examples/button-group/enhancer.tsx
index 54393c9c66..d800d6bbd4 100644
--- a/documentation-site/examples/button-group/enhancer.tsx
+++ b/documentation-site/examples/button-group/enhancer.tsx
@@ -6,9 +6,9 @@ import { Upload } from "baseui/icon";
 export default function Example() {
   return (
     <ButtonGroup>
-      <Button startEnhancer={() => <Upload size={24} />}>Label</Button>
-      <Button startEnhancer={() => <Upload size={24} />}>Label</Button>
-      <Button startEnhancer={() => <Upload size={24} />}>Label</Button>
+      <Button startEnhancer={() => <Upload size={24} title="" />}>Label</Button>
+      <Button startEnhancer={() => <Upload size={24} title="" />}>Label</Button>
+      <Button startEnhancer={() => <Upload size={24} title="" />}>Label</Button>
     </ButtonGroup>
   );
 }
diff --git a/documentation-site/examples/button/dropdown.tsx b/documentation-site/examples/button/dropdown.tsx
index 94c46b6b8c..05154bb8c7 100644
--- a/documentation-site/examples/button/dropdown.tsx
+++ b/documentation-site/examples/button/dropdown.tsx
@@ -34,7 +34,9 @@ export default function Example() {
         />
       )}
     >
-      <Button endEnhancer={() => <ChevronDown size={24} />}>Open Menu</Button>
+      <Button endEnhancer={() => <ChevronDown size={24} title="" />}>
+        Open Menu
+      </Button>
     </StatefulPopover>
   );
 }
diff --git a/documentation-site/examples/button/with-enhancers.tsx b/documentation-site/examples/button/with-enhancers.tsx
index c309c18377..f002b21de4 100644
--- a/documentation-site/examples/button/with-enhancers.tsx
+++ b/documentation-site/examples/button/with-enhancers.tsx
@@ -6,12 +6,14 @@ export default function Example() {
   return (
     <React.Fragment>
       <p>
-        <Button startEnhancer={() => <ArrowRight size={24} />}>
+        <Button startEnhancer={() => <ArrowRight size={24} title="" />}>
           Start Enhancer
         </Button>
       </p>
       <p>
-        <Button endEnhancer={() => <Upload size={24} />}>End Enhancer</Button>
+        <Button endEnhancer={() => <Upload size={24} title="" />}>
+          End Enhancer
+        </Button>
       </p>
     </React.Fragment>
   );
diff --git a/documentation-site/examples/fixed-marker/dragging.tsx b/documentation-site/examples/fixed-marker/dragging.tsx
index ccf5a4ba17..a69e70e2a3 100644
--- a/documentation-site/examples/fixed-marker/dragging.tsx
+++ b/documentation-site/examples/fixed-marker/dragging.tsx
@@ -14,7 +14,9 @@ export default function Example() {
       onMouseLeave={() => setDragging(false)}
     >
       <FixedMarker
-        startEnhancer={({ size }: { size: number }) => <Search size={size} />}
+        startEnhancer={({ size }: { size: number }) => (
+          <Search size={size} title="" />
+        )}
         size={PINHEAD_SIZES_SHAPES.large}
         needle={NEEDLE_SIZES.short}
         label="Hover over me to view dragging state"
diff --git a/documentation-site/examples/fixed-marker/end-enhancer-color.tsx b/documentation-site/examples/fixed-marker/end-enhancer-color.tsx
index 68522a6889..5b87d99473 100644
--- a/documentation-site/examples/fixed-marker/end-enhancer-color.tsx
+++ b/documentation-site/examples/fixed-marker/end-enhancer-color.tsx
@@ -6,7 +6,9 @@ export default function Example() {
   return (
     <FixedMarker
       label="Illegal Dropoff"
-      endEnhancer={({ size }: { size: number }) => <DeleteAlt size={size} />}
+      endEnhancer={({ size }: { size: number }) => (
+        <DeleteAlt size={size} title="" />
+      )}
       kind={KIND.negative}
     />
   );
diff --git a/documentation-site/examples/fixed-marker/start-enhancer.tsx b/documentation-site/examples/fixed-marker/start-enhancer.tsx
index a90bc676c8..378ae9fcdb 100644
--- a/documentation-site/examples/fixed-marker/start-enhancer.tsx
+++ b/documentation-site/examples/fixed-marker/start-enhancer.tsx
@@ -6,7 +6,9 @@ export default function Example() {
   return (
     <FixedMarker
       label="Cloud Center"
-      startEnhancer={({ size }: { size: number }) => <Upload size={size} />}
+      startEnhancer={({ size }: { size: number }) => (
+        <Upload size={size} title="" />
+      )}
     />
   );
 }
diff --git a/documentation-site/examples/floating-marker/large-square-anchor-start-enhancer.tsx b/documentation-site/examples/floating-marker/large-square-anchor-start-enhancer.tsx
index bb15d69b8c..4cf3f57db7 100644
--- a/documentation-site/examples/floating-marker/large-square-anchor-start-enhancer.tsx
+++ b/documentation-site/examples/floating-marker/large-square-anchor-start-enhancer.tsx
@@ -10,7 +10,9 @@ export default function Example() {
     <FloatingMarker
       label="Uber HQ"
       anchorType={FLOATING_MARKER_ANCHOR_TYPES.square}
-      startEnhancer={({ size }: { size: number }) => <Search size={size} />}
+      startEnhancer={({ size }: { size: number }) => (
+        <Search size={size} title="" />
+      )}
       size={FLOATING_MARKER_SIZES.large}
     />
   );
diff --git a/documentation-site/examples/floating-marker/start-enhancer.tsx b/documentation-site/examples/floating-marker/start-enhancer.tsx
index 2744bbb794..2b6b28b3d6 100644
--- a/documentation-site/examples/floating-marker/start-enhancer.tsx
+++ b/documentation-site/examples/floating-marker/start-enhancer.tsx
@@ -10,7 +10,9 @@ export default function Example() {
     <FloatingMarker
       label="Uber Cafe"
       anchor={FLOATING_MARKER_ANCHOR_POSITIONS.bottomRight}
-      startEnhancer={({ size }: { size: number }) => <Search size={size} />}
+      startEnhancer={({ size }: { size: number }) => (
+        <Search size={size} title="" />
+      )}
     />
   );
 }
diff --git a/documentation-site/examples/floating-route-marker/start-end-enhancer.tsx b/documentation-site/examples/floating-route-marker/start-end-enhancer.tsx
index dd8c136a90..8061227d39 100644
--- a/documentation-site/examples/floating-route-marker/start-end-enhancer.tsx
+++ b/documentation-site/examples/floating-route-marker/start-end-enhancer.tsx
@@ -7,8 +7,8 @@ export default function Example() {
   return (
     <FloatingRouteMarker
       label="Avoids tolls"
-      startEnhancer={({ size }) => <Search size={size} />}
-      endEnhancer={({ size }) => <ChevronRight size={size} />}
+      startEnhancer={({ size }) => <Search size={size} title="" />}
+      endEnhancer={({ size }) => <ChevronRight size={size} title="" />}
     />
   );
 }
diff --git a/documentation-site/examples/icon/button.tsx b/documentation-site/examples/icon/button.tsx
index a8addad1a6..8c8a67d645 100644
--- a/documentation-site/examples/icon/button.tsx
+++ b/documentation-site/examples/icon/button.tsx
@@ -9,11 +9,15 @@ export default function Example() {
   return (
     <div>
       <div className={css({ paddingBottom: theme.sizing.scale300 })}>
-        <Button startEnhancer={ChevronLeft}>Start Enhancer</Button>
+        <Button startEnhancer={() => <ChevronLeft title="" />}>
+          Start Enhancer
+        </Button>
       </div>
 
       <div className={css({ paddingBottom: theme.sizing.scale300 })}>
-        <Button endEnhancer={ChevronRight}>End Enhancer</Button>
+        <Button endEnhancer={() => <ChevronRight title="" />}>
+          End Enhancer
+        </Button>
       </div>
 
       <div>
diff --git a/documentation-site/examples/input/enhancers.tsx b/documentation-site/examples/input/enhancers.tsx
index 0fdd03d804..cac12eaf92 100644
--- a/documentation-site/examples/input/enhancers.tsx
+++ b/documentation-site/examples/input/enhancers.tsx
@@ -16,7 +16,7 @@ export default function Example() {
       />
       <br />
       <Input
-        endEnhancer={<Search size="18px" />}
+        endEnhancer={<Search size="18px" title="" />}
         placeholder="Input with an icon enhancer"
       />
     </React.Fragment>
diff --git a/documentation-site/examples/list/enhancers.tsx b/documentation-site/examples/list/enhancers.tsx
index 6fb3f7faf7..decd2b7c47 100644
--- a/documentation-site/examples/list/enhancers.tsx
+++ b/documentation-site/examples/list/enhancers.tsx
@@ -40,7 +40,7 @@ export default function Example() {
         <ListItemLabel>Label</ListItemLabel>
       </ListItem>
 
-      <ListItem endEnhancer={() => <ChevronRight />}>
+      <ListItem endEnhancer={() => <ChevronRight title="" />}>
         <ListItemLabel>Label</ListItemLabel>
       </ListItem>
 
diff --git a/documentation-site/examples/list/menu-adapter.tsx b/documentation-site/examples/list/menu-adapter.tsx
index 1d2f067095..228428a1eb 100644
--- a/documentation-site/examples/list/menu-adapter.tsx
+++ b/documentation-site/examples/list/menu-adapter.tsx
@@ -32,7 +32,7 @@ export default function Example() {
                     ref={ref}
                     artwork={props.item.icon}
                     artworkSize={ARTWORK_SIZES.LARGE}
-                    endEnhancer={() => <ChevronRight />}
+                    endEnhancer={() => <ChevronRight title="" />}
                   >
                     <ListItemLabel description={props.item.subtitle}>
                       {props.item.title}
diff --git a/documentation-site/examples/list/sublist.tsx b/documentation-site/examples/list/sublist.tsx
index bb453e0ba3..41b3c446f7 100644
--- a/documentation-site/examples/list/sublist.tsx
+++ b/documentation-site/examples/list/sublist.tsx
@@ -20,13 +20,17 @@ export default function Example() {
         <ListItemLabel sublist>Label Two</ListItemLabel>
       </ListItem>
 
-      <ListItem artwork={Search} endEnhancer={() => <ChevronRight />} sublist>
+      <ListItem
+        artwork={Search}
+        endEnhancer={() => <ChevronRight title="" />}
+        sublist
+      >
         <ListItemLabel sublist>Label Three</ListItemLabel>
       </ListItem>
       <ListItem
         artwork={Search}
         artworkSize={ARTWORK_SIZES.SMALL}
-        endEnhancer={() => <ChevronRight />}
+        endEnhancer={() => <ChevronRight title="" />}
         sublist
       >
         <ListItemLabel sublist>Label Four</ListItemLabel>
@@ -35,7 +39,7 @@ export default function Example() {
         artwork={Search}
         // Medium is aliased to Small when sublist
         artworkSize={ARTWORK_SIZES.MEDIUM}
-        endEnhancer={() => <ChevronRight />}
+        endEnhancer={() => <ChevronRight title="" />}
         sublist
       >
         <ListItemLabel sublist>Label Five</ListItemLabel>
diff --git a/documentation-site/examples/list/tap-target.tsx b/documentation-site/examples/list/tap-target.tsx
index 508f24abdb..55252b0b20 100644
--- a/documentation-site/examples/list/tap-target.tsx
+++ b/documentation-site/examples/list/tap-target.tsx
@@ -17,7 +17,7 @@ export default function Example() {
         onClick={() => console.log("click")}
         artwork={Check}
         artworkSize={ARTWORK_SIZES.MEDIUM}
-        endEnhancer={() => <ChevronRight />}
+        endEnhancer={() => <ChevronRight title="" />}
       >
         <ListItemLabel description="description">Label</ListItemLabel>
       </ListItem>
diff --git a/documentation-site/examples/snackbar/action-button-usage.tsx b/documentation-site/examples/snackbar/action-button-usage.tsx
index 029ec7f048..ea15cad410 100644
--- a/documentation-site/examples/snackbar/action-button-usage.tsx
+++ b/documentation-site/examples/snackbar/action-button-usage.tsx
@@ -23,7 +23,7 @@ export default function ActionButtonUsage() {
 
       <div className={css({paddingBottom: '24px'})}>
         <SnackbarElement
-          startEnhancer={({size}) => <Delete size={size} />}
+          startEnhancer={({size}) => <Delete size={size} title="" />}
           message="The address was removed from your saved places"
           actionMessage="Undo"
           actionOnClick={() => {
@@ -35,7 +35,7 @@ export default function ActionButtonUsage() {
 
       <div className={css({paddingBottom: '24px'})}>
         <SnackbarElement
-          startEnhancer={({size}) => <Check size={size} />}
+          startEnhancer={({size}) => <Check size={size} title="" />}
           message="The address was added to your saved places"
           actionMessage="See list"
           actionOnClick={() => {
@@ -47,7 +47,7 @@ export default function ActionButtonUsage() {
 
       <div className={css({paddingBottom: '24px'})}>
         <SnackbarElement
-          startEnhancer={({size}) => <DeleteAlt size={size} />}
+          startEnhancer={({size}) => <DeleteAlt size={size} title="" />}
           message="Your address wasn't added"
           actionMessage="Try again"
           actionOnClick={() => {
diff --git a/documentation-site/examples/table/pagination.tsx b/documentation-site/examples/table/pagination.tsx
index de008e366f..ee6a223624 100644
--- a/documentation-site/examples/table/pagination.tsx
+++ b/documentation-site/examples/table/pagination.tsx
@@ -101,7 +101,10 @@ function PaginatedTable(props: { data: any[]; columns: any[] }) {
           )}
           placement={PLACEMENT.bottom}
         >
-          <Button kind={KIND.tertiary} endEnhancer={TriangleDown}>
+          <Button
+            kind={KIND.tertiary}
+            endEnhancer={() => <TriangleDown title="" />}
+          >
             {`${limit} Rows`}
           </Button>
         </StatefulPopover>
@@ -118,7 +121,7 @@ function PaginatedTable(props: { data: any[]; columns: any[] }) {
 
 const COLUMNS = Array.from({ length: 5 }, () => "Label");
 const DATA = Array.from({ length: 45 }, (_, i) =>
-  Array.from({ length: 5 }, () => `row: ${i + 1}`),
+  Array.from({ length: 5 }, () => `row: ${i + 1}`)
 );
 
 export default function Example() {