@madgex/design-system 3.4.2 → 3.6.0

package/src/components/inputs/select/select.njk

@@ -18,9 +18,9 @@
         state: state,
         classes: classes,
         tooltipMessage: tooltipMessage,
-        defaultHide: defaultHide,
-        defaultLabel: defaultLabel,
-        options: options
+        hideDefault: hideDefault,
+        options: options,
+        i18n: i18n
       }) }}
     </div>
   </div>

package/src/components/inputs/single-checkbox/README.md

@@ -9,7 +9,13 @@
 - `classes`: add extra classes to the fieldgroup - **optional**
 - `describedBy`: adding aria-describeby to the input field - **optional**
 - `selectedOptions`: Preselected checkboxes - Array or comma-separed string
-- `options`: array of options for a checkbox inside. **required**: `labelText`, `value`, `id`, `classes`
+- `options`: options for the checkbox inside. Can be an array or a single object. **required**: `labelText`, `value`, `id`, `classes`
+- `i18n`: Text to translate/customise (object) **optional**
+```
+i18n: {
+  requiredIcon: 'required', // visually hidden text for the required icon (label)
+}
+```
 
 **Note:** `id` in `options` is optional. If you don't specify one, an id will be created for you using the name/id of the field and the value of the option.
 
@@ -23,11 +29,13 @@ options: [
   },
 ]
 ```
-which is the same as
+or
 ```
