a11y: fix up issues, add hover ability to find el

components/Footer.tsx → components/DebugWrapper.tsx

@@ -5,7 +5,7 @@ import { styled } from '@mui/material/styles';
 
 const Debug = lazy(() => import('components/internal/Debug'));
 
-const StyledFooter = styled('footer')`
+const StyledDebugger = styled('div')`
   position: fixed;
   bottom: ${(props) => props.theme.spacing(1)};
   right: ${(props) => props.theme.spacing(2.5)}; // Swipeable drawer width.
@@ -16,15 +16,15 @@ const StyledFooter = styled('footer')`
 `;
 
 // NB: we memoize here because it has the a11y script included on dev which is expensive.
-const Footer = memo(function Footer() {
+const DebugWrapper = memo(function DebugWrapper() {
   const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
     setIsLoaded(true);
   }, []);
 
   return (
-    <StyledFooter>
+    <StyledDebugger>
       {process.env.NODE_ENV === 'development' && isLoaded && (
         <>
           <Suspense fallback={<span />}>
@@ -33,7 +33,7 @@ const Footer = memo(function Footer() {
           <Help />
         </>
       )}
-    </StyledFooter>
+    </StyledDebugger>
   );
 });
-export default Footer;
+export default DebugWrapper;

components/Experiment.tsx

@@ -8,9 +8,9 @@ export function Experiment({ children, name }: { children: React.ReactNode; name
   Children.map(children, (child) => {
     if (
       // @ts-ignore fix up later
-      (isExperimentOn && (child.type.name !== 'Variant' || child.props.name.toLowerCase() !== 'off')) ||
+      (isExperimentOn && (child.type.displayName !== 'Variant' || child.props.name.toLowerCase() !== 'off')) ||
       // @ts-ignore fix up later
-      (!isExperimentOn && child.type.name === 'Variant' && child.props.name.toLowerCase() === 'off')
+      (!isExperimentOn && child.type.displayName === 'Variant' && child.props.name.toLowerCase() === 'off')
     ) {
       filteredChildren.push(child);
     }
@@ -22,3 +22,4 @@ export function Experiment({ children, name }: { children: React.ReactNode; name
 export function Variant({ children }: { children: React.ReactNode; name: string }) {
   return <>{children}</>;
 }
+Variant.displayName = 'Variant';

components/Header.tsx

@@ -15,7 +15,7 @@ const StyledHeader = styled('header')`
 export default function Header() {
   return (
     <StyledHeader>
-      <nav>
+      <nav title="Login">
         <Login />
       </nav>
     </StyledHeader>

components/content/ContentBase.tsx

@@ -8,7 +8,7 @@ import { PropsWithChildren } from 'react';
 import SiteMap from './SiteMap';
 import { ThemeProvider } from '@mui/material/styles';
 
-const Container = styled('div', { label: 'ContentBaseContainer' })`
+const Container = styled('main', { label: 'ContentBaseContainer' })`
   display: flex;
   align-items: flex-start;
   flex-direction: column;

components/content/Footer.tsx

@@ -23,7 +23,7 @@ const StyledFooter = styled('footer')`
     min-width: 0;
   }
 
-  color: ${(props) => props.theme.palette.text.secondary};
+  color: ${(props) => props.theme.palette.grey[500]};
   border: 1px solid ${(props) => props.theme.palette.primary.light};
   box-shadow: 1px 1px ${(props) => props.theme.palette.primary.light},
     2px 2px ${(props) => props.theme.palette.primary.light}, 3px 3px ${(props) => props.theme.palette.primary.light};

components/content/SiteMap.tsx

@@ -250,7 +250,7 @@ export default function SiteMap({ content, username }: { content?: Content; user
       >
         {isMenuOpen ? <CloseIcon /> : <MenuIcon />}
       </Hamburger>
-      <Nav id="hw-sitemap" $isMenuOpen={isMenuOpen} onMouseUp={handleCloseMenu}>
+      <Nav id="hw-sitemap" title="sitemap" $isMenuOpen={isMenuOpen} onMouseUp={handleCloseMenu}>
         <ul>
           {contentOwner.logo ? (
             <LogoWrapper id="hw-sitemap-logo" className="h-card">

components/index.tsx

@@ -34,7 +34,7 @@ export {
 export { useTheme, styled } from '@mui/material/styles';
 
 export { default as FeedWrapper } from './FeedWrapper';
-export { default as Footer } from './Footer';
+export { default as DebugWrapper } from './DebugWrapper';
 export { default as Header } from './Header';
 export { default as InfiniteFeed } from './InfiniteFeed';
 export { default as ItemWrapper } from './ItemWrapper';

components/internal/A11y.tsx

@@ -72,15 +72,35 @@ export default function A11y() {
       return null;
     }
 
+    const handleMouseOver = (target: string) => {
+      document.querySelector(target)?.setAttribute('style', 'outline: 3px solid hotpink');
+    };
+    const handleMouseOut = (target: string) => {
+      document.querySelector(target)?.setAttribute('style', '');
+    };
+
     return (
       <div>
         <TypeFilter variant="h3">{typeFilter}</TypeFilter>
         <List>
           {violationsByType.map((violation) => (
-            <ListItem key={violation.id}>
-              <strong>{violation.id}</strong>: {violation.description}
-              &nbsp;(
-              <em>{violation.nodes.map((node) => node.target).join(', ')}</em>)
+            <ListItem key={violation.id} sx={{ mb: 2 }}>
+              <strong style={{ minWidth: '200px' }}>{violation.id}:</strong>
+              <span style={{ minWidth: '200px' }}>{violation.description}</span>
+              &nbsp;
+              <em style={{ minWidth: '200px' }}>
+                <pre>
+                  {violation.nodes.map((node, idx) => (
+                    <div
+                      key={idx}
+                      onMouseOver={() => handleMouseOver(node.target as unknown as string)}
+                      onMouseOut={() => handleMouseOut(node.target as unknown as string)}
+                    >
+                      {node.target}
+                    </div>
+                  ))}
+                </pre>
+              </em>
             </ListItem>
           ))}
         </List>

pages/[[...slug]].tsx

@@ -124,9 +124,9 @@ export default function Content({ username, name, host }: { username: string; na
           title={title}
           username={content.username}
         />
-        <div id="hw-content">
+        <main id="hw-content">
           <Simple content={content} />
-        </div>
+        </main>
       </ThemeProvider>
     );
   }

pages/_app.tsx

@@ -5,7 +5,7 @@ import * as serviceWorkerRegistration from 'app/serviceWorkerRegistration';
 import { APOLLO_STATE_PROP_NAME, useApollo } from 'app/apollo';
 import { ApolloProvider, NormalizedCacheObject, gql } from '@apollo/client';
 import { CacheProvider, EmotionCache } from '@emotion/react';
-import { Footer, Header } from 'components';
+import { DebugWrapper, Header } from 'components';
 import { IntlProvider, setupCreateIntl } from 'i18n';
 import { Marck_Script, Press_Start_2P } from 'next/font/google';
 import { createEmotionCache, muiTheme } from 'styles';
@@ -129,7 +129,7 @@ function MyApp({ Component, emotionCache = clientSideEmotionCache, pageProps }:
                     </Head>
                     <Component {...pageProps} />
                     <Analytics />
-                    <Footer />
+                    <DebugWrapper />
                   </div>
                 </ErrorBoundary>
               </UserContext.Provider>

styles/flowers/palette.ts

@@ -2,7 +2,7 @@ import { PaletteOptions } from '@mui/material';
 
 const primary = {
   light: '#09f',
-  main: '#06e',
+  main: '#3984ff',
   dark: '#16147f',
 };
 
@@ -49,7 +49,7 @@ const basics = {
   faintTransparentGrey: 'rgba(0, 0, 0, 0.04)',
   transparentGrey: 'rgba(0, 0, 0, 0.1)',
   transparentBlack: 'rgba(0, 0, 0, 0.75)',
-  black: '#111',
+  black: '#161313',
 };
 
 const accents = {};

styles/globals.css

@@ -8,7 +8,7 @@ html {
 }
 
 a:any-link {
-  color: #06e;
+  color: #3984ff;
   text-decoration: none;
 }
 

styles/palette.ts

@@ -2,7 +2,7 @@ import { PaletteOptions } from '@mui/material';
 
 const primary = {
   light: '#09f',
-  main: '#06e',
+  main: '#3984ff',
   dark: '#16147f',
 };
 
@@ -49,7 +49,7 @@ const basics = {
   faintTransparentGrey: 'rgba(0, 0, 0, 0.04)',
   transparentGrey: 'rgba(0, 0, 0, 0.1)',
   transparentBlack: 'rgba(0, 0, 0, 0.75)',
-  black: '#111',
+  black: '#161313',
 };
 
 const accents = {};