fix(icons): add title="" to icons (#5329)

add title="" to icons to prevent the wrong name being read on screen readers
uber · Mar 20, 2024 · 6fabc71 · 6fabc71
1 parent 7ef8af3
commit 6fabc71
Show file tree

Hide file tree

Showing 19 changed files with 57 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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() {