@ndla/ui 22.0.2 → 22.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "22.0.2",
+  "version": "22.0.3",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -38,8 +38,8 @@
     "@ndla/hooks": "^1.1.4",
     "@ndla/icons": "^1.11.3",
     "@ndla/licenses": "^5.0.6",
-    "@ndla/modal": "^1.2.16",
-    "@ndla/notion": "^3.1.27",
+    "@ndla/modal": "^1.2.17",
+    "@ndla/notion": "^3.1.28",
     "@ndla/safelink": "^2.2.5",
     "@ndla/switch": "^0.1.10",
     "@ndla/tabs": "^1.1.14",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d26b1f085bcef66dcc1d8ed829072ab1223d28eb"
+  "gitHead": "7a872c80b02640a49da4f6343a032c1c242f5aed"
 }

package/src/Article/ArticleByline.tsx

@@ -102,6 +102,8 @@ const ArticleByline = ({
   const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;
   const showSecondaryContributors = suppliers.length > 0 && authors.length > 0;
 
+  const buttonId = 'popupUseContent';
+
   return (
     <Wrapper>
       <div>
@@ -124,8 +126,9 @@ const ArticleByline = ({
       <ButtonWrapper>
         {licenseBox && (
           <Modal
+            labelledBy={buttonId}
             activateButton={
-              <Button size="small" borderShape="rounded" outline>
+              <Button id={buttonId} size="small" borderShape="rounded" outline>
                 {t('article.useContent')}
               </Button>
             }

package/src/Article/ArticleNotions.tsx

@@ -165,14 +165,17 @@ type ArticleNotionsProps = {
 export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight, type }: ArticleNotionsProps) => {
   const { t } = useTranslation();
   const leftOffset = `${buttonOffsetRight - 32}px`;
+  const headingId = 'popupNotionHeading';
+
   return (
     <ArticleNotionsContainer>
       <Modal
+        labelledBy={headingId}
         activateButton={
           <NotionsTrigger role="button" aria-label={t('article.notionsPrompt')} style={{ left: leftOffset }}>
             <NotionFlip />
             <Explanation />
-            <span>{t('article.notionsPrompt')}</span>
+            <span id={headingId}>{t('article.notionsPrompt')}</span>
           </NotionsTrigger>
         }
         size="large"

package/src/CompetenceGoals/CompetenceGoalsDialog.jsx

@@ -33,8 +33,11 @@ const HeadingWrapper = styled.h2`
 
 export const CompetenceGoalsDialog = ({ children, isOpen, onClose, subjectName, modalProps }) => {
   const { t } = useTranslation();
+  const iconId = 'popupCompetenceGoals';
+
   return (
     <Modal
+      labelledBy={iconId}
       {...modalProps}
       controllable
       isOpen={isOpen}
@@ -48,8 +51,8 @@ export const CompetenceGoalsDialog = ({ children, isOpen, onClose, subjectName,
           <ModalHeader modifier="menu">
             <HeaderWrapper>
               <HeadingWrapper>
-                <FooterHeaderIcon size="24px" style={{ marginRight: '20px' }} />
-                {'Utforsk læreplankoblinger'} {subjectName && ` \u2022 ${subjectName}`}
+                <FooterHeaderIcon id={iconId} size="24px" style={{ marginRight: '20px' }} />
+                {t('competenceGoals.modalText')} {subjectName && ` \u2022 ${subjectName}`}
               </HeadingWrapper>
               <ModalCloseButton onClick={close} title={t('competenceGoals.competenceGoalClose')} />
             </HeaderWrapper>

package/src/Filter/FilterButtons.tsx

@@ -128,6 +128,7 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
             </StyledButtonElementWrapper>
           ))}
           <Modal
+            label={t('searchPage.searchFilterMessages.resourceTypeFilter.button')}
             size="fullscreen"
             animation="subtle"
             backgroundColor="white"

package/src/Footer/FooterPrivacy.tsx

@@ -69,7 +69,10 @@ const StyledFooterText = styled.div`
 
 const FooterPrivacy = ({ lang, label }: FooterPrivacyProps) => (
   <StyledFooterText>
-    <Modal activateButton={<StyledPrivacyButton type="button">{label}</StyledPrivacyButton>} size="fullscreen">
+    <Modal
+      label={label}
+      activateButton={<StyledPrivacyButton type="button">{label}</StyledPrivacyButton>}
+      size="fullscreen">
       {(onClose: () => void) => (
         <OneColumn cssModifier="medium">
           <ModalHeader>

package/src/Masthead/MastheadSearchModal.tsx

@@ -117,6 +117,7 @@ const MastheadSearchModal = ({
   t,
 }: Props & WithTranslation) => (
   <Modal
+    label={t('searchPage.searchFieldPlaceholder')}
     backgroundColor="grey"
     animation="slide-down"
     animationDuration={200}

package/src/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -66,6 +66,9 @@ const ResourcesTopicTitle = ({
   } else {
     heading = <h1 {...classes('topic-title', 'single')}>{messages.label}</h1>;
   }
+
+  const tooltipId = 'popupDialogTooltip';
+
   return (
     <header {...classes('topic-title-wrapper', { invertedStyle })}>
       <div>
@@ -82,6 +85,7 @@ const ResourcesTopicTitle = ({
             css={invertedStyle ? invertedSwitchCSS : switchCSS}
           />
           <Modal
+            labelledBy={tooltipId}
             narrow
             wrapperFunctionForButton={(activateButton: ReactNode) => (
               <TooltipWrapper>
@@ -89,7 +93,7 @@ const ResourcesTopicTitle = ({
               </TooltipWrapper>
             )}
             activateButton={
-              <TooltipButton aria-label={t('resource.dialogTooltip')}>
+              <TooltipButton id={tooltipId} aria-label={t('resource.dialogTooltip')}>
                 <HelpIcon invertedStyle={invertedStyle} />
               </TooltipButton>
             }>

package/src/SearchTypeResult/PopupFilter.tsx

@@ -92,9 +92,11 @@ const PopupFilter = ({
 }: PopupFilterProps) => {
   const { t } = useTranslation();
   const [selectedMenu, setSelectedMenu] = useState(MENU_ALL_SUBJECTS);
+  const headingId = 'popupFilterHeading';
 
   return (
     <Modal
+      labelledBy={headingId}
       controllable
       backgroundColor="white"
       animation="subtle"
@@ -107,7 +109,7 @@ const PopupFilter = ({
           <ModalWrapper>
             <ModalContent>
               <ModalHeaderWrapper>
-                <ModalHeading>{t('searchPage.searchFilterMessages.filterLabel')}</ModalHeading>
+                <ModalHeading id={headingId}>{t('searchPage.searchFilterMessages.filterLabel')}</ModalHeading>
                 <ModalCloseButton onClick={() => onClose()} title={t('searchPage.close')} />
               </ModalHeaderWrapper>
               {subjectCategories && programmes && (

package/src/SearchTypeResult/components/ItemContexts.tsx

@@ -98,6 +98,7 @@ const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
        
       {contexts.length > 1 && (
         <Modal
+          label={t('searchPage.contextModal.ariaLabel')}
           activateButton={
             <ModalButton link>
               {t('searchPage.contextModal.button', {

package/src/Topic/Topic.tsx

@@ -268,6 +268,7 @@ const Topic = ({
                   {topic.visualElement ? (
                     <>
                       <Modal
+                        label={t('topicPage.imageModal')}
                         activateButton={
                           <VisualElementButton
                             stripped

package/src/User/AuthModal.tsx

@@ -83,7 +83,8 @@ const AuthModal = ({
       position={position}
       isOpen={isOpen}
       onClose={onClose}
-      controllable={!activateButton}>
+      controllable={!activateButton}
+      label={isAuthenticated ? t('user.modal.isAuth') : t('user.modal.isNotAuth')}>
       {(onClose: () => void) => (
         <StyledModalBody>
           <StyledModalHeader>

package/src/locale/messages-en.ts

@@ -171,6 +171,7 @@ const messages = {
     contextModal: {
       button: '+ {{count}} more contexts',
       heading: 'The resource is used in several contexts',
+      ariaLabel: 'View more contexts',
     },
   },
 
@@ -217,6 +218,7 @@ const messages = {
     articleErrorDescription: 'Sorry, an error occurred while loading the topic description.',
     topic: 'TOPIC',
     topics: 'Topics',
+    imageModal: 'View full size image',
   },
   welcomePage: {
     search: 'Search',
@@ -274,6 +276,7 @@ const messages = {
       search: 'Search',
       toFrontpage: 'To frontpage',
       subjectOverview: 'All subjects',
+      modalLabel: 'Choose content',
       backToSubjectFrontpage: 'Back to subject frontpage',
       title: 'Content',
       subjectPage: 'Subject front page',
@@ -394,6 +397,7 @@ const messages = {
   competenceGoals: {
     competenceGoal: 'competence-goal',
     title: 'Competence goals and curriculum ',
+    modalText: 'Explore curriculum links',
     closeCompetenceGoals: 'Close competence goals',
     showCompetenceGoals: 'Show competence goals',
     openCompentenceGoalsFilter: 'Filter competence goals',
@@ -962,6 +966,8 @@ const messages = {
       collectedInfo: 'We have collected the following information about you from Feide:',
       general: 'Resources that require logging in with Feide, are tagged with the icon',
       topic: 'Log in with Feide to access this topic.',
+      isAuth: 'User info',
+      isNotAuth: 'Log in with Feide',
     },
     resource: {
       accessDenied: 'We are sorry, but this resource is only available to teachers who are logged in with Feide.',

package/src/locale/messages-nb.ts

@@ -171,6 +171,7 @@ const messages = {
     contextModal: {
       button: '+ {{count}} flere steder',
       heading: 'Ressursen er brukt flere steder',
+      ariaLabel: 'Se flere kontekster',
     },
   },
   subjectPage: {
@@ -216,6 +217,7 @@ const messages = {
     articleErrorDescription: 'Beklager, en feil oppstod under lasting av emnebeskrivelsen.',
     topic: 'EMNE',
     topics: 'Emner',
+    imageModal: 'Se bildet i full størrelse',
   },
   welcomePage: {
     search: 'Søk',
@@ -274,6 +276,7 @@ const messages = {
       toFrontpage: 'Til forsiden',
       subjectOverview: 'Alle fag',
       title: 'Innhold',
+      modalLabel: 'Velg innhold',
       subjectPage: 'Fagforside',
       backToSubjectFrontpage: 'Tilbake til fagforsiden',
       openFilter: 'Filter',
@@ -392,6 +395,7 @@ const messages = {
   competenceGoals: {
     competenceGoal: 'kompetansemål',
     title: 'Kompetansemål og læreplan',
+    modalText: 'Utforsk læreplankoblinger',
     closeCompetenceGoals: 'Lukk kompetansemål',
     showCompetenceGoals: 'Vis kompetansemål',
     openCompentenceGoalsFilter: 'Filtrer kompetansemål',
@@ -960,6 +964,8 @@ const messages = {
       collectedInfo: 'Vi har hentet følgende informasjon om deg fra Feide:',
       general: 'Ressursene som krever pålogging med Feide, vises med ikonet',
       topic: 'Logg inn med Feide for å få tilgang til dette emnet.',
+      isAuth: 'Brukerinfo',
+      isNotAuth: 'Logg inn med Feide',
     },
     resource: {
       accessDenied: 'Vi beklager, men denne ressursen er bare for lærere innlogget med Feide.',

package/src/locale/messages-nn.ts

@@ -171,6 +171,7 @@ const messages = {
     contextModal: {
       button: '+ {{count}} fleire stader',
       heading: 'Ressursen er brukt fleire stader',
+      ariaLabel: 'Sjå fleire kontekstar',
     },
   },
   subjectPage: {
@@ -216,6 +217,7 @@ const messages = {
     articleErrorDescription: 'Orsak, ein feil oppstod under lasting av emneskildringa.',
     topic: 'EMNE',
     topics: 'Emne',
+    imageModal: 'Sjå biletet i full storleik',
   },
   welcomePage: {
     search: 'Søk',
@@ -274,6 +276,7 @@ const messages = {
       toFrontpage: 'Til framsida',
       subjectOverview: 'Alle fag',
       title: 'Innhald',
+      modalLabel: 'Vel innhald',
       subjectPage: 'Fagframside',
       backToSubjectFrontpage: 'Tilbake til fagframsida',
       openFilter: 'Filter',
@@ -393,6 +396,7 @@ const messages = {
   competenceGoals: {
     competenceGoal: 'kompetansemål',
     title: 'Kompetansemål og læreplan',
+    modalText: 'Utforsk læreplankoplingar',
     closeCompetenceGoals: 'Lukk kompetansemål',
     showCompetenceGoals: 'Vis kompetansemål',
     openCompentenceGoalsFilter: 'Filtrer kompetansemål',
@@ -961,6 +965,8 @@ const messages = {
       collectedInfo: 'Vi har henta denne informasjonen om deg frå Feide:',
       general: 'Ressursane som krev pålogging med Feide, vises med ikonet',
       topic: ' Logg inn med Feide for å få tilgang til dette emnet.',
+      isAuth: 'Brukarinfo',
+      isNotAuth: 'Logg inn med Feide',
     },
     resource: {
       accessDenied: 'Vi beklagar, men denne ressursen er berre for lærarar innlogga med Feide.',

package/src/locale/messages-se.ts

@@ -171,6 +171,7 @@ const messages = {
     contextModal: {
       button: '+ {{count}} flere steder',
       heading: 'Ressursen er brukt flere steder',
+      ariaLabel: 'Se flere kontekster',
     },
   },
   subjectPage: {
@@ -216,6 +217,7 @@ const messages = {
     articleErrorDescription: 'Beklager, en feil oppstod under lasting av emnebeskrivelsen.',
     topic: 'EMNE',
     topics: 'Emner',
+    imageModal: 'Se bildet i full størrelse',
   },
   welcomePage: {
     search: 'Søk',
@@ -274,6 +276,7 @@ const messages = {
       toFrontpage: 'Til forsiden',
       subjectOverview: 'Alle fag',
       title: 'Innhold',
+      modalLabel: 'Velg innhold',
       subjectPage: 'Fagforside',
       backToSubjectFrontpage: 'Tilbake til fagforsiden',
       openFilter: 'Filter',
@@ -392,6 +395,7 @@ const messages = {
   competenceGoals: {
     competenceGoal: 'kompetansemål',
     title: 'Kompetansemål og læreplan',
+    modalText: 'Utforsk læreplankoblinger',
     closeCompetenceGoals: 'Lukk kompetansemål',
     showCompetenceGoals: 'Vis kompetansemål',
     openCompentenceGoalsFilter: 'Filtrer kompetansemål',
@@ -960,6 +964,8 @@ const messages = {
       collectedInfo: 'Vi har hentet følgende informasjon om deg fra Feide:',
       general: 'Ressursene som krever pålogging med Feide, vises med ikonet',
       topic: 'Logg inn med Feide for å få tilgang til dette emnet.',
+      isAuth: 'Brukerinfo',
+      isNotAuth: 'Logg inn med Feide',
     },
     resource: {
       accessDenied: 'Vi beklager, men denne ressursen er bare for lærere innlogget med Feide.',

package/src/locale/messages-sma.ts

@@ -171,6 +171,7 @@ const messages = {
     contextModal: {
       button: '+ {{count}} flere steder',
       heading: 'Ressursen er brukt flere steder',
+      ariaLabel: 'Se flere kontekster',
     },
   },
   subjectPage: {
@@ -216,6 +217,7 @@ const messages = {
     articleErrorDescription: 'Beklager, en feil oppstod under lasting av emnebeskrivelsen.',
     topic: 'EMNE',
     topics: 'Emner',
+    imageModal: 'Se bildet i full størrelse',
   },
   welcomePage: {
     search: 'Søk',
@@ -274,6 +276,7 @@ const messages = {
       toFrontpage: 'Til forsiden',
       subjectOverview: 'Alle fag',
       title: 'Innhold',
+      modalLabel: 'Velg innhold',
       subjectPage: 'Fagforside',
       backToSubjectFrontpage: 'Tilbake til fagforsiden',
       openFilter: 'Filter',
@@ -392,6 +395,7 @@ const messages = {
   competenceGoals: {
     competenceGoal: 'kompetansemål',
     title: 'Kompetansemål og læreplan',
+    modalText: 'Utforsk læreplankoblinger',
     closeCompetenceGoals: 'Lukk kompetansemål',
     showCompetenceGoals: 'Vis kompetansemål',
     openCompentenceGoalsFilter: 'Filtrer kompetansemål',
@@ -960,6 +964,8 @@ const messages = {
       collectedInfo: 'Vi har hentet følgende informasjon om deg fra Feide:',
       general: 'Ressursene som krever pålogging med Feide, vises med ikonet',
       topic: 'Logg inn med Feide for å få tilgang til dette emnet.',
+      isAuth: 'Brukerinfo',
+      isNotAuth: 'Logg inn med Feide',
     },
     resource: {
       accessDenied: 'Vi beklager, men denne ressursen er bare for lærere innlogget med Feide.',