Add digital accessibility improvements to Base Bridge (#439) (#448)

apps/bridge/next.config.js

@@ -3,6 +3,10 @@ const { BugsnagSourceMapUploaderPlugin } = require('webpack-bugsnag-plugins');
 const isProdEnv = process.env.NODE_ENV === 'production';
 
 const baseConfig = {
+  i18n: {
+    locales: ['en-US'],
+    defaultLocale: 'en-US',
+  },
   // Enable advanced features
   compiler: {
     reactRemoveProperties: true,

apps/bridge/src/components/AssetList/AssetList.tsx

@@ -43,7 +43,7 @@ export function AssetList({
         className="flex cursor-pointer flex-row items-center font-sans"
         onClick={onAssetListClick}
       >
-        <div className="align-center justify-center font-sans text-4xl text-stone-600 sm:text-6xl">
+        <div className="align-center justify-center font-sans text-4xl text-stone-400 sm:text-6xl">
           {selectedAssetSymbol}
         </div>
         {isOpen ? (

apps/bridge/src/components/BridgeInput/BridgeInput.tsx

@@ -121,7 +121,7 @@ export function BridgeInput({
       <div className="mb-4 flex flex-row items-center">
         <div className="flex flex-row items-center justify-center text-white">
           <div>
-            <Image src={inputChain?.svg} width={32} height={32} alt={inputChain?.name} />
+            <Image src={inputChain?.svg} width={32} height={32} alt={`${inputChain?.name} logo`} />
           </div>
           <div className="ml-3 flex flex-col font-sans">
             <div className="text-md text-white">From</div>
@@ -131,7 +131,7 @@ export function BridgeInput({
         <ArrowRightIcon className="ml-3 mr-3 h-4 w-4 text-white" />
         <div className="flex flex-row items-center justify-center text-white">
           <div>
-            <Image src={outputChain?.svg} width={32} height={32} alt={outputChain?.name} />
+            <Image src={outputChain?.svg} width={32} height={32} alt={`${outputChain?.name} logo`}/>
           </div>
           <div className="ml-3 flex flex-col font-sans">
             <div className="text-md text-white">To</div>
@@ -168,6 +168,7 @@ export function BridgeInput({
           min="0"
           value={amount}
           onChange={handleChangeAmount}
+          aria-label={`Amount to ${isWithdraw ? "withdraw": "deposit"}`}
         />
         <div className="relative flex flex-row">
           <AssetList
@@ -183,14 +184,14 @@ export function BridgeInput({
         </div>
       </div>
       {error && (
-        <div className="flex flex-row space-x-0.5 text-sm text-stone-600">
+        <div className="flex flex-row space-x-0.5 text-sm text-stone-400">
           <span className="text-md font-sans text-red-600">{error}</span>
         </div>
       )}
       <div className="mt-6 flex flex-row items-center justify-between">
         <div className="flex flex-col space-x-0.5">
           <span className="text-md font-sans text-white">{conversionRate} USD</span>
-          <span className="text-md font-sans text-stone-600">
+          <span className="text-md font-sans text-stone-400">
             {formatCryptoBalance(balance)} {selectedAssetSymbol} available
           </span>
         </div>

apps/bridge/src/components/BridgeToInput/BridgeToInput.tsx

@@ -29,6 +29,7 @@ export function BridgeToInput({ bridgeTo, setBridgeTo, action }: BridgeToInputPr
         placeholder="Wallet address"
         value={bridgeTo}
         onChange={handleChangeBridgeTo}
+        aria-label="Wallet address"
       />
     </div>
   );

apps/bridge/src/components/Faq/FaqSidebar.tsx

@@ -3,7 +3,7 @@ import { QuestionAccordion } from 'apps/bridge/src/components/Faq/QuestionAccord
 export function FaqSidebar() {
   return (
     <div className="flex h-full w-full flex-col p-4 font-sans lg:w-[420px] lg:border-l lg:border-sidebar-border">
-      <span className="mb-8 text-base font-medium text-stone-500">Frequently asked questions</span>
+      <span className="mb-8 text-base font-medium text-stone-400">Frequently asked questions</span>
 
       <QuestionAccordion
         question="What is Base Bridge?"

apps/bridge/src/components/Header/Header.tsx

@@ -15,9 +15,9 @@ export function Header() {
           <Popover.Button className="block sm:hidden">
             <Image src="/icons/hamburger.svg" width="24" height="24" alt="Menu" />
           </Popover.Button>
-          <h2 className="grow	text-center font-mono text-2xl uppercase text-white sm:grow-0">
+          <h1 className="grow	text-center font-mono text-2xl uppercase text-white sm:grow-0">
             {pathname === '/transactions' ? 'Transactions' : 'Bridge'}
-          </h2>
+          </h1>
           <div className="hidden sm:block">
             <RainbowConnectButton />
           </div>

apps/bridge/src/components/Sidebar/Sidebar.tsx

@@ -30,7 +30,7 @@ export function Sidebar({ children }: SidebarProps) {
       <div className="flex h-screen w-60 flex-col border-r border-sidebar-border pl-6 pt-6 max-[700px]:hidden">
         <div className="grow">
           <div className="flex pb-14">
-            <Link href="/">
+            <Link href="/" aria-label="Base Bridge">
               <Logo color="white" />
             </Link>
           </div>

apps/bridge/src/components/TransactionSummary/TransactionSummary.tsx

@@ -61,20 +61,20 @@ export function TransactionSummary({
           )}
           <div className="flex grow flex-col text-white">
             <span className="font-medium">Receive {selectedAssetSymbol}</span>
-            <p className="text-stone-500">On {outputChain.summary.location}</p>
+            <p className="text-stone-400">On {outputChain.summary.location}</p>
           </div>
         </div>
         <div className="text-right">
           <span className="text-white">
             {cryptoBalance} {selectedAssetSymbol}
           </span>
-          <p className="text-stone-500">{fiatBalance}</p>
+          <p className="text-stone-400">{fiatBalance}</p>
         </div>
       </div>
       <div className="flex w-full flex-row justify-between p-6 pb-0 text-white">
         <div className="flex grow flex-col text-white">
           <span className="font-medium">Transfer time</span>
-          <p className="text-stone-500">
+          <p className="text-stone-400">
             {isDeposit ? '' : `Withdrawals take about ${challengeWindow} to finalize on Base`}
           </p>
         </div>
@@ -84,7 +84,7 @@ export function TransactionSummary({
         <span className="font-medium">Network fee (est.) </span>
         <div className="text-right">
           <span>{gasPrice.toFixed(9)} ETH</span>
-          <p className="text-stone-500">
+          <p className="text-stone-400">
             {ethConversionRate ? usdFormatter(gasPrice * ethConversionRate, 6) : '$0'} USD
           </p>
         </div>
@@ -93,7 +93,7 @@ export function TransactionSummary({
         <span className="font-medium">Total with (est.) fee</span>
         <div className="text-right">
           <span>{transactionTotal.toFixed(9)} ETH</span>
-          <p className="text-stone-500">
+          <p className="text-stone-400">
             {ethConversionRate ? usdFormatter(transactionTotal * ethConversionRate, 6) : '$0'} USD
           </p>
         </div>