Add visible focus indicator for app bar (#968)

Author: lisajian

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;
+    }
   }
 }

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>

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',