@ndla/ui 25.1.0 → 25.3.0

package/lib/locale/messages-sma.d.ts

@@ -92,6 +92,8 @@ declare const messages: {
             myPage: string;
             deleteAccount: string;
             logout: string;
+            loginText: string;
+            loginTextLink: string;
             loginTerms: string;
             loginResourcePitch: string;
             loginWelcome: string;
@@ -392,13 +394,6 @@ declare const messages: {
                 name: string;
             };
         };
-        category: {
-            fellesfag: string;
-            yrkesfag: string;
-            studiespesialiserende: string;
-            imported: string;
-            heading: string;
-        };
         errorDescription: string;
         film: {
             header: string;
@@ -955,18 +950,6 @@ declare const messages: {
             text: string;
         };
     };
-    fagfornyelse: {
-        frontpage: {
-            heading: string;
-            text: string;
-            blogHeading: string;
-        };
-        badge: {
-            heading: string;
-            text: string;
-            linkText: string;
-        };
-    };
     frontPageToolbox: {
         heading: string;
         text: string;

package/lib/locale/messages-sma.js

@@ -248,13 +248,6 @@ var messages = _objectSpread(_objectSpread({
         name: 'Følg oss'
       }
     },
-    category: {
-      fellesfag: 'Fellesfag',
-      yrkesfag: 'Yrkesfag',
-      studiespesialiserende: 'Studieforberedende',
-      imported: 'Spolte fag',
-      heading: 'Hva lærer du?'
-    },
     errorDescription: 'Beklager, en feil oppstod under lasting av fagene.',
     film: {
       header: 'NDLA film',
@@ -787,18 +780,6 @@ var messages = _objectSpread(_objectSpread({
       text: 'er utarbeidet av'
     }
   },
-  fagfornyelse: {
-    frontpage: {
-      heading: 'Velkommen til sniktitt på Fagfornyelsen i NDLA',
-      text: 'Høsten 2020 og 2021 vil de nye læreplanene tre i kraft. I NDLA har vi startet med dette arbeidet allerede. Våre innholdsansvarlige lager hver dag nye supre læringsressurser som er tilrettelagt for de nye planene. På denne siden kan du se dem allerede nå.',
-      blogHeading: 'Vil du vite mer?'
-    },
-    badge: {
-      heading: 'Denne siden er tilrettelagt for fagfornyelsen 2020/2021',
-      text: 'Innholdet er under arbeid. Ikke på jakt etter dette?',
-      linkText: 'Gå til ndla.no for dagens innhold'
-    }
-  },
   frontPageToolbox: {
     heading: 'Verktøykassa',
     text: 'Har du lyst til å bli god til å presentere, eller vil du lære å studere smartere ved hjelp av riktig studieteknikk? Trenger du råd om hvordan du leser mest mulig effektivt til eksamen? I verktøykassa til NDLA finner du masse gode tips og råd!',
@@ -970,14 +951,14 @@ var messages = _objectSpread(_objectSpread({
     folders_plural: '{{count}} mapper',
     folder: {
       folder: 'Mappe',
-      "delete": 'Slett',
-      edit: 'Rediger',
+      "delete": 'Slett mappe',
+      edit: 'Rediger mappe',
       missingName: 'Skriv navn på mappe',
       folderDeleted: '"{{folderName}}" er slettet'
     },
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknagger',
-    confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke endres.',
+    confirmDeleteFolder: 'Er du sikker på at du vil slette mappa? Dersom mappa har undermappar vil disse også slettes. Denne handlinga kan ikkje endrast.',
     confirmDeleteTag: 'Er du sikker på at du vil slette emneknagg? Denne handlingen kan ikke endres.',
     myFolders: 'Mine mapper',
     myTags: 'Mine emneknagger',
@@ -999,13 +980,15 @@ var messages = _objectSpread(_objectSpread({
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',
+      loginText: 'Logg på med Feide for å få tilgang til Min NDLA. Vi ber om at du ikkje skriver noko støtende, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
+      loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjenner du våre vilkår for bruk',
       loginResourcePitch: 'Ønsker du å favorittmerke denne siden?',
       loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome: 'Velkommen til Min NDLA! Nå kan du lagre dine favorittressurser fra NDLA og organisere dem slik du ønsker i mapper og med emneknagger.',
       read: {
-        our: 'Les våre',
-        ours: 'Les vår'
+        our: 'Les vår',
+        ours: 'Les våre'
       },
       privacy: 'personvernerklæring her',
       questions: {
@@ -1043,7 +1026,7 @@ var messages = _objectSpread(_objectSpread({
       linkCopied: 'Kopiert til utklippstavle',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
-      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      addedToFolder: 'Ressurs er lagt i ',
       removedFromFolder: 'Fjernet fra "{{folderName}}"',
       titleUpdated: 'Tittel oppdatert',
       tagsUpdated: 'Emneknagger oppdatert',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "25.1.0",
+  "version": "25.3.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,22 +31,22 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/article-scripts": "^3.0.1",
-    "@ndla/button": "^3.3.5",
-    "@ndla/carousel": "^1.2.19",
+    "@ndla/article-scripts": "^3.0.2",
+    "@ndla/button": "^3.4.1",
+    "@ndla/carousel": "^1.2.21",
     "@ndla/core": "^2.3.5",
-    "@ndla/forms": "^3.1.8",
-    "@ndla/hooks": "^1.1.5",
-    "@ndla/icons": "^1.11.7",
-    "@ndla/licenses": "^5.0.12",
-    "@ndla/modal": "^1.3.3",
-    "@ndla/notion": "^3.1.36",
-    "@ndla/safelink": "^2.2.11",
+    "@ndla/forms": "^3.2.0",
+    "@ndla/hooks": "^1.1.6",
+    "@ndla/icons": "^1.12.0",
+    "@ndla/licenses": "^5.0.15",
+    "@ndla/modal": "^1.3.5",
+    "@ndla/notion": "^3.1.39",
+    "@ndla/safelink": "^2.2.13",
     "@ndla/switch": "^0.1.13",
-    "@ndla/tabs": "^1.1.18",
+    "@ndla/tabs": "^1.1.20",
     "@ndla/tooltip": "^2.2.1",
     "@ndla/types-learningpath-api": "^0.0.13",
-    "@ndla/util": "^3.0.1",
+    "@ndla/util": "^3.1.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "baebd3de72d4161213f0592ce05bc771f99d52d7"
+  "gitHead": "b00cf1eb600a2fa9b3113b51abd0c7b2f02d0860"
 }

package/src/Article/ArticleByline.tsx

@@ -75,8 +75,11 @@ const getSuppliersText = (suppliers: SupplierProps[], t: TFunction) => {
     return '';
   }
   return suppliers.length > 1
-    ? t('article.multipleSuppliersLabel', { names: renderContributors(suppliers, t) })
-    : t('article.supplierLabel', { name: renderContributors(suppliers, t) });
+    ? t('article.multipleSuppliersLabel', {
+        names: renderContributors(suppliers, t),
+        interpolation: { escapeValue: false },
+      })
+    : t('article.supplierLabel', { name: renderContributors(suppliers, t), interpolation: { escapeValue: false } });
 };
 
 const ArticleByline = ({
@@ -114,7 +117,10 @@ const ArticleByline = ({
             {showPrimaryContributors && (
               <PrimaryContributorsWrapper>
                 {authors.length > 0
-                  ? t('article.authorsLabel', { names: renderContributors(authors, t) })
+                  ? t('article.authorsLabel', {
+                      names: renderContributors(authors, t),
+                      interpolation: { escapeValue: false },
+                    })
                   : getSuppliersText(suppliers, t)}
               </PrimaryContributorsWrapper>
             )}
@@ -150,6 +156,7 @@ const ArticleByline = ({
             size="small"
             borderShape="rounded"
             outline
+            aria-live="assertive"
             data-copy-string={copyPageUrlLink}
             copyNode={t('article.copyPageLinkCopied')}>
             {t('article.copyPageLink')}

package/src/Article/ArticleFavoritesButton.tsx

@@ -31,7 +31,8 @@ export const ArticleFavoritesButton = ({ isFavorite, onToggleAddToFavorites, art
         inactiveIcon={<HeartOutline />}
         active={isFavorite}
         size="small"
-        ghostPill
+        colorTheme="light"
+        variant="ghost"
         onClick={() => onToggleAddToFavorites(articleId, !isFavorite)}
       />
     </Tooltip>

package/src/Article/ArticleSideBar.tsx

@@ -89,6 +89,7 @@ const ArticleSideBar = ({
             size="small"
             width="full"
             outline
+            aria-live="assertive"
             copyNode={t('article.copyPageLinkCopied')}
             data-copy-string={copyPageUrlLink}>
             {t('article.copyPageLink')}

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -92,7 +92,7 @@ const BreadcrumbItem = forwardRef<any, Props>(
     const { to, name, index } = item;
     const isLast = index === totalCount - 1;
     return (
-      <StyledListItem ref={liRef} autoCollapse={autoCollapse}>
+      <StyledListItem ref={liRef} autoCollapse={autoCollapse} aria-current={isLast ? 'page' : undefined}>
         <CollapseContainer autoCollapse={autoCollapse}>
           {renderItem ? (
             renderItem(item, totalCount)

package/src/ErrorMessage/ErrorMessage.tsx

@@ -47,6 +47,7 @@ interface Props {
     linksTitle?: string;
     back?: string;
     goToFrontPage?: string;
+    logInFailed?: string;
   };
   illustration?: {
     url: string;
@@ -78,6 +79,11 @@ export const ErrorMessage = ({ children, messages, illustration, illustrationEle
         <SafeLink to="/">{messages.goToFrontPage}</SafeLink>
       </div>
     )}
+    {messages.logInFailed && (
+      <div css={{ marginTop: spacing.xsmall }}>
+        <SafeLink to="/minndla">{messages.logInFailed}</SafeLink>
+      </div>
+    )}
     {children}
   </StyledErrorMessage>
 );

package/src/Frontpage/FrontpageHeader.tsx

@@ -2,7 +2,6 @@ import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { colors, spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-import { WithTranslation, withTranslation } from 'react-i18next';
 import FrontpageHeaderIllustration from './illustrations/FrontpageHeaderIllustration';
 import SvgLogo from '../Logo/SvgLogo';
 
@@ -48,20 +47,20 @@ const HeaderIllustrationWrapper = styled.div`
   }
 `;
 
-export type FrontPageHeaderProps = {
+interface FrontPageHeaderProps {
   locale: string;
   showHeader: boolean;
   children?: ReactNode;
-};
+}
 
-const FrontpageHeader = ({ locale, showHeader = true, children, t }: FrontPageHeaderProps & WithTranslation) => (
+const FrontpageHeader = ({ locale, showHeader = true, children }: FrontPageHeaderProps) => (
   <StyledHeaderWrapper>
     <StyledHeader>
-      <StyledLogo to="/" aria-label={t('logo.altText')}>
+      <StyledLogo to="/" aria-hidden="true">
         <SvgLogo locale={locale} />
       </StyledLogo>
       {showHeader && (
-        <HeaderIllustrationWrapper>
+        <HeaderIllustrationWrapper aria-hidden="true">
           <FrontpageHeaderIllustration />
         </HeaderIllustrationWrapper>
       )}
@@ -70,4 +69,4 @@ const FrontpageHeader = ({ locale, showHeader = true, children, t }: FrontPageHe
   </StyledHeaderWrapper>
 );
 
-export default withTranslation()(FrontpageHeader);
+export default FrontpageHeader;

package/src/Frontpage/FrontpageProgramMenu.tsx

@@ -119,7 +119,7 @@ const FrontpageProgramMenu = ({ programItems, subjectCategories, showBetaCursor
           <StyledMenuItem>{t('frontpageMenu.allsubjects')}</StyledMenuItem>
         </Button>
         {showBetaCursor && (
-          <CursorPlaceholder>
+          <CursorPlaceholder aria-hidden="true">
             <CursorWrapper>
               <LeftCursor hide={showSubjects} />
               <CursorTextWrapper>

package/src/Image/Image.tsx

@@ -64,10 +64,10 @@ const Image = ({
   contentType,
   sizes = '(min-width: 1024px) 1024px, 100vw',
   expandButton,
+  fallbackWidth = 1024,
   ...rest
 }: Props) => {
   const srcSet = rest.srcSet ?? getSrcSet(src, crop, focalPoint);
-  const fallbackWidth = rest.fallbackWidth ?? 1024;
   const queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
 
   if (contentType && contentType === 'image/gif') {

package/src/LanguageSelector/LanguageSelector.tsx

@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import FocusTrapReact from 'focus-trap-react';
-import Button, { appearances } from '@ndla/button';
+import { ButtonV2 as Button } from '@ndla/button';
 import { spacing, misc, colors, mq, breakpoints, animations, fonts, spacingUnit } from '@ndla/core';
 import { ChevronDown } from '@ndla/icons/common';
 import { useTranslation } from 'react-i18next';
@@ -95,12 +95,6 @@ const StyledSpan = styled.span`
   font-weight: ${fonts.weight.semibold};
 `;
 
-const styledInvertedOutlineLargeScreensOnly = css`
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${appearances.ghostPillOutlineInverted}
-  }
-`;
-
 type Props = {
   options: {
     [key: string]: {
@@ -116,31 +110,35 @@ type Props = {
   alwaysVisible?: boolean;
 };
 
-const LanguageSelector = ({
-  currentLanguage,
-  outline,
-  center,
-  inverted,
-  invertedOutlineLargeScreensOnly,
-  alwaysVisible,
-}: Props) => {
+interface StyledButtonProps {
+  outline?: boolean;
+  inverted?: boolean;
+}
+
+const StyledButton = styled(Button)<StyledButtonProps>`
+  border-color: ${({ inverted, outline }) =>
+    outline ? (inverted ? colors.white : colors.brand.primary) : 'transparent'};
+`;
+
+const LanguageSelector = ({ currentLanguage, outline, center, inverted, alwaysVisible }: Props) => {
   const { t, i18n } = useTranslation();
   const [infoLocale, setInfoLocale] = useState(i18n.language);
   const [isOpen, setIsOpen] = useState(false);
   return (
     <StyledWrapper alwaysVisible={alwaysVisible}>
-      <Button
-        ghostPillOutline={outline && !inverted}
-        ghostPill={!outline && !inverted}
-        ghostPillOutlineInverted={outline && inverted}
-        ghostPillInverted={!outline && inverted}
-        css={invertedOutlineLargeScreensOnly && styledInvertedOutlineLargeScreensOnly}
+      <StyledButton
+        outline={outline}
+        inverted={inverted}
+        shape="pill"
+        size="medium"
+        colorTheme="lighter"
+        variant="ghost"
         onClick={() => setIsOpen(true)}>
         <StyledSpan>
           {t(`languages.prefixChangeLanguage`)}: {t(`languages.${infoLocale}`)}
         </StyledSpan>
         <ChevronDown />
-      </Button>
+      </StyledButton>
       {isOpen && (
         <FocusTrapReact
           active
@@ -153,7 +151,7 @@ const LanguageSelector = ({
           }}>
           <StyledModal animateIn={isOpen} centered={center}>
             <Button
-              link
+              variant="link"
               onClick={() => {
                 setIsOpen(false);
               }}>

package/src/LearningPaths/LearningPathInformation.tsx

@@ -66,18 +66,19 @@ interface Props {
   description?: string;
   title: string;
   invertedStyle?: boolean;
+  id?: string;
   license?: {
     license: string;
   };
 }
 
-export const LearningPathInformation = ({ description, title, license, invertedStyle }: Props) => {
+export const LearningPathInformation = ({ description, title, license, invertedStyle, id }: Props) => {
   const { rights } = getLicenseByAbbreviation(license?.license || '', 'nb');
   return (
     <section className="o-wrapper">
       <StyledWrapper invertedStyle={invertedStyle} className="c-article">
         <LicenseWrapper>
-          <StyledHeader>{title}</StyledHeader>
+          <StyledHeader id={id}>{title}</StyledHeader>
           <LicenseByline licenseRights={rights} color={colors.brand.tertiary} />
         </LicenseWrapper>
         {description && <div dangerouslySetInnerHTML={{ __html: description }} />}

package/src/Masthead/Masthead.tsx

@@ -21,6 +21,7 @@ interface MastheadItemProps {
 
 const LeftMastheadItem = styled.div`
   display: flex;
+  align-items: center;
   button {
     white-space: nowrap;
   }
@@ -35,6 +36,7 @@ const LeftMastheadItem = styled.div`
 
 const RightMastheadItem = styled.div`
   display: flex;
+  gap: ${spacing.small};
   align-items: center;
   justify-content: flex-end;
   ${mq.range({ from: breakpoints.tablet })} {

package/src/Masthead/MastheadAuthModal.tsx

@@ -8,9 +8,9 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import Button from '@ndla/button';
+import { ButtonV2 as Button } from '@ndla/button';
 import { Feide } from '@ndla/icons/common';
-import { colors, fonts, spacing } from '@ndla/core';
+import { colors, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 
 import AuthModal, { AuthModalProps } from '../User/AuthModal';
@@ -20,20 +20,15 @@ type FeideWrapperProps = {
 };
 
 const StyledButton = styled(Button)<FeideWrapperProps>`
-  font-weight: ${fonts.weight.semibold};
-  display: flex;
-  align-items: center;
-  .feide-icon svg {
+  svg {
     margin-left: ${spacing.xsmall};
-    fill: ${colors.brand.primary};
-    color: ${(props) => (props.inverted ? `#ffffff` : `#000000`)};
+    color: ${(props) => (props.inverted ? colors.white : colors.brand.primary)};
     width: 22px;
     height: 22px;
   }
-  &:hover {
-    .feide-icon svg {
-      color: #000000;
-    }
+  &:hover svg,
+  &:focus svg {
+    color: ${colors.brand.primary};
   }
 `;
 
@@ -43,15 +38,20 @@ interface Props extends AuthModalProps {
 
 const MastheadAuthModal = ({ inverted, ...rest }: Props) => {
   const { t } = useTranslation();
+
   return (
     <AuthModal
       {...rest}
       activateButton={
-        <StyledButton inverted={inverted} ghostPill={!inverted} ghostPillInverted={inverted} aria-label="Feide">
+        <StyledButton
+          inverted={inverted}
+          shape="pill"
+          size="medium"
+          colorTheme="lighter"
+          variant="ghost"
+          aria-label={t('user.buttonLogIn')}>
           {t('myNdla.myNDLA')}
-          <span className="feide-icon">
-            <Feide />
-          </span>
+          <Feide />
         </StyledButton>
       }
     />

package/src/Masthead/MastheadSearchModal.tsx

@@ -1,6 +1,6 @@
 import React, { ReactChild, ReactChildren, ReactNode } from 'react';
 import Modal from '@ndla/modal';
-import Button from '@ndla/button';
+import { IconButtonV2 as IconButton } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
 import { isFunction } from '@ndla/util';
 import styled from '@emotion/styled';
@@ -17,6 +17,9 @@ interface Props {
 }
 
 const StyledHeader = styled.div`
+  display: flex;
+  gap: ${spacing.small};
+  align-items: center;
   ${mq.range({ from: breakpoints.tablet })} {
     width: 1024px;
     max-width: calc(100vw - 100px);
@@ -50,26 +53,6 @@ const StyledHeader = styled.div`
       }
     }
   }
-  > button {
-    width: ${spacing.large};
-    height: 48px;
-    ${mq.range({ from: breakpoints.tablet })} {
-      transform: translate(${spacing.large}, 0);
-      width: ${spacing.large};
-      height: 56px;
-      &:hover,
-      &:focus {
-        transform: translate(calc(${spacing.large} + 1px), 1px);
-      }
-    }
-    ${mq.range({ from: breakpoints.wide })} {
-      transform: translate(${spacing.large}, 0);
-      &:hover,
-      &:focus {
-        transform: translate(calc(${spacing.large} + 1px), 1px);
-      }
-    }
-  }
 `;
 
 const modalStyles = css`
@@ -133,9 +116,9 @@ const MastheadSearchModal = ({
         <div css={extraBackdrop} />
         <StyledHeader>
           {isFunction(children) ? children(closeModal) : children}
-          <Button stripped onClick={closeModal}>
+          <IconButton aria-label={t('welcomePage.closeSearch')} variant="ghost" colorTheme="light" onClick={closeModal}>
             <Cross className="c-icon--medium" />
-          </Button>
+          </IconButton>
         </StyledHeader>
       </>
     )}

package/src/NDLAFilm/AboutNdlaFilm.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import { colors, spacing, fonts, mq, breakpoints } from '@ndla/core';
-import Button from '@ndla/button';
+import { ButtonV2 as Button } from '@ndla/button';
 import { OneColumn } from '..';
 import VisualElement from './VisualElement';
 
@@ -67,7 +67,7 @@ const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }: Props) => {
         <div>
           <h1>{aboutNDLAVideo.title}</h1>
           <p>{aboutNDLAVideo.description}</p>
-          <Modal size="fullscreen" activateButton={<Button link>{t('ndlaFilm.about.more')}</Button>}>
+          <Modal size="fullscreen" activateButton={<Button variant="link">{t('ndlaFilm.about.more')}</Button>}>
             {(onClose) => (
               <OneColumn cssModifier="medium">
                 <ModalHeader>

package/src/Navigation/NavigationHeading.tsx

@@ -45,10 +45,11 @@ type Props = {
   subHeading?: string;
   children: ReactNode;
   invertedStyle?: boolean;
+  headingId?: string;
 };
 
-export const NavigationHeading = ({ subHeading, children, invertedStyle }: Props) => (
-  <StyledH1 invertedStyle={invertedStyle}>
+export const NavigationHeading = ({ subHeading, children, invertedStyle, headingId }: Props) => (
+  <StyledH1 invertedStyle={invertedStyle} id={headingId} tabIndex={-1}>
     {subHeading && <StyledSubText>{subHeading}</StyledSubText>}
     <StyledMainText>{children}</StyledMainText>
   </StyledH1>

package/src/Navigation/NavigationTopicAbout.tsx

@@ -146,6 +146,7 @@ export const NavigationTopicAbout = ({
             {parse(renderMarkdown(introduction))}
             <StyledButtonWrapper invertedStyle={invertedStyle}>
               <Button
+                aria-expanded={!!showContent}
                 link
                 onClick={() => {
                   onToggleShowContent();

package/src/Programme/Programme.tsx

@@ -65,9 +65,18 @@ type Props = GradesProps & {
   heading?: string;
   image?: string;
   messageBoxText?: string;
+  headingId?: string;
 };
 
-export const Programme = ({ heading, image, grades, selectedGrade, onChangeGrade, messageBoxText }: Props) => {
+export const Programme = ({
+  heading,
+  image,
+  grades,
+  selectedGrade,
+  onChangeGrade,
+  messageBoxText,
+  headingId,
+}: Props) => {
   const { t } = useTranslation();
   return (
     <StyledWrapper>
@@ -76,7 +85,7 @@ export const Programme = ({ heading, image, grades, selectedGrade, onChangeGrade
         <StyledLayoutWrapper>
           <LayoutItem layout="extend">
             <StyledContentWrapper>
-              <NavigationHeading>{heading}</NavigationHeading>
+              <NavigationHeading headingId={headingId}>{heading}</NavigationHeading>
               {messageBoxText && <MessageBox>{t(messageBoxText)}</MessageBox>}
               <SubjectsWrapper>
                 <ProgrammeSubjects grades={grades} selectedGrade={selectedGrade} onChangeGrade={onChangeGrade} />

package/src/ResourceGroup/ResourceItem.tsx

@@ -284,19 +284,28 @@ const ResourceItem = ({
         {contentTypeName && <ContentTypeName>{contentTypeName}</ContentTypeName>}
         {access && access === 'teacher' && (
           <Tooltip tooltip={t('article.access.onlyTeacher')}>
-            <HumanMaleBoard className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons" />
+            <HumanMaleBoard
+              className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
+              aria-label={t('article.access.onlyTeacher')}
+            />
           </Tooltip>
         )}
         {showAdditionalResources && contentTypeDescription && (
           <>
             {additional && (
               <Tooltip tooltip={contentTypeDescription}>
-                <Additional className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons" />
+                <Additional
+                  className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
+                  aria-label={contentTypeDescription}
+                />
               </Tooltip>
             )}
             {!additional && (
               <Tooltip tooltip={contentTypeDescription}>
-                <Core className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons" />
+                <Core
+                  className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons"
+                  aria-label={contentTypeDescription}
+                />
               </Tooltip>
             )}
           </>