From cb53b3305632672247dec0704b6b11eaf23f90d2 Mon Sep 17 00:00:00 2001
From: Lisa Jian <lisajian@google.com>
Date: Fri, 30 Jun 2023 16:24:02 -0700
Subject: [PATCH] Add visible focus indicator for app bar

---
 src/components/App/AppBar.scss |  6 ++++++
 src/components/App/AppBar.tsx  | 24 +++++++++++++++++-------
 src/index.tsx                  |  2 --
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/App/AppBar.scss b/src/components/App/AppBar.scss
index 163eab2e2..48649948a 100644
--- a/src/components/App/AppBar.scss
+++ b/src/components/App/AppBar.scss
@@ -53,5 +53,11 @@
     &:not(.mdc-tab--active) .mdc-tab__text-label {
       color: var(--mdc-theme-on-surface);
     }
+    .mdc-tab__ripple:hover::before {
+      opacity: 0.5;
+    }
+    .mdc-tab__ripple.mdc-ripple-upgraded--background-focused::before {
+      opacity: 0.5;
+    }
   }
 }
diff --git a/src/components/App/AppBar.tsx b/src/components/App/AppBar.tsx
index 9709444d7..120a84382 100644
--- a/src/components/App/AppBar.tsx
+++ b/src/components/App/AppBar.tsx
@@ -48,12 +48,18 @@ export const AppBar: React.FC<React.PropsWithChildren<Props>> = ({
     </Tab>
   ));
 
-  const activeTabIndex = navRoutes.findIndex((r) =>
-    matchPath(location.pathname, {
-      path: r.path,
-      exact: r.exact,
-    })
-  );
+  const [activeTabIndex, setActiveTab] = React.useState(0);
+
+  React.useEffect(() => {
+    setActiveTab(
+      navRoutes.findIndex((r) =>
+        matchPath(location.pathname, {
+          path: r.path,
+          exact: r.exact,
+        })
+      )
+    );
+  }, [location.pathname, navRoutes]);
 
   return (
     <ThemeProvider
@@ -73,7 +79,11 @@ export const AppBar: React.FC<React.PropsWithChildren<Props>> = ({
             </Typography>
           </div>
         </div>
-        <TabBar theme="onSurface" activeTabIndex={activeTabIndex}>
+        <TabBar
+          theme="onSurface"
+          activeTabIndex={activeTabIndex}
+          onActivate={(evt) => setActiveTab(evt.detail.index)}
+        >
           {tabs}
         </TabBar>
       </TopAppBar>
diff --git a/src/index.tsx b/src/index.tsx
index bb13f201e..7f9666f08 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -58,8 +58,6 @@ const root = createRoot(container!);
 // https://github.com/remix-run/react-router/issues/7870
 root.render(
   <RMWCProvider
-    // Globally disable ripples
-    ripple={false}
     typography={{
       /** Make headline3 <h3> instaed of div or span */
       headline3: 'h3',