diff --git a/site/components/page-introduction/page-introduction.tsx b/site/components/page-introduction/page-introduction.tsx index 83a38810a4..8d531ab237 100644 --- a/site/components/page-introduction/page-introduction.tsx +++ b/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 = ({ + nameAs = 'h1', + introductionAs, // eg 'h2' type, name, introduction, @@ -31,7 +33,7 @@ export const PageIntroduction: React.FC = ({ = ({ = ({cellProps = {xs: 12}}) => ( Terms & conditions + + + Accessibility + + diff --git a/site/pages/help/accessibility-statement.tsx b/site/pages/help/accessibility-statement.tsx new file mode 100644 index 0000000000..79a26a98cd --- /dev/null +++ b/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) => ( + + + + + This accessibility statement applies to the website{' '} + + newskit.co.uk + + {', '} + which is run by the NewsKit Design System at News UK. + + } + /> + + + + + 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} + /> + + + + + This website endeavours to meet the Web Content Accessibility + Guidelines (WCAG){' '} + + 2.1 AA standard + + . WCAG guidelines explain how to make content accessible for + people with disabilities, but also make the experience better for + all people. +
+
+ 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. + + } + /> + + + + + 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{' '} + + newskit@news.co.uk + {' '} + or raise an{' '} + + A11y Investigation ticket + {' '} + 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. + + } + /> + + + +); + +export default Accessibility; diff --git a/site/pages/help/terms-and-conditions.tsx b/site/pages/help/terms-and-conditions.tsx index 3d41d39b2f..3290a65dd3 100644 --- a/site/pages/help/terms-and-conditions.tsx +++ b/site/pages/help/terms-and-conditions.tsx @@ -36,13 +36,15 @@ const Introduction = ({path, ...props}: LayoutProps) => ( }} /> Welcome to the Website Terms and Conditions of Use (Terms) which apply to{' '} - - https://newskit.co.uk/ + + newskit.co.uk {' '} (the Website). diff --git a/site/utils/colors-token-description.tsx b/site/utils/colors-token-description.tsx index f235a7a3c5..997eeb0383 100644 --- a/site/utils/colors-token-description.tsx +++ 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: diff --git a/src/icons/__tests__/progress-indicator.stories.tsx b/src/icons/__tests__/progress-indicator.stories.tsx new file mode 100644 index 0000000000..1176a6e0e3 --- /dev/null +++ b/src/icons/__tests__/progress-indicator.stories.tsx @@ -0,0 +1,43 @@ +import {IndeterminateProgressIndicator} from '../filled/custom'; +import {StorybookCase, StorybookPage} from '../../test/storybook-comps'; +import * as React from 'react'; +import {Story as StoryType} from '@storybook/react/dist/ts3.9/client/preview/types-6-0'; +import {ThemeProvider} from '../../theme'; +import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object'; + +export const StoryProgressIndicator = () => ( + + + + + +); +StoryProgressIndicator.storyName = 'Default'; +StoryProgressIndicator.parameters = { + percy: {skip: true}, +}; + +export default { + title: 'Components/Progress indicator', + component: () => 'None', + parameters: { + nkDocs: { + title: 'Progress indicator', + url: 'https://newskit.co.uk/components/progress-indicator/', + description: + 'The progress indicator shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way.', + }, + }, + decorators: [ + (Story: StoryType, context: {globals: {backgrounds: {value: string}}}) => ( + + + + ), + ], +};