test: Bring accessibility up to 100% in Lighthouse check

.github/workflows/lighthouse-ci.yaml

@@ -0,0 +1,27 @@
+name: Build project and run Lighthouse CI
+on: [push]
+jobs:
+  lighthouse_ci:
+    name: Lighthouse CI
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+      - name: npm ci
+        run: |
+          npm ci
+          npm run build
+      - name: Install chrome
+        run: |
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          sudo apt-get update
+          sudo apt-get install -y ./google-chrome-stable_current_amd64.deb
+      - name: Run Lighthouse CI
+        run: |
+          npm install -g @lhci/[email protected]
+          lhci autorun
+        env:
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

client/src/components/Header/Header.js

@@ -41,6 +41,7 @@ const Header = () => {
           }}
           color="success"
           className="header__btn-menu"
+          title="Menu"
         >
           <MenuRoundedIcon
             sx={{ fontSize: '2.5rem', color: 'black' }}

client/src/index.html

@@ -5,7 +5,7 @@
 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="initial-scale=1.0">
     <meta name="description" content="WATER THE TREES">
     <meta name="author" content="Code for San Francisco">
     <meta name="theme-color" content="#ffffff">

client/src/pages/NewTree/NewTreeButton.js

@@ -84,6 +84,7 @@ export default function NewTreeButton({ map }) {
         value="Plant"
         selected={isPlanting}
         onChange={handlePlantClick}
+        title="Plant New Tree"
       />
       {map && <NewTreePlantingMarker map={map} onPlantClick={openPanel} />}
     </>

client/src/pages/UserLocation/GeolocateControl.js

@@ -60,7 +60,7 @@ export default function GeolocateControl({ map }) {
 
   return (
     <>
-      <IconButton onClick={handleClick} style={{ color: '#333' }}>
+      <IconButton title="Find Your Location" onClick={handleClick} style={{ color: '#333' }}>
         <GeolocateIcon
           isTracking={isTracking}
           isFollowingUser={isFollowingUser}

client/src/tests/__snapshots__/Header.test.js.snap

@@ -390,6 +390,7 @@ exports[`<Header /> spec renders Header correctly 1`] = `
           <button
             class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSuccess MuiIconButton-sizeSmall header__btn-menu emotion-0"
             tabindex="0"
+            title="Menu"
             type="button"
           >
             <svg
@@ -687,6 +688,7 @@ exports[`<Header /> spec renders Header correctly 1`] = `
         <button
           class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSuccess MuiIconButton-sizeSmall header__btn-menu emotion-0"
           tabindex="0"
+          title="Menu"
           type="button"
         >
           <svg

lighthouserc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  ci: {
+    collect: {
+      startServerCommand: 'npm run start:dev',
+      url: ['http://localhost:3001'],
+      disableDevShmUsage: true,
+      settings: {
+        'chromeFlags': '--no-sandbox --headless --disable-gpu',
+      },
+    },
+    assert: {
+      assertions: {
+        'categories:accessibility': ['error', { minScore: 1 }],
+        'categories:best-practices': ['error', { minScore: 1 }],
+      },
+    },
+    upload: {
+      target: 'temporary-public-storage',
+    },
+  },
+};

server/index.js

@@ -38,4 +38,4 @@ app.get('/*', (req, res) => {
 });
 
 const httpServer = http.createServer(app);
-httpServer.listen(port, () => logger.info(`${host}:${port}`));
+httpServer.listen(port, () => logger.info(`listening on ${host}:${port}`));