perf directory

aelmanaa · aelmanaa · commit 318d934d9ca0 · 2025-08-11T15:11:46.000+02:00
diff --git a/src/components/CCIP/Breadcrumb/Breadcrumb.css b/src/components/CCIP/Breadcrumb/Breadcrumb.css
@@ -2,16 +2,16 @@
   display: flex;
   gap: var(--space-2x);
   align-items: center;
-  color: var(--gray-500);
+  color: var(--gray-700);
   flex-wrap: wrap;
 }
 
 .ccip-hero__breadcrumb a {
-  color: var(--gray-500);
+  color: var(--gray-700);
 }
 
 .ccip-hero__breadcrumb a:hover {
-  color: var(--gray-700);
+  color: var(--gray-800);
 }
 
 .ccip-hero__breadcrumb a:last-child {
diff --git a/src/components/CCIP/Cards/TokenCard.tsx b/src/components/CCIP/Cards/TokenCard.tsx
@@ -16,8 +16,8 @@ const TokenCard = memo(function TokenCard({ id, logo, link, onClick }: TokenCard
         <div className="token-card__container">
           {/* We cannot use the normal Image/onError syntax as a fallback as the element is server rendered 
           and the onerror does not seem to work correctly. Using Picture will also not work. */}
-          <object data={logo} type="image/png">
-            <img src={fallbackTokenIconUrl} alt="" loading="lazy" />
+          <object data={logo} type="image/png" aria-label={`${id} token logo`}>
+            <img src={fallbackTokenIconUrl} alt={`${id} token logo`} loading="lazy" />
           </object>
           <h3>{id}</h3>
         </div>
@@ -28,8 +28,8 @@ const TokenCard = memo(function TokenCard({ id, logo, link, onClick }: TokenCard
   if (onClick) {
     return (
       <div className="token-card__container" onClick={onClick} role="button">
-        <object data={logo} type="image/png">
-          <img src={fallbackTokenIconUrl} alt="" loading="lazy" />
+        <object data={logo} type="image/png" aria-label={`${id} token logo`}>
+          <img src={fallbackTokenIconUrl} alt={`${id} token logo`} loading="lazy" />
         </object>
         <h3>{id}</h3>
       </div>
diff --git a/src/components/CCIP/ChainHero/ChainHero.css b/src/components/CCIP/ChainHero/ChainHero.css
@@ -77,7 +77,7 @@
   font-size: 14px;
   line-height: 22px;
   padding-bottom: var(--space-4x);
-  color: var(--gray-500);
+  color: var(--gray-700);
 }
 
 .ccip-chain-hero__feeTokens__item {
@@ -121,7 +121,7 @@
 .ccip-chain-hero__token-logo__symbol {
   font-weight: 500;
   font-size: 18px;
-  color: var(--gray-500);
+  color: var(--gray-700);
 }
 
 .ccip-chain-hero__feeTokens__list {
diff --git a/src/components/CCIP/ChainHero/ChainHero.tsx b/src/components/CCIP/ChainHero/ChainHero.tsx
@@ -338,8 +338,14 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
                               width="20px"
                               height="20px"
                               className="ccip-chain-hero__feeTokens__item__logo"
+                              aria-label={`${token.name} token logo`}
                             >
-                              <img src={fallbackTokenIconUrl} alt={token.name} width="20px" height="20px" />
+                              <img
+                                src={fallbackTokenIconUrl}
+                                alt={`${token.name} token logo`}
+                                width="20px"
+                                height="20px"
+                              />
                             </object>
                             <div>{token.name}</div>
                             <Address endLength={4} contractUrl={contractUrl} address={address} />
diff --git a/src/components/CCIP/Drawer/Drawer.tsx b/src/components/CCIP/Drawer/Drawer.tsx
@@ -64,15 +64,15 @@ function Drawer() {
     >
       <div className="drawer__container" ref={drawerContentRef}>
         <div className="drawer__close">
-          <button id="drawer-exit" onClick={handleClose}>
+          <button id="drawer-exit" onClick={handleClose} aria-label="Close drawer">
             <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M15.1667 1.33331L1.83337 14.6666M1.83337 1.33331L15.1667 14.6666" stroke="white" />
             </svg>
           </button>
           <label htmlFor="drawer-exit">Esc</label>
         </div>
         <div className="drawer__content">
-          <button onClick={handleClose} className="drawer__closeMobile">
+          <button onClick={handleClose} className="drawer__closeMobile" aria-label="Close drawer">
             <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M15.1667 1.33331L1.83337 14.6666M1.83337 1.33331L15.1667 14.6666" stroke="#000000" />
             </svg>
diff --git a/src/components/CCIP/Drawer/TokenDrawer.tsx b/src/components/CCIP/Drawer/TokenDrawer.tsx
@@ -246,7 +246,11 @@ function TokenDrawer({
                             ))
                           }}
                         >
-                          <img src={networkDetails?.logo} alt={networkDetails?.name} className="ccip-table__logo" />
+                          <img
+                            src={networkDetails?.logo}
+                            alt={`${networkDetails?.name} blockchain logo`}
+                            className="ccip-table__logo"
+                          />
                           {networkDetails?.name}
                           {tokenPaused && (
                             <span className="ccip-table__paused-badge" title="Transfers are currently paused">
diff --git a/src/components/CCIP/Search/Search.css b/src/components/CCIP/Search/Search.css
@@ -116,15 +116,15 @@
 .ccip-hero__search-results li span {
   flex: 1;
   text-align: end;
-  color: var(--gray-500);
+  color: var(--gray-700);
 }
 
 .ccip-hero__search-results__title,
 .ccip-hero__search-results__no-result {
   display: block;
   font-size: 18px;
   line-height: 24px;
-  color: var(--gray-500);
+  color: var(--gray-700);
   padding-left: var(--space-6x);
   padding-right: var(--space-6x);
   padding-top: var(--space-6x);
diff --git a/src/components/CCIP/Search/Search.tsx b/src/components/CCIP/Search/Search.tsx
@@ -140,7 +140,7 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
         })}
         ref={searchRef}
       >
-        <img src="/assets/icons/search.svg" alt="" />
+        <img src="/assets/icons/search.svg" alt="Search icon" />
         <input
           type="search"
           placeholder="Network/Token/Lane"
@@ -167,7 +167,7 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
                       <a href={`/ccip/directory/${environment}/chain/${network.chain}`}>
                         <img
                           src={network.logo}
-                          alt=""
+                          alt={`${network.name} blockchain logo`}
                           loading="lazy"
                           onError={({ currentTarget }) => {
                             currentTarget.onerror = null // prevents looping
@@ -196,7 +196,7 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
                       <a href={`/ccip/directory/${environment}/token/${token.id}`}>
                         <img
                           src={token.logo}
-                          alt=""
+                          alt={`${token.id} token logo`}
                           loading="lazy"
                           onError={({ currentTarget }) => {
                             currentTarget.onerror = null // prevents looping
@@ -242,15 +242,15 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
                         <div className="ccip-hero__search-results__lane-images">
                           <img
                             src={lane.sourceNetwork.logo}
-                            alt=""
+                            alt={`${lane.sourceNetwork.name} source blockchain logo`}
                             onError={({ currentTarget }) => {
                               currentTarget.onerror = null // prevents looping
                               currentTarget.src = fallbackTokenIconUrl
                             }}
                           />
                           <img
                             src={lane.destinationNetwork.logo}
-                            alt=""
+                            alt={`${lane.destinationNetwork.name} destination blockchain logo`}
                             onError={({ currentTarget }) => {
                               currentTarget.onerror = null // prevents looping
                               currentTarget.src = fallbackTokenIconUrl
diff --git a/src/components/CCIP/SeeMore/SeeMore.css b/src/components/CCIP/SeeMore/SeeMore.css
@@ -2,7 +2,7 @@
   height: 22px;
   font-size: 14px;
   line-height: 22px;
-  color: #2e7bff;
+  color: var(--blue-700);
   margin-top: var(--space-6x);
 }
 .seeMore__container {
diff --git a/src/components/CCIP/SeeMore/SeeMore.tsx b/src/components/CCIP/SeeMore/SeeMore.tsx
@@ -6,7 +6,7 @@ interface SeeMoreProps {
 function SeeMore({ onClick }: SeeMoreProps) {
   return (
     <div className="seeMore__container">
-      <button className="seeMore" onClick={onClick}>
+      <button className="seeMore" onClick={onClick} aria-label="See more items">
         See more
       </button>
     </div>
diff --git a/src/components/CCIP/Tables/ChainTable.tsx b/src/components/CCIP/Tables/ChainTable.tsx
@@ -144,7 +144,7 @@ function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps)
                         ))
                       }}
                     >
-                      <img src={network.logo} alt={network.name} className="ccip-table__logo" />
+                      <img src={network.logo} alt={`${network.name} blockchain logo`} className="ccip-table__logo" />
                       {network.name}
                     </div>
                   </td>
diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css
@@ -38,7 +38,7 @@
   text-align: start;
   background-color: transparent;
   padding: 0;
-  color: var(--gray-500);
+  color: var(--gray-700);
   padding-bottom: var(--space-4x);
   align-content: baseline;
 }
diff --git a/src/components/CCIP/Tables/TableSearchInput.tsx b/src/components/CCIP/Tables/TableSearchInput.tsx
@@ -19,16 +19,34 @@ function TableSearchInput({ search, setSearch }: TableSearchInputProps) {
 
   return (
     <div className="tableSearchInput" onClick={() => setIsExpanded(true)} ref={searchRef}>
-      <img src="/assets/icons/search.svg" alt="" />
+      <img src="/assets/icons/search.svg" alt="Search icon" />
       {isExpanded ? (
         <input
           type="search"
           placeholder="Search..."
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           autoFocus
+          aria-label="Search table"
         />
-      ) : null}
+      ) : (
+        <button
+          type="button"
+          aria-label="Open search"
+          style={{
+            background: "transparent",
+            border: "none",
+            cursor: "pointer",
+            padding: 0,
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            top: 0,
+            left: 0,
+          }}
+          onClick={() => setIsExpanded(true)}
+        />
+      )}
     </div>
   )
 }
diff --git a/src/components/CCIP/Tables/Tabs.css b/src/components/CCIP/Tables/Tabs.css
@@ -11,7 +11,7 @@
   font-weight: 500;
   font-size: 18px;
   line-height: var(--space-4x);
-  color: var(--gray-500);
+  color: var(--gray-700);
   padding-bottom: 8px;
 }
 
diff --git a/src/components/CCIP/Tables/TokenChainsTable.tsx b/src/components/CCIP/Tables/TokenChainsTable.tsx
@@ -89,7 +89,7 @@ function TokenChainsTable({ networks, token, lanes, environment }: TableProps) {
                         <span className="ccip-table__logoContainer">
                           <img
                             src={network.logo}
-                            alt={network.name}
+                            alt={`${network.name} blockchain logo`}
                             className="ccip-table__logo"
                             onError={({ currentTarget }) => {
                               currentTarget.onerror = null // prevents looping
diff --git a/src/components/StickyHeader/StickyHeader.tsx b/src/components/StickyHeader/StickyHeader.tsx
@@ -18,8 +18,7 @@ const StickyHeader: FunctionalComponent<{
 
   return (
     <div
-      className={styles.container}
-      aria-hidden={hidden}
+      className={clsx(styles.container, hidden && styles.hidden)}
       style={
         expanded && !hidden
           ? undefined
@@ -33,7 +32,7 @@ const StickyHeader: FunctionalComponent<{
         <TableOfContents initialHeadings={initialHeadings} onUpdateActiveTitle={(title) => setActiveTitle(title)} />
       </div>
       <div className={styles.heading}>
-        <button ref={expandButtonRef} className={buttonClassName}>
+        <button ref={expandButtonRef} className={buttonClassName} disabled={hidden}>
           On this page
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
             <path d="M8.70711 12.9498C8.31658 13.3403 7.68342 13.3403 7.29289 12.9498C6.90237 12.5592 6.90237 11.9261 7.29289 11.5355L11.5355 7.2929C11.9261 6.90238 12.5592 6.90238 12.9497 7.2929C13.3403 7.68342 13.3403 8.31659 12.9497 8.70711L8.70711 12.9498Z" />
diff --git a/src/components/StickyHeader/stickyHeader.module.css b/src/components/StickyHeader/stickyHeader.module.css
@@ -12,15 +12,16 @@
   --heading-max-height: var(--space-20x);
 }
 
-.container[aria-hidden="true"] {
+.container.hidden {
   bottom: calc(-1 * var(--heading-max-height));
   opacity: 0;
+  pointer-events: none;
   transition:
     bottom 400ms ease,
     opacity 0ms 400ms;
 }
 
-.container[aria-hidden="false"] {
+.container:not(.hidden) {
   bottom: -1px;
   opacity: 1;
   transition:
diff --git a/src/features/notifications/components/HeaderBanner.tsx b/src/features/notifications/components/HeaderBanner.tsx
@@ -63,6 +63,7 @@ export const HeaderBanner: React.FC<{ bannerContent?: BannerContent }> = ({ bann
           localStorage.setItem("headerBannerDismissed", bannerContent.description)
           setIsDismissed(true)
         }}
+        aria-label="Dismiss banner"
       >
         <CloseIcon />
       </button>

Original file line number	Diff line number	Diff line change
`@@ -2,16 +2,16 @@`
`2`	`2`	`display: flex;`
`3`	`3`	`gap: var(--space-2x);`
`4`	`4`	`align-items: center;`
`5`		`- color: var(--gray-500);`
	`5`	`+ color: var(--gray-700);`
`6`	`6`	`flex-wrap: wrap;`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`.ccip-hero__breadcrumb a {`
`10`		`- color: var(--gray-500);`
	`10`	`+ color: var(--gray-700);`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`.ccip-hero__breadcrumb a:hover {`
`14`		`- color: var(--gray-700);`
	`14`	`+ color: var(--gray-800);`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.ccip-hero__breadcrumb a:last-child {`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`height: 22px;`
`3`	`3`	`font-size: 14px;`
`4`	`4`	`line-height: 22px;`
`5`		`- color: #2e7bff;`
	`5`	`+ color: var(--blue-700);`
`6`	`6`	`margin-top: var(--space-6x);`
`7`	`7`	`}`
`8`	`8`	`.seeMore__container {`