Merge pull request #494 from SStan-prog/scott-stanfel-patch-5

accessibility and seo fixes
jsconfjp · Nov 11, 2024 · bc4cb01 · bc4cb01
2 parents 1462339 + 344c54e
commit bc4cb01
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 10 deletions.
diff --git a/2024/src/components/LanguageSwitch.tsx b/2024/src/components/LanguageSwitch.tsx
@@ -7,10 +7,14 @@ type Props = {
   onChange: (lang: string) => void
 }
 
-const Lang = styled.a<{ selected: boolean }>`
+const Lang = styled.button<{ selected: boolean }>`
+  border: none;
+  background: transparent;
+  cursor: pointer;
   text-decoration: none;
   font-family: ${({ theme }) => theme.fonts.header};
   font-size: 2rem;
+  font-weight: bold;
   color: ${({ theme }) => theme.colors.text};
   border-bottom: 4px solid
     ${({ theme, selected }) =>
@@ -50,7 +54,6 @@ export function LanguageSwitch(props: Props) {
           <React.Fragment key={langKey}>
             <Lang
               selected={selected}
-              href={!hasMounted || selected ? undefined : "#"}
               onClick={
                 !hasMounted || selected
                   ? undefined

diff --git a/2024/src/components/Layout.tsx b/2024/src/components/Layout.tsx
@@ -71,6 +71,7 @@ const BackToTopButton = styled.button`
   display: inline-block;
   font-family: ${({ theme }) => theme.fonts.header};
   font-size: 1.6rem;
+  font-weight: bold;
   padding: 10px 24px;
   color: white;
   background-color: ${({ theme }) => theme.colors.primary};

diff --git a/2024/src/components/Member.tsx b/2024/src/components/Member.tsx
@@ -15,7 +15,12 @@ export function Member(props: Props) {
   return (
     <div>
       <a href={props.url} target="_blank" rel="noopener">
-        <img width="100%" loading="lazy" src={`${props.avatar}?size=160`} />
+        <img
+          width="100%"
+          loading="lazy"
+          alt={props.name}
+          src={`${props.avatar}?size=160`}
+        />
         <MemberName>{props.name}</MemberName>
       </a>
     </div>

diff --git a/2024/src/components/Title.tsx b/2024/src/components/Title.tsx
@@ -3,9 +3,22 @@ import styled from "styled-components"
 
 export type Props = {
   children: React.ReactNode
+  heading?: "h1" | "h2"
 }
 
-const Box = styled.h1`
+const H1 = styled.h1`
+  text-align: center;
+  margin: 40px 0 60px;
+  font-size: ${({ theme }) => theme.fontSizes.title};
+  text-transform: none;
+  font-family: ${({ theme }) => theme.fonts.header};
+
+  @media print {
+    display: none;
+  }
+`
+
+const H2 = styled.h2`
   text-align: center;
   margin: 40px 0 60px;
   font-size: ${({ theme }) => theme.fontSizes.title};
@@ -18,7 +31,7 @@ const Box = styled.h1`
 `
 
 export function Title(props: Props) {
-  const { children } = props
+  const { children, heading = "h1" } = props
 
-  return <Box>{children}</Box>
+  return heading === "h1" ? <H1>{children}</H1> : <H2>{children}</H2>
 }
diff --git a/2024/src/pages/index.tsx b/2024/src/pages/index.tsx
@@ -315,14 +315,14 @@ export default function IndexPage() {
               if (i % 2 !== 0) {
                 return (
                   <Card key={i}>
-                    <Title>{subTitle}</Title>
+                    <Title heading="h2">{subTitle}</Title>
                     <Centerize>{render()}</Centerize>
                   </Card>
                 )
               }
               return (
                 <Centerize key={i}>
-                  <Title>{subTitle}</Title>
+                  <Title heading="h2">{subTitle}</Title>
                   {render()}
                 </Centerize>
               )
@@ -331,7 +331,7 @@ export default function IndexPage() {
           <Centerize>
             {jnaMembers.length > 0 ? (
               <>
-                <Title>{t("organizingTeam")}</Title>
+                <Title heading="h2">{t("organizingTeam")}</Title>
                 <OrganizersBox>
                   {jnaMembers.map(
                     ({ node: member }: { node: any }, i: number) => (
@@ -343,7 +343,7 @@ export default function IndexPage() {
             ) : null}
             {notJnaMembers.length > 0 ? (
               <>
-                <Title>{t("volunteerTeam")}</Title>
+                <Title heading="h2">{t("volunteerTeam")}</Title>
                 <MembersBox>
                   {notJnaMembers.map(
                     ({ node: member }: { node: any }, i: number) => (