Revert making Footer sections render their visually hidden headings

Amsterdam · Oct 26, 2023 · 0cd1330 · 0cd1330
1 parent f474006
commit 0cd1330
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 50 deletions.
diff --git a/packages/react/src/Footer/Footer.tsx b/packages/react/src/Footer/Footer.tsx
@@ -13,49 +13,15 @@ import {
   RefAttributes,
 } from 'react'
 import { GridCell, GridCellProps, PageGrid } from '../Grid'
-import { Heading } from '../Heading'
-import { HeadingLevel } from '../Heading/Heading'
-import { VisuallyHidden } from '../VisuallyHidden'
-
-interface FooterHeadingProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Describes the scope of the footer menu to users of assistive technologies.
-   * @default 'Over deze website'
-   */
-  heading?: string
-  /**
-   * The hierarchical level of the heading.
-   * @default 2
-   */
-  headingLevel?: HeadingLevel
-}
-
-/** Renders a heading for screen readers at the top of both Footer sections. */
-const FooterHeading = ({ heading, headingLevel }: FooterHeadingProps) => {
-  if (!heading) {
-    return undefined
-  }
-
-  return (
-    <VisuallyHidden>
-      <Heading level={headingLevel}>{heading}</Heading>
-    </VisuallyHidden>
-  )
-}
-
-FooterHeading.displayName = 'FooterHeading'
 
 export const FooterTop = forwardRef(
   (
-    { children, className, heading = 'Colofon', headingLevel = 2, ...restProps }: PropsWithChildren<FooterHeadingProps>,
+    { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
-    <>
-      <Footer.Heading heading={heading} headingLevel={headingLevel} />
-      <PageGrid className={clsx('amsterdam-footer__top', className)} ref={ref} {...restProps}>
-        {children}
-      </PageGrid>
-    </>
+    <PageGrid {...restProps} ref={ref} className={clsx('amsterdam-footer__top', className)}>
+      {children}
+    </PageGrid>
   ),
 )
 
@@ -65,7 +31,7 @@ export type FooterColumnProps = HTMLAttributes<HTMLDivElement> & GridCellProps
 
 export const FooterColumn = forwardRef(
   ({ children, className, ...restProps }: PropsWithChildren<FooterColumnProps>, ref: ForwardedRef<HTMLDivElement>) => (
-    <GridCell className={clsx('amsterdam-footer__column', className)} ref={ref} {...restProps}>
+    <GridCell {...restProps} ref={ref} className={clsx('amsterdam-footer__column', className)}>
       {children}
     </GridCell>
   ),
@@ -74,12 +40,8 @@ export const FooterColumn = forwardRef(
 FooterColumn.displayName = 'FooterColumn'
 
 export const FooterBottom = forwardRef(
-  (
-    { children, className, heading = 'Over deze website', headingLevel = 2 }: PropsWithChildren<FooterHeadingProps>,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => (
-    <div className={clsx('amsterdam-footer__bottom', className)} ref={ref}>
-      <Footer.Heading heading={heading} headingLevel={headingLevel} />
+  ({ children, className }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>, ref: ForwardedRef<HTMLDivElement>) => (
+    <div ref={ref} className={clsx('amsterdam-footer__bottom', className)}>
       {children}
     </div>
   ),
@@ -89,18 +51,17 @@ FooterBottom.displayName = 'FooterBottom'
 
 interface FooterComponent
   extends ForwardRefExoticComponent<PropsWithChildren<HTMLAttributes<HTMLElement>> & RefAttributes<HTMLElement>> {
+  Top: typeof FooterTop
   Bottom: typeof FooterBottom
   Column: typeof FooterColumn
-  Heading: typeof FooterHeading
-  Top: typeof FooterTop
 }
 
 export const Footer = forwardRef(
   (
     { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>,
     ref: ForwardedRef<HTMLElement>,
   ) => (
-    <footer className={clsx('amsterdam-footer', className)} ref={ref} {...restProps}>
+    <footer {...restProps} ref={ref} className={clsx('amsterdam-footer', className)}>
       {children}
     </footer>
   ),
@@ -109,10 +70,8 @@ export const Footer = forwardRef(
 Footer.Top = FooterTop
 Footer.Bottom = FooterBottom
 Footer.Column = FooterColumn
-Footer.Heading = FooterHeading
 
 Footer.displayName = 'Footer'
 Footer.Top.displayName = 'Footer.Top'
 Footer.Bottom.displayName = 'Footer.Bottom'
 Footer.Column.displayName = 'Footer.Column'
-Footer.Heading.displayName = 'Footer.Heading'
diff --git a/storybook/storybook-react/src/Footer/Footer.stories.tsx b/storybook/storybook-react/src/Footer/Footer.stories.tsx
@@ -12,6 +12,7 @@ import {
   PageMenu,
   Paragraph,
   UnorderedList,
+  VisuallyHidden,
 } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 
@@ -38,6 +39,9 @@ export const Default: Story = {
   args: {
     children: [
       <Footer.Top key="footer-top">
+        <VisuallyHidden>
+          <Heading>Colofon</Heading>
+        </VisuallyHidden>
         <Footer.Column span={{ narrow: 4, medium: 3, wide: 3 }}>
           <Heading level={2} size="level-4" inverseColor>
             Contact
@@ -112,6 +116,9 @@ export const Default: Story = {
         </Footer.Column>
       </Footer.Top>,
       <Footer.Bottom key="footer-bottom">
+        <VisuallyHidden>
+          <Heading level={2}>Over deze website</Heading>
+        </VisuallyHidden>
         <PageGrid>
           <GridCell fullWidth>
             <PageMenu>