docs(812): add accessibility statement to docs site

site/components/page-introduction/page-introduction.tsx

@@ -10,6 +10,8 @@ const heroIsImage = (hero: PageIntroductionProps['hero']): hero is ImageProps =>
   Boolean(hero && (hero as any).src);
 
 export const PageIntroduction: React.FC<PageIntroductionProps> = ({
+  nameAs = 'h1',
+  introductionAs, // eg 'h2'
   type,
   name,
   introduction,
@@ -31,7 +33,7 @@ export const PageIntroduction: React.FC<PageIntroductionProps> = ({
       </Block>
       <Block spaceStack={{xs: 'space050', md: 'space070'}}>
         <TextBlock
-          as="h1"
+          as={nameAs}
           stylePreset="inkContrast"
           typographyPreset={{
             xs: 'editorialHeadline060',
@@ -46,6 +48,7 @@ export const PageIntroduction: React.FC<PageIntroductionProps> = ({
     <ComponentPageCellCompact>
       <Block spaceStack={{xs: 'space070', md: 'space080'}}>
         <TextBlock
+          as={introductionAs}
           stylePreset="inkBase"
           typographyPreset={{
             xs: 'editorialSubheadline010',

site/components/page-introduction/types.ts

@@ -1,6 +1,8 @@
 import {ImageProps} from 'newskit';
 
 export interface PageIntroductionProps {
+  nameAs?: 'h1' | 'h2';
+  introductionAs?: 'h1' | 'h2' | 'h3';
   type?: string;
   name: string;
   introduction: React.ReactNode;

site/components/site-footer.tsx

@@ -113,6 +113,15 @@ const SiteFooter: React.FC<FooterProps> = ({cellProps = {xs: 12}}) => (
                   Terms & conditions
                 </Link>
               </FooterLink>
+              <FooterLink>
+                <Link
+                  type="standalone"
+                  href="/help/accessibility-statement"
+                  overrides={linkOverrides}
+                >
+                  Accessibility
+                </Link>
+              </FooterLink>
             </FooterMenu>
           </InstrumentationProvider>
         </Cell>

site/pages/help/accessibility-statement.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import Layout, {LayoutProps} from '../../components/layout';
+import {PageIntroduction} from '../../components/page-introduction';
+import {ComponentPageCell} from '../../components/layout-cells';
+import {Link} from '../../components/link';
+import {HeadNextSeo} from '../../components/head-next-seo';
+import {
+  ContentSection,
+  ContentSecondary,
+  ContentColSpan,
+} from '../../components/content-structure';
+
+const Accessibility = ({path, ...props}: LayoutProps) => (
+  <Layout {...props} path={`${path}-new`}>
+    <HeadNextSeo
+      title="NewsKit Accessibility Statement"
+      description="NewsKit Accessibility Statement"
+      image={{
+        url: 'social/about.png',
+        alt: 'NewsKit Accessibility Statement',
+      }}
+    />
+
+    <PageIntroduction
+      nameAs="h1"
+      introductionAs="h2"
+      name="NewsKit Accessibility Statement"
+      introduction={
+        <>
+          This accessibility statement applies to the website{' '}
+          <Link href="https://newskit.co.uk" external={false}>
+            newskit.co.uk
+          </Link>
+          {', '}
+          which is run by the NewsKit Design System at News UK.
+        </>
+      }
+    />
+
+    <ComponentPageCell>
+      <ContentSection sectionName="Commitment">
+        <ContentSecondary
+          headline="Commitment"
+          description={
+            <>
+              NewsKit is committed to providing a website that is accessible to
+              the widest possible audience, regardless of technology or ability.
+              We are actively working to increase accessibility and usability.
+            </>
+          }
+          childrenColSpan={ContentColSpan.TEXT}
+        />
+      </ContentSection>
+
+      <ContentSection sectionName="Standards">
+        <ContentSecondary
+          headline="Standards"
+          description={
+            <>
+              This website endeavours to meet the Web Content Accessibility
+              Guidelines (WCAG){' '}
+              <Link
+                href="https://www.w3.org/WAI/WCAG2AA-Conformance"
+                target="_blank"
+              >
+                2.1 AA standard
+              </Link>
+              . WCAG guidelines explain how to make content accessible for
+              people with disabilities, but also make the experience better for
+              all people.
+              <br />
+              <br />
+              Whilst NewsKit strives to adhere to WCAG guidelines and standards
+              for accessibility, it is not always possible to do so in all areas
+              of the website. We are working to bring all areas of the site up
+              to a WCAG 2.1 AA standard.
+            </>
+          }
+        />
+      </ContentSection>
+
+      <ContentSection sectionName="Feedback">
+        <ContentSecondary
+          headline="Feedback"
+          description={
+            <>
+              We welcome your feedback and encourage you to contact us if you
+              have experienced any difficulty viewing, listening to or
+              navigating content on this website. We’d also like to hear if you
+              have identified any content or functionality that you believe is
+              not accessible to people with disabilities. If you have any
+              difficulty accessing this website, please contact us at{' '}
+              <Link href="mailto:[email protected]" target="_blank">
+                [email protected]
+              </Link>{' '}
+              or raise an{' '}
+              <Link
+                href="https://github.com/newscorp-ghfb/NewsKit/issues/new/choose"
+                target="_blank"
+              >
+                A11y Investigation ticket
+              </Link>{' '}
+              on GitHub. We take your feedback seriously and will apply it to
+              our ongoing efforts to improve the user experience for all of our
+              customers.
+            </>
+          }
+        />
+      </ContentSection>
+    </ComponentPageCell>
+  </Layout>
+);
+
+export default Accessibility;

site/pages/help/terms-and-conditions.tsx

@@ -36,13 +36,15 @@ const Introduction = ({path, ...props}: LayoutProps) => (
       }}
     />
     <PageIntroduction
+      nameAs="h1"
+      introductionAs="h2"
       name="Website terms and conditions of use"
       introduction={
         <>
           Welcome to the Website Terms and Conditions of Use (<b>Terms</b>)
           which apply to{' '}
-          <Link href="https://newskit.co.uk/" target="_blank">
-            https://newskit.co.uk/
+          <Link href="https://newskit.co.uk" external={false}>
+            newskit.co.uk
           </Link>{' '}
           (the <b>Website</b>).
         </>

site/utils/colors-token-description.tsx

@@ -71,10 +71,10 @@ export const INTERFACE_DESCRIPTION = {
     'Interface colour complimentary to interfaceInformative010',
   interfaceNotice010: 'Background for notice or warning messages',
   interfaceNotice020: 'Interface colour complimentary to interfaceNotice010',
-  interfaceNegative010: 'Background for success messages',
+  interfaceNegative010: 'Background for error messages',
   interfaceNegative020:
     'Interface colour complimentary to interfaceNegative010',
-  interfacePositive010: 'Background for error messages',
+  interfacePositive010: 'Background for success messages',
   interfacePositive020:
     'Interface colour complimentary to interfacePositive010',
   interfaceSkeleton010: