Fix header and list-of-links structure in footer (#2204)

* Use heading elements for footer headings [DISCO-44] * Structure list of links in footer as lists * Add key * No bullets in footer link lists; heading roles for Attribution/Citation headings * Bizarre losses of code coverage * Code Runner test
openstax · May 6, 2024 · d08cce5 · d08cce5
1 parent 96e1784
commit d08cce5
Show file tree

Hide file tree

Showing 11 changed files with 2,892 additions and 742 deletions.
diff --git a/src/app/components/Footer/index.tsx b/src/app/components/Footer/index.tsx
@@ -72,53 +72,67 @@ const SocialIconMessage: React.FunctionComponent<{
   </Styled.SocialIcon>
 );
 
+function LinkList({children}: React.PropsWithChildren<{}>) {
+  return (
+    <Styled.LinkListWrapper>
+      {React.Children.toArray(children).map((c, i) => <li key={i}>{c}</li>)}
+    </Styled.LinkListWrapper>
+  );
+}
+
 // tslint:disable-next-line:variable-name
 const Column1 = () => (
   <Styled.Column1>
     <ColumnHeadingMessage id='i18n:footer:column1:help' />
-    <FooterLinkMessage href='/contact' id='i18n:footer:column1:contact-us' />
-    <FooterLinkMessage
-      href={supportCenterLink}
-      id='i18n:footer:column1:support-center'
-      target='_blank'
-      rel='noopener'
-    />
-    <FooterLinkMessage href='/faq' id='i18n:footer:column1:faqs' />
+    <LinkList>
+      <FooterLinkMessage href='/contact' id='i18n:footer:column1:contact-us' />
+      <FooterLinkMessage
+        href={supportCenterLink}
+        id='i18n:footer:column1:support-center'
+        target='_blank'
+        rel='noopener'
+      />
+      <FooterLinkMessage href='/faq' id='i18n:footer:column1:faqs' />
+    </LinkList>
   </Styled.Column1>
 );
 
 // tslint:disable-next-line:variable-name
 const Column2 = () => (
   <Styled.Column2>
     <ColumnHeadingMessage id='i18n:footer:column2:openstax' />
-    <FooterLinkMessage href='/press' id='i18n:footer:column2:press' />
-    <FooterLinkMessage
-      href={newsletterLink}
-      target='_blank'
-      rel='noopener'
-      id='i18n:footer:column2:newsletter'
-    />
-    <FooterLinkMessage href='/careers' id='i18n:footer:column2:careers' />
+    <LinkList>
+      <FooterLinkMessage href='/press' id='i18n:footer:column2:press' />
+      <FooterLinkMessage
+        href={newsletterLink}
+        target='_blank'
+        rel='noopener'
+        id='i18n:footer:column2:newsletter'
+      />
+      <FooterLinkMessage href='/careers' id='i18n:footer:column2:careers' />
+    </LinkList>
   </Styled.Column2>
 );
 
 // tslint:disable-next-line:variable-name
 const Column3 = () => (
   <Styled.Column3>
     <ColumnHeadingMessage id='i18n:footer:column3:policies' />
-    <FooterLinkMessage
-      href='/accessibility-statement'
-      id='i18n:footer:column3:accessibility'
-    />
-    <FooterLinkMessage href='/tos' id='i18n:footer:column3:terms' />
-    <FooterLinkMessage href='/license' id='i18n:footer:column3:license' />
-    <FooterLinkMessage
-      href='/privacy-policy'
-      id='i18n:footer:column3:privacy-policy'
-    />
-    <Styled.ManageCookiesLink>
-      <BareMessage id='i18n:footer:column3:manage-cookies' />
-    </Styled.ManageCookiesLink>
+    <LinkList>
+      <FooterLinkMessage
+        href='/accessibility-statement'
+        id='i18n:footer:column3:accessibility'
+      />
+      <FooterLinkMessage href='/tos' id='i18n:footer:column3:terms' />
+      <FooterLinkMessage href='/license' id='i18n:footer:column3:license' />
+      <FooterLinkMessage
+        href='/privacy-policy'
+        id='i18n:footer:column3:privacy-policy'
+      />
+      <Styled.ManageCookiesLink>
+        <BareMessage id='i18n:footer:column3:manage-cookies' />
+      </Styled.ManageCookiesLink>
+    </LinkList>
   </Styled.Column3>
 );
 
@@ -176,7 +190,7 @@ const Footer = ({
     <Styled.InnerFooter>
       <Styled.FooterTop>
         <Styled.TopBoxed>
-          <Styled.Heading role='heading' aria-level={2}>
+          <Styled.Heading>
             <BareMessage id='i18n:footer:heading' />
           </Styled.Heading>
           <Mission />

diff --git a/src/app/components/Footer/styled.tsx b/src/app/components/Footer/styled.tsx
@@ -165,8 +165,9 @@ export const TopBoxed = styled.div`
 `;
 
 // tslint:disable-next-line:variable-name
-export const Heading = styled.div`
+export const Heading = styled.h2`
   grid-area: headline;
+  margin: 0;
 
   @media (min-width: ${desktopMinWidth}em) {
     font-size: 2.4rem;
@@ -275,11 +276,12 @@ export const Column3 = styled.div`
 `;
 
 // tslint:disable-next-line:variable-name
-export const ColumnHeading = styled.div`
+export const ColumnHeading = styled.h3`
   font-size: 1.8rem;
   font-weight: bold;
   letter-spacing: -0.072rem;
   line-height: normal;
+  margin: 0;
 
   @media (max-width: ${mobileMinWidth}em) {
     line-height: 4.5rem;
@@ -344,15 +346,26 @@ export const Copyrights = styled.div`
 `;
 
 // tslint:disable-next-line:variable-name
-export const Social = styled.ul`
+export const Social = styled.menu`
   align-items: center;
   display: grid;
   grid-auto-flow: column;
   grid-gap: 1rem;
   justify-content: end;
+  list-style: none;
   overflow: visible;
 `;
 
+// tslint:disable-next-line:variable-name
+export const LinkListWrapper = styled.menu`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  list-style: none;
+`;
+
 // tslint:disable-next-line:variable-name
 const InnerSocialIcon = styled.a`
   ${columnLink}

diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -984,7 +984,7 @@ Array [
   </a> and you must attribute OpenStax.
 </p>
 
-<strong>Attribution information</strong>
+<strong role=\\"heading\\" aria-level=\\"2\\">Attribution information</strong>
 <ul>
   <li>
     If you are redistributing all or part of this book in a print format,
@@ -1002,7 +1002,7 @@ Array [
   </li>
 </ul>
 
-<strong>Citation information</strong>
+<strong role=\\"heading\\" aria-level=\\"2\\">Citation information</strong>
 <ul>
   <li>
     Use the information below to generate a citation. We recommend using a

diff --git a/src/app/content/components/Attribution.spec.tsx b/src/app/content/components/Attribution.spec.tsx
@@ -199,5 +199,17 @@ describe('Attribution', () => {
       const component = renderer.create(render());
       expect(component).toMatchSnapshot();
     });
+
+    it('renders CodeRunnerNote when slug includes python', async() => {
+      const saveSlug = mockCmsBook.meta.slug;
+
+      mockCmsBook.meta.slug = 'programming-python';
+      store.dispatch(
+        actions.receiveBook({...formatBookData(book, mockCmsBook), id: '1b4ee0ce-ee89-44fa-a5e7-a0db9f0c94b1'})
+      );
+      const component = renderer.create(render());
+      expect(component).toMatchSnapshot();
+      mockCmsBook.meta.slug = saveSlug;
+    });
   });
 });