Merge pull request #265 from kronostechnologies/dev/DS-201

feat(ApplicationMenu): add SkipLink

packages/react/src/components/application-menu/application-menu.test.tsx

@@ -1,9 +1,11 @@
+import { shallow } from 'enzyme';
 import React from 'react';
+import { getByTestId } from '../../test-utils/enzyme-selectors';
 import { renderWithProviders } from '../../test-utils/renderer';
 import { ApplicationMenu } from './application-menu';
 
 describe('Application Menu', () => {
-    test('Matches the snapshot (desktop)', () => {
+    it('Matches the snapshot (desktop)', () => {
         const tree = renderWithProviders(
             <ApplicationMenu mobileDrawerContent={(<p>Test</p>)}>
                 Hello, World!
@@ -13,7 +15,7 @@ describe('Application Menu', () => {
         expect(tree).toMatchSnapshot();
     });
 
-    test('Matches the snapshot (mobile)', () => {
+    it('Matches the snapshot (mobile)', () => {
         const tree = renderWithProviders(
             <ApplicationMenu mobileDrawerContent={(<p>Test</p>)}>
                 Hello, World!
@@ -24,7 +26,7 @@ describe('Application Menu', () => {
         expect(tree).toMatchSnapshot();
     });
 
-    test('mobileDrawerContent prop adds a side drawer and burger button in mobile', () => {
+    it('mobileDrawerContent prop adds a side drawer and burger button in mobile', () => {
         const tree = renderWithProviders(
             <ApplicationMenu mobileDrawerContent={(<p>Test</p>)}>
                 Hello, World!
@@ -34,4 +36,16 @@ describe('Application Menu', () => {
 
         expect(tree).toMatchSnapshot();
     });
+
+    it('should have a SkipLink when skipLinkHref is provided', () => {
+        const wrapper = shallow(
+            <ApplicationMenu skipLinkHref="some href">
+                Hello, World!
+            </ApplicationMenu>,
+        );
+
+        const skipLink = getByTestId(wrapper, 'skip-link');
+
+        expect(skipLink.exists()).toBe(true);
+    });
 });

packages/react/src/components/application-menu/application-menu.tsx

@@ -1,8 +1,9 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React, { ComponentProps, ReactElement, ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { focus } from '../../utils/css-state';
 import { DeviceType, useDeviceContext } from '../device-context-provider/device-context-provider';
+import { SkipLink } from '../skip-link/skip-link';
 import { Content } from './application-menu-content';
 import { Logo, LogoName } from './logo';
 
@@ -23,7 +24,9 @@ const Header = styled.header<{ device: DeviceType }>`
     display: flex;
     height: ${({ device }) => (device === 'desktop' ? 48 : 56)}px;
     justify-content: space-between;
+    overflow: hidden;
     padding: ${({ device }) => getPadding(device)};
+    position: relative;
 `;
 
 const LogoWrapper = styled(Link)`
@@ -32,13 +35,31 @@ const LogoWrapper = styled(Link)`
     font-size: 1.5rem;
     font-weight: var(--font-bold);
     height: 100%;
+
     ${focus}
     > * {
         height: 100%;
     }
 `;
 
-interface HeadbandProps {
+const StyledSkipLink = styled(SkipLink)<ComponentProps<typeof SkipLink> & { isMobile?: boolean }>`
+    background-color: ${({ theme }) => theme.greys.white};
+    transform: translateY(-50%);
+    transition: top 0.2s cubic-bezier(0.5, 1, 0, 1);
+
+    &:not(:focus) {
+        clip: unset;
+        height: auto;
+        top: -50%;
+        width: auto;
+    }
+
+    &:focus {
+        top: 50%;
+    }
+`;
+
+interface ApplicationMenuProps {
     /** Set the app name to get the proper logos */
     appName?: LogoName;
     /** Right-side content */
@@ -51,6 +72,7 @@ interface HeadbandProps {
     logoHref?: string;
     /** What will be displayed inside the mobile drawer */
     mobileDrawerContent?: ReactNode;
+    skipLinkHref?: string;
 
     customLogo?: ReactNode;
 }
@@ -61,14 +83,19 @@ export function ApplicationMenu({
     className,
     logoHref = '/',
     mobileDrawerContent,
+    skipLinkHref,
     customLogo,
-}: HeadbandProps): ReactElement {
+}: ApplicationMenuProps): ReactElement {
     const { device, isMobile } = useDeviceContext();
 
     return (
         <Header className={className} device={device}>
+            {skipLinkHref && (
+                <StyledSkipLink data-testid="skip-link" href={skipLinkHref} />
+            )}
+
             <LogoWrapper to={logoHref} aria-label="Home">
-                { customLogo ?? <Logo name={appName} mobile={isMobile} /> }
+                {customLogo ?? <Logo name={appName} mobile={isMobile} />}
             </LogoWrapper>
 
             <Content mobileDrawerContent={mobileDrawerContent}>

packages/react/src/components/skip-link/skip-link.test.tsx

@@ -4,13 +4,13 @@ import { SkipLink } from './skip-link';
 
 describe('SkipLink', () => {
     test('Matches Snapshot (Desktop)', () => {
-        const tree = renderWithProviders(<SkipLink href="test">Test</SkipLink>, 'desktop');
+        const tree = renderWithProviders(<SkipLink href="test" />, 'desktop');
 
         expect(tree).toMatchSnapshot();
     });
 
     test('Matches Snapshot (Mobile)', () => {
-        const tree = renderWithProviders(<SkipLink href="test">Test</SkipLink>, 'mobile');
+        const tree = renderWithProviders(<SkipLink href="test" />, 'mobile');
 
         expect(tree).toMatchSnapshot();
     });

packages/react/src/components/skip-link/skip-link.tsx

@@ -1,37 +1,39 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React, { ReactElement } from 'react';
 import styled from 'styled-components';
+import { useTranslation } from '../../i18n/use-translation';
 import { AbstractButton } from '../buttons/abstract-button';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 
 const StyledLink = styled(AbstractButton).attrs({ as: 'a' })<{ href: string }>`
+    color: ${({ theme }) => theme.main['primary-1.1']};
+    font-size: ${({ isMobile }) => (isMobile ? 1 : 0.875)}rem;
+    font-weight: var(--font-normal);
+    letter-spacing: 0.015rem;
+    overflow: hidden;
+    position: absolute;
+    text-transform: unset;
+    white-space: nowrap;
+
     &:not(:focus) {
         clip: rect(1px, 1px, 1px, 1px);
         height: 1px;
-        overflow: hidden;
-        position: absolute;
-        white-space: nowrap;
         width: 1px;
     }
 
     &:focus {
         background-color: ${({ theme }) => theme.greys.white};
-        color: ${({ theme }) => theme.main['primary-1.1']};
-        font-size: ${({ isMobile }) => (isMobile ? 1 : 0.875)}rem;
-        font-weight: var(--font-normal);
-        letter-spacing: 0.015rem;
         position: absolute;
-        text-transform: unset;
     }
 `;
 
 interface SkipLinkProps {
-    children: ReactNode;
     className?: string;
     href: string;
 }
 
-export function SkipLink({ children, className, href }: SkipLinkProps): ReactElement {
+export function SkipLink({ className, href }: SkipLinkProps): ReactElement {
     const { isMobile } = useDeviceContext();
+    const { t } = useTranslation('skip-link');
 
-    return <StyledLink className={className} href={href} isMobile={isMobile}>{children}</StyledLink>;
+    return <StyledLink className={className} href={href} isMobile={isMobile}>{t('label')}</StyledLink>;
 }

packages/react/src/i18n/translations.ts

@@ -1,5 +1,8 @@
 export const Translations = {
     en: {
+        avatar: {
+            ariaLabel: '{{username}} avatar',
+        },
         datepicker: {
             calendarButtonLabel: 'Choose date',
             calendarButtonSelectedLabel: 'Choose date. The selected date is',
@@ -41,6 +44,9 @@ export const Translations = {
             inputAriaLabel: 'Select an option',
             validationErrorMessage: 'You must select an option',
         },
+        'skip-link': {
+            label: 'Skip to main content',
+        },
         'stepper-input': {
             validationErrorMessage: 'Invalid number',
         },
@@ -54,7 +60,7 @@ export const Translations = {
         'text-area': {
             validationErrorMessage: 'This text area is invalid',
             maxLengthValidationErrorMessage:
-            'The number of characters exceeds the maximum allowed. You must shorten the description.',
+                'The number of characters exceeds the maximum allowed. You must shorten the description.',
             characters: '{{current}}/{{max}} characters',
         },
         'text-input': {
@@ -63,11 +69,11 @@ export const Translations = {
         'user-profile': {
             ariaLabel: 'User menu',
         },
-        avatar: {
-            ariaLabel: '{{username}} avatar',
-        },
     },
     fr: {
+        avatar: {
+            ariaLabel: 'Avatar de {{username}}',
+        },
         datepicker: {
             calendarButtonLabel: 'Choisissez une date',
             calendarButtonSelectedLabel: 'Choisissez une date. La date sélectionnée est',
@@ -109,6 +115,9 @@ export const Translations = {
             inputAriaLabel: 'Choisissez une option',
             validationErrorMessage: 'Vous devez choisir une option',
         },
+        'skip-link': {
+            label: 'Passer au contenu principal',
+        },
         'stepper-input': {
             validationErrorMessage: 'Ce nombre n\'est pas valide',
         },
@@ -122,7 +131,7 @@ export const Translations = {
         'text-area': {
             validationErrorMessage: 'Cette zone texte n\'est pas valide',
             maxLengthValidationErrorMessage:
-            'Le nombre de caractères dépasse le maximum autorisé. Vous devez raccourcir la description.',
+                'Le nombre de caractères dépasse le maximum autorisé. Vous devez raccourcir la description.',
             characters: '{{current}}/{{max}} caractères',
         },
         'text-input': {
@@ -131,8 +140,5 @@ export const Translations = {
         'user-profile': {
             ariaLabel: 'Menu utilisateur',
         },
-        avatar: {
-            ariaLabel: 'Avatar de {{username}}',
-        },
     },
 };