+options: {
   labelText: "Checkbox Input 1",
   value: "2-1",
   id: "checkbox-2-1",
+}
 ```
 
 ## Accessibility

package/src/components/inputs/single-checkbox/_template.njk

@@ -1,6 +1,8 @@
 {% from "../_message/_macro.njk" import MdsInputMessages %}
 {% from "../_checkbox-elem/_macro.njk" import MdsCheckboxElem %}
 
+{% set options = params.options[0] or params.options %}
+
 {%- set name -%}
   {%- if params.name -%}
     {{- params.name -}}
@@ -10,14 +12,14 @@
 {%- endset -%}
 
 {%- set id -%}
-  {%- if params.options[0].id -%}
-    {{- params.options[0].id -}}
+  {%- if options.id -%}
+    {{- options.id -}}
   {% else %}
-    {{- name -}}-{{- params.options[0].value -}}
+    {{- name -}}-{{- options.value -}}
   {% endif -%}
 {%- endset -%}
 
-{%- if params.selectedOptions == params.options[0].value -%}
+{%- if params.selectedOptions == options.value -%}
   {%- set isSelected = true -%}
 {%- endif -%}
 
@@ -32,12 +34,13 @@
     {{- MdsCheckboxElem({
       disabled: params.disabled,
       isSelected: isSelected,
-      labelText: params.options[0].labelText,
+      labelText: options.labelText,
       describedBy: params.describedBy,
       optional: params.optional,
       name: name,
       id: id,
-      value: params.options[0].value
+      value: options.value,
+      i18n: params.i18n
     }) -}}
     </div>
   </div>

package/src/components/inputs/single-checkbox/single-checkbox.config.js

@@ -18,13 +18,11 @@ module.exports = {
       context: {
         id: 'preselected',
         optional: true,
-        options: [
-          {
-            labelText: 'I want to opt out of third party emails',
-            value: 'out-out',
-            id: 'out-out-checkbox',
-          },
-        ],
+        options: {
+          labelText: 'I want to opt out of third party emails',
+          value: 'out-out',
+          id: 'out-out-checkbox',
+        },
         selectedOptions: 'out-out',
       },
     },

package/src/components/inputs/single-checkbox/single-checkbox.njk

@@ -13,6 +13,7 @@
     validationError: validationError,
     helpText: helpText,
     value: value,
-    options: options
+    options: options,
+    i18n: i18n
   }) -}}
 </div>

package/src/components/inputs/textarea/README.md

@@ -15,6 +15,13 @@
 - `placeholder`: add a placeholder to the textarea **optional**
 **(please see accessibility notes below regarding the use of this parameter)**
 - `maxlength`: specify the maximum length (in characters) allowed in the textarea. Adding this attribute will automatically add a "character counter" at the bottom right of the textarea (see notes below) - **optional**
+- `i18n`: Text to translate/customise (object) **optional**
+```
+i18n: {
+  requiredIcon: 'required', // visually hidden text for the required icon (label)
+  characterCountText: '<span class="js-character-count-number">[maxlength]</span> characters remaining' (use with the maxlength parameter)
+}
+```
 
 
 ## Accessibility

package/src/components/inputs/textarea/_template.njk

@@ -14,7 +14,8 @@
     hideLabel: params.hideLabel,
     inputId: params.id,
     optional: params.optional,
-    tooltipMessage: params.tooltipMessage
+    tooltipMessage: params.tooltipMessage,
+    i18n: params.i18n
   }) }}
   {{ MdsInputMessages({
     id: params.id,
@@ -49,7 +50,7 @@
         containerClasses: 'mds-icon-container--circle mds-icon-container--error mds-icon-container--before'
         })
       -}}
-      <span><span class="js-character-count-number">{{ params.maxlength }}</span> characters remaining</span>
+      <span>{{ params.i18n.characterCountText | default('<span class="js-character-count-number">'+ params.maxlength +'</span> characters remaining') | safe }}</span>
     </div>
   {% endif %}
 </div>

package/src/components/inputs/textarea/textarea.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   title: 'Textarea',
-  status: 'wip',
   context: {
     labelText: 'Textarea',
     name: 'Example Textarea',

package/src/components/inputs/textarea/textarea.njk

@@ -17,7 +17,8 @@
         state: state,
         classes: classes,
         tooltipMessage: tooltipMessage,
-        maxlength: maxlength
+        maxlength: maxlength,
+        i18n: i18n
       }) }}
     </div>
   </div>

package/src/components/modal/README.md

@@ -11,7 +11,12 @@ The modal will have to be positionned outsite the site container so we can hide
 - `ariaLabelledby`: id of the element inside the content, which will provide a label for the modal - **required**,
 - `ariaDescribedby`: id of the element inside the content, which will provide a description for the content of the modal - *optional*,
 - `siteContainerId`: id of the container to target so we can hide the rest of the page to all users when the modal is active - **required**
-- `closeTranslation`: the translation for the default Close button. Without this property, it will read Close ✖ (in English!) - *optional*
+- `i18n`: Text to translate/customise (object) **optional**
+```
+i18n: {
+  closeText: 'Close' // "close" button on the top right
+}
+```
 
 ## Accessibility
 

package/src/components/modal/_template.njk

@@ -1,20 +1,14 @@
 {% from "../icons/_macro.njk" import MdsIcon %}
 {% from "../button/_macro.njk" import MdsButton %}
 
-{%- set closeTranslationText %}
-  {%- if params.closeTranslation -%}
-    {{params.closeTranslation}}
-  {%- else -%}
-    Close
-  {%- endif -%}
-{%- endset -%}
+{%- set closeText = params.i18n.closeText | default('Close') -%}
 
 <div class="mds-modal" role="dialog" id="{{ params.id }}"{% if params.ariaLabelledby %} aria-labelledby="{{ params.ariaLabelledby }}"{% endif %}{% if params.ariaDescribedby %} aria-describedby="{{ params.ariaDescribedby }}"{% endif %} data-site-container="{{ params.siteContainerId }}">
   <div class="mds-modal__wrapper">
     <div class="mds-modal__inner">
 
       {{- MdsButton({
-        html: closeTranslationText + MdsIcon({
+        html: closeText + MdsIcon({
           iconName: 'close',
           classes: 'mds-icon--after'
           }),

package/src/components/modal/modal.njk

@@ -34,8 +34,7 @@
   content: modalContent,
   ariaLabelledby: 'modal-label',
   ariaDescribedby: 'modal-description',
-  siteContainerId: 'site-container',
-  closeTranslation: 'Close'
+  siteContainerId: 'site-container'
 }) }}
 
 {{ MdsModal({
@@ -44,5 +43,7 @@
   ariaLabelledby: 'modal-label',
   ariaDescribedby: 'modal-description',
   siteContainerId: 'site-container',
-  closeTranslation: 'Close'
+  i18n: {
+    closeText: 'Close popup'
+  }
 }) }}

package/src/components/pagination/README.md

@@ -1,19 +1,30 @@
 ## Parameters
 
-- `name`: name of the component, used for accessibility purpose, should be descriptive (i.e. job details pagination)
 - `classes`: add extra CSS classes to the component
 - `hideIcons`: hide caret icons
-- `prevLabel`: label of the previous link
 - `prevUrl`: url of the previous link
-- `prevVisHiddenLabel`: hidden label for accessibility purpose
 - `prevExtraLabel`: extra label of the previous link (i.e. title of the page)
-- `nextLabel`: label of the next link
 - `nextUrl`: url of the next link
-- `nextVisHiddenLabel`: hidden label for accessibility purpose
 - `nextExtraLabel`: extra label of the next link (i.e. title of the page)
-- `backToLabel`: label of the "back to" link
 - `backToUrl`: url of the "back to" link
+- `i18n`: Text to translate/customise (object) **optional**
+```
+i18n: {
+  navAriaLabel: 'Pagination', // aria-label for <nav> element - see a11y notes
+  backToLabel: 'Results', // label for the "back to" link
+  backToAriaLabel: 'Back to results', // aria-label for the "back to" link - see a11y notes
+  prevLabel: 'Previous', // label for the "previous" link
+  prevAriaLabel: 'Previous page', // aria-label for the "previous" link - see a11y notes
+  nextLabel: 'Next', // label for the "next" link
+  nextAriaLabel: 'Next page', // aria-label for the "next" link - see a11y notes
+}
+```
+
 
 ## Accessibility
 
-use the hidden labels to give more information about the links, i.e. adding "job" to the Previous link, so that the screen reader will read: "Previous job"
+We use aria labels to provide more context about the navigation element and the links.
+
+Adding an aria label on the `<nav>` element (here `navAriaLabel`) allow an assistive technology user to be able to quickly understand the purpose of the landmark.
+
+As for the links, since they can be read out of context of the page, it is important to provide descriptive text. Instead of just using "Next" which doesn't mean much out of context, please add "Next job/article/event..." for the aria label as it is clearer to the user what clicking on the link will do.

package/src/components/pagination/_template.njk

@@ -1,47 +1,55 @@
 {% from "../icons/_macro.njk" import MdsIcon %}
 
-<nav aria-label="{{ params.name }}" data-test="pagination{% if params.id %}-{{params.id}}{% endif %}">
+{%- set navAriaLabel = params.i18n.navAriaLabel | default('Pagination') -%}
+{%- set backToLabel = params.i18n.backToLabel | default('Results') -%}
+{%- set backToAriaLabel = params.i18n.backToAriaLabel | default('Back to results') -%}
+{%- set prevLabel = params.i18n.prevLabel | default('Previous') -%}
+{%- set prevAriaLabel = params.i18n.prevAriaLabel | default('Previous page') -%}
+{%- set nextLabel = params.i18n.nextLabel | default('Next') -%}
+{%- set nextAriaLabel = params.i18n.nextAriaLabel | default('Next page') -%}
+
+<nav aria-label="{{ navAriaLabel }}" data-test="pagination{% if params.id %}-{{params.id}}{% endif %}">
   <ul class="mds-pagination mds-text-align-right{% if params.classes %} {{params.classes}}{% endif %}">
-    {% if params.backToLabel and params.backToUrl -%}
+    {% if params.backToUrl and backToLabel -%}
       <li class="mds-float-left">
-        <a href="{{ params.backToUrl }}" class="mds-pagination__link mds-pagination__link--back" aria-label="{{- params.backToLabel -}}">
+        <a href="{{ params.backToUrl }}" class="mds-pagination__link mds-pagination__link--back" aria-label="{{- backToAriaLabel -}}">
           {% if not params.hideIcons -%}
             {{ MdsIcon({
               iconName: 'chevron-left',
               classes: 'mds-icon--before'
             }) -}}
           {%- endif %}
-          {{- params.backToLabel -}}
+          {{- backToLabel -}}
         </a>
       </li>
     {%- endif %}
-    {% if params.prevLabel and params.prevUrl -%}
+    {% if params.prevUrl and prevLabel -%}
       <li class="mds-float-left">
         <a href="{{ params.prevUrl }}"
           class="mds-pagination__link mds-pagination__link--background"
-          aria-label="{{ params.prevVisHiddenLabel }}{% if params.prevExtraLabel %} - {{ params.prevExtraLabel }}{% endif %}">
+          aria-label="{{ prevAriaLabel }}{% if params.prevExtraLabel %} - {{ params.prevExtraLabel }}{% endif %}">
           {%- if not params.hideIcons -%}
             {{ MdsIcon({
               iconName: 'chevron-left',
               classes: 'mds-icon--before'
             }) }}
           {%- endif -%}
-          <span>{{- params.prevLabel -}}</span>
+          <span>{{- prevLabel -}}</span>
           {%- if params.prevExtraLabel -%}
             <strong class="mds-pagination__extra-label mds-display-none mds-display-lg-inline mds-padding-left-b3">{{ params.prevExtraLabel | truncate(40, false) }}</strong>
           {%- endif %}
         </a>
       </li>
     {%- endif %}
-    {% if params.nextLabel and params.nextUrl -%}
+    {% if params.nextUrl and nextLabel -%}
       <li>
         <a href="{{ params.nextUrl }}"
           class="mds-pagination__link mds-pagination__link--background"
-          aria-label="{{ params.nextVisHiddenLabel }}{% if params.nextExtraLabel %} - {{ params.nextExtraLabel }}{% endif %}">
+          aria-label="{{ nextAriaLabel }}{% if params.nextExtraLabel %} - {{ params.nextExtraLabel }}{% endif %}">
           {%- if params.nextExtraLabel -%}
             <strong class="mds-pagination__extra-label mds-display-none mds-display-md-inline mds-margin-right-b3">{{ params.nextExtraLabel | truncate(40, false) }}</strong>
           {%- endif -%}
-          <span>{{- params.nextLabel -}}</span>
+          <span>{{- nextLabel -}}</span>
           {% if not params.hideIcons -%}
             {{ MdsIcon({
               iconName: 'chevron-right',

package/src/components/pagination/pagination.config.js

@@ -2,68 +2,77 @@ module.exports = {
   title: 'Pagination',
   label: 'Pagination',
   context: {
-    name: 'Pagination',
-    nextLabel: 'Next',
+    prevUrl: '/prev-page',
+    nextUrl: '/next-page',
     id: 'default',
+    i18n: {
+      prevAriaLabel: 'Previous job',
+      nextAriaLabel: 'Next job',
+    },
   },
   variants: [
     {
-      name: 'Job Detail',
+      name: 'With backTo link',
       context: {
-        name: 'Job details pagination 1',
-        prevLabel: 'Previous',
-        prevVisHiddenLabel: 'Previous job',
+        backToUrl: '/results/',
         prevUrl: '/prev-page',
-        nextLabel: 'Next',
-        nextVisHiddenLabel: 'Next job',
         nextUrl: '/next-page',
         id: 'pag-1',
+        i18n: {
+          navAriaLabel: 'Job pagination',
+          backToAriaLabel: 'Back to results',
+          prevAriaLabel: 'Previous job',
+          nextAriaLabel: 'Next job',
+        },
       },
     },
     {
-      name: 'Job Detail',
+      name: 'Next link',
       context: {
-        name: 'Job details pagination 2',
         classes: 'mds-font-long-primer',
-        nextLabel: 'Next',
         nextUrl: '/next-page',
-        nextVisHiddenLabel: 'Next job',
         nextExtraLabel: 'Customer Service, Special-Agent Assistant Part-Time',
-        backToLabel: 'Results',
         backToUrl: '/results/',
         id: 'pag-2',
+        i18n: {
+          backToAriaLabel: 'Back to results',
+          nextAriaLabel: 'Next job',
+        },
       },
     },
     {
-      name: 'Job Detail',
+      name: 'Previous link',
       context: {
-        name: 'Job details pagination 3',
         classes: 'mds-font-long-primer',
-        prevLabel: 'Previous',
         prevUrl: '/prev-page',
-        prevVisHiddenLabel: 'Previous job',
         prevExtraLabel: 'Part Time Sales Assistant',
-        backToLabel: 'Results',
         backToUrl: '/results/',
         id: 'pag-3',
+        i18n: {
+          backToAriaLabel: 'Back to results',
+          nextAriaLabel: 'Previous job',
+        },
       },
     },
     {
-      name: 'Job Detail',
+      name: 'Translated',
       context: {
-        name: 'Job details pagination 4',
         classes: 'mds-font-long-primer',
-        prevLabel: 'Previous',
         prevUrl: '/prev-page',
-        prevVisHiddenLabel: 'Previous job',
-        prevExtraLabel: 'Part Time Sales Assistant',
-        nextLabel: 'Next',
+        prevExtraLabel: "Agent / Agente d'entretien de nettoyage industriel",
         nextUrl: '/next-page',
-        nextVisHiddenLabel: 'Next job',
-        nextExtraLabel: 'Customer Service, Special-Agent Assistant Part-Time',
-        backToLabel: 'Results',
+        nextExtraLabel: 'Conseiller/ère de vente (F/H)',
         backToUrl: '/results/',
         id: 'pag-4',
+        i18n: {
+          navAriaLabel: "Pagination de l'offre",
+          backToLabel: 'Recherche',
+          backToAriaLabel: 'Revenir à la page de recherche',
+          prevLabel: 'Précédent',
+          prevAriaLabel: 'Offre précédente',
+          nextLabel: 'Suivant',
+          nextAriaLabel: 'Offre suivante',
+        },
       },
     },
   ],

package/src/components/pagination/pagination.njk

@@ -4,15 +4,11 @@
   name: name,
   classes: classes,
   hideIcons: hideIcons,
-  prevLabel: prevLabel,
   prevUrl: prevUrl,
-  prevVisHiddenLabel: prevVisHiddenLabel,
   prevExtraLabel: prevExtraLabel,
-  nextLabel: nextLabel,
   nextUrl: nextUrl,
-  nextVisHiddenLabel: nextVisHiddenLabel,
   nextExtraLabel: nextExtraLabel,
-  backToLabel: backToLabel,
   backToUrl: backToUrl,
-  id: id
+  id: id,
+  i18n: i18n
 }) }}

package/src/components/pagination-numbers/README.md

@@ -7,17 +7,27 @@
 - `pageNo`: (_required_) current page the list is on
 - `pageSize`: (_required_) how many items per page
 - `totalItemCount`: (_required_) total items count
-- `prevLabel`: label of the previous link
-- `prevVisHiddenLabel`: hidden label for accessibility purpose
-- `nextLabel`: label of the next link
-- `nextVisHiddenLabel`: hidden label for accessibility purpose
-- `pageVisHiddenLabel`: (_required_) Label for each number link i.e. passing 'Page {pageNo}' will create 'Page 23'. {pageNo} is used as a placeholder for the page number.
-- `pageVisHiddenCurrentPageLabel`: (_required_) Label for active number link i.e. passing 'Current page, page {pageNo}' will create 'Current page, page 2'.
 - `alwaysShowLastPage`: (false by default) Always show the last page number,which may display ellipses if its far ahead of 'current page'
+- `i18n`: Text to translate/customise (object) **optional**
+```
+i18n: {
+  navAriaLabel: 'Pagination', // aria-label for <nav> element - see a11y notes
+  prevLabel: 'Previous', // label for the "previous" link
+  prevAriaLabel: 'Previous page', // aria-label for the "previous" link - see a11y notes
+  nextLabel: 'Next', // label for the "next" link
+  nextAriaLabel: 'Next page', // aria-label for the "next" link - see a11y notes
+  pageNumberAriaLabel: 'Page {pageNo}', // aria-label for the page number - please note the use of `{pageNo}` to get the page number
+  currentPageAriaLabel: 'Current page, page {pageNo}', // aria-label for the current page - please note the use of `{pageNo}` to get the page number
+}
+```
 
 ## Accessibility
 
-use the hidden labels to give more information about the links, i.e. adding "job" to the Previous link, so that the screen reader will read: "Previous job"
+We use aria labels to provide more context about the navigation element and the links.
+
+Adding an aria label on the `<nav>` element (here `navAriaLabel`) allow an assistive technology user to be able to quickly understand the purpose of the landmark.
+
+It is important for the links to be as descriptive as possible as they can be read out of context when using assistive technology. For example, instead of just using "Next" which doesn't mean much out of context, please add "Next page" for the aria label as it is clearer to the user what clicking on the link will do.
 
 ## Quirks
 

package/src/components/pagination-numbers/_pagination-numbers-number-macro.njk

@@ -1,13 +1,16 @@
 {% macro PaginationNumbersNumber(params) %}
   {%- set isCurrentPage = params.pageNo === params.number -%}
 
+  {%- set pageNumberAriaLabel = params.i18n.pageNumberAriaLabel | default('Page {pageNo}') -%}
+  {%- set currentPageAriaLabel = params.i18n.currentPageAriaLabel | default('Current page, page {pageNo}') -%}
+
   <a href="{{params.pageUrlTemplate | replace('{pageNo}', params.number)}}"
     {%- if isCurrentPage -%}
       aria-current="true"
-      aria-label="{{params.pageVisHiddenCurrentPageLabel | replace('{pageNo}', params.number) }}"
+      aria-label="{{ currentPageAriaLabel | replace('{pageNo}', params.number) }}"
       class="mds-pagination__link mds-pagination__link--background mds-pagination__link--active"
     {%- else -%}
-      aria-label="{{params.pageVisHiddenLabel | replace('{pageNo}', params.number) }}"
+      aria-label="{{ pageNumberAriaLabel | replace('{pageNo}', params.number) }}"
       class="mds-pagination__link mds-pagination__link--background"
     {%- endif -%}>
     {%- if params.showLastEllipses -%}

package/src/components/pagination-numbers/_template.njk

@@ -56,23 +56,30 @@ Otherwise, show an extra page in front of the current page to make up the displa
     {%- set disabledButtonNext = true -%}
   {%- endif -%}
 
+  {# Labels #}
+  {%- set navAriaLabel = params.i18n.navAriaLabel | default('Pagination') -%}
+  {%- set prevLabel = params.i18n.prevLabel | default('Previous') -%}
+  {%- set prevAriaLabel = params.i18n.prevAriaLabel | default('Previous page') -%}
+  {%- set nextLabel = params.i18n.nextLabel | default('Next') -%}
+  {%- set nextAriaLabel = params.i18n.nextAriaLabel | default('Next page') -%}
+
   {# VIEW #}
 
-  <nav aria-label="{{ params.name }}" data-test="pagination-numbers{% if params.id %}-{{params.id}}{% endif %}">
+  <nav aria-label="{{ navAriaLabel }}" data-test="pagination-numbers{% if params.id %}-{{params.id}}{% endif %}">
     <ul class="mds-pagination mds-pagination--numbers mds-text-align-center {% if params.classes %} {{params.classes}}{% endif %}">
-      {% if params.prevLabel -%}
+      {% if prevLabel -%}
         <li class="mds-pagination__item">
           {%- if disabledButtonPrev -%}
             <div class="mds-pagination__link mds-pagination__link--disabled" aria-disabled="true">
           {%- else -%}
             <a href="{{params.pageUrlTemplate | replace('{pageNo}', pageNo - 1) }}"
               class="mds-pagination__link mds-pagination__link--background"
-              {%- if params.prevVisHiddenLabel -%}aria-label="{{ params.prevVisHiddenLabel }}"{%- endif -%}>
+              aria-label="{{ prevAriaLabel }}">
           {%- endif -%}
           {% if not params.hideIcons -%}
             {{ MdsIcon({iconName: 'chevron-left'}) }}
           {%- endif -%}
-          <span class="mds-display-none mds-display-md-inline mds-margin-left-b2">{{- params.prevLabel -}}</span>
+          <span class="mds-display-none mds-display-md-inline mds-margin-left-b2">{{- prevLabel -}}</span>
           {%- if disabledButtonPrev -%}
             </div>
           {%- else -%}
@@ -85,21 +92,18 @@ Otherwise, show an extra page in front of the current page to make up the displa
             pageNo: pageNo,
             pageUrlTemplate: params.pageUrlTemplate,
             number: 1,
-            pageVisHiddenCurrentPageLabel:params.pageVisHiddenCurrentPageLabel,
-            pageVisHiddenLabel: params.pageVisHiddenLabel,
-            showFirstEllipses: showFirstEllipses
-            })
+            showFirstEllipses: showFirstEllipses,
+            i18n: params.i18n
+          })
         }}
       </li>
       {%- for page in pages -%}
         <li class="mds-pagination__item mds-border-left">
           {{ PaginationNumbersNumber({
             pageNo: pageNo,
-            
             pageUrlTemplate: params.pageUrlTemplate,
             number: page,
-            pageVisHiddenCurrentPageLabel:params.pageVisHiddenCurrentPageLabel,
-            pageVisHiddenLabel: params.pageVisHiddenLabel
+            i18n: params.i18n
             })
           }}
         </li>
@@ -110,23 +114,22 @@ Otherwise, show an extra page in front of the current page to make up the displa
             pageNo: pageNo,
             pageUrlTemplate: params.pageUrlTemplate,
             number: pageCount,
-            pageVisHiddenCurrentPageLabel:params.pageVisHiddenCurrentPageLabel,
-            pageVisHiddenLabel: params.pageVisHiddenLabel,
-            showLastEllipses: showLastEllipses
+            showLastEllipses: showLastEllipses,
+            i18n: params.i18n
             })
           }}
         </li>
       {%- endif -%}
-      {%- if params.nextLabel -%}
+      {%- if nextLabel -%}
         <li class="mds-pagination__item mds-border-left">
           {%- if disabledButtonNext -%}
             <div class="mds-pagination__link mds-pagination__link--disabled" aria-disabled="true">
           {%- else -%}
             <a href="{{params.pageUrlTemplate | replace('{pageNo}', pageNo + 1)}}"
               class="mds-pagination__link mds-pagination__link--background"
-              {%- if params.nextVisHiddenLabel -%}aria-label="{{ params.nextVisHiddenLabel }}"{%- endif -%}>
+              aria-label="{{ nextAriaLabel }}">
           {%- endif -%}
-          <span class="mds-display-none mds-display-md-inline mds-margin-right-b2">{{- params.nextLabel -}}</span>
+          <span class="mds-display-none mds-display-md-inline mds-margin-right-b2">{{- nextLabel -}}</span>
           {%- if not params.hideIcons -%}
             {{ MdsIcon({iconName: 'chevron-right'}) }}
           {%- endif -%}

package/src/components/pagination-numbers/pagination-numbers.config.js

@@ -1,16 +1,8 @@
 module.exports = {
   title: 'Pagination numbers',
   label: 'Pagination numbers',
-  status: 'wip',
   context: {
-    name: 'Pagination numbers',
-    nextLabel: 'Next',
-    prevLabel: 'Previous',
-    pageVisHiddenLabel: 'Page {pageNo}',
-    pageVisHiddenCurrentPageLabel: 'Current page, page {pageNo}',
     pageUrlTemplate: '/article/{pageNo}/my-seo-things',
-    prevVisHiddenLabel: 'Previous article',
-    nextVisHiddenLabel: 'Next article',
     id: 'default',
   },
   variants: [
@@ -87,5 +79,23 @@ module.exports = {
         id: '1-render',
       },
     },
+    {
+      name: 'Translated',
+      context: {
+        pageNo: 2,
+        totalItemCount: 100,
+        pageSize: 10,
+        id: 'translated',
+        i18n: {
+          navAriaLabel: 'Pagination numérotée',
+          prevLabel: 'Précédent',
+          prevAriaLabel: 'Page précédente',
+          nextLabel: 'Suivant',
+          nextAriaLabel: 'Page suivante',
+          pageNumberAriaLabel: 'page {pageNo}',
+          currentPageAriaLabel: 'Page actuelle ({pageNo})',
+        },
+      },
+    },
   ],
 };