[RC1] Adding translation mechanism in pagination pattern

Created on 18 April 2024, 8 months ago
Updated 16 May 2024, 7 months ago

Problem/Motivation

Hello,

In pattern-pagination.html.twig we have :

{% if pages %}
<nav{{ attributes.addClass('fr-pagination').setAttribute('role', 'navigation').setAttribute('aria-label', 'Pagination'|t) }}>
  <ul class="fr-pagination__list pager__items js-pager__items">
  {{ first ? _self.generate_link("First page", first, "first", false) }}
  {{ _self.generate_link("Previous page", prev, "prev", true) }}
  {% for item in pages %}
    {% set item_attributes = item.attributes|default(create_attribute()) %}
    {% set item_attributes = item_attributes.addClass('fr-pagination__link').setAttribute('title', 'Page @key'|t({'@key': item.title})) %}
    <li>
    {% if item.url %}
      <a{{ item_attributes.setAttribute('href', item.url) }}>
        {{ item.title }}
      </a>
    {% else %}
      <a{{ item_attributes.setAttribute('aria-current', 'page') }}>
        {{ item.title }}
      </a>
    {% endif %}
    </li>
  {% endfor %}
  {{ _self.generate_link("Next page", next, "next", true) }}
  {{ last ? _self.generate_link("Last page", last, "last", false) }}
  </ul>
</nav>
{% endif %}

{% macro generate_link(label, url, modifier, display_label) %}
  {% set attributes = create_attribute().addClass('fr-pagination__link', 'fr-pagination__link--' ~ modifier) %}
  {% set attributes = url ? attributes.setAttribute('href', url) : attributes.setAttribute('aria-disabled', 'true').setAttribute('role', 'link') %}
  {% set attributes = display_label ? attributes.addClass("fr-pagination__link--lg-label") : attributes %}
  <li>
    <a{{ attributes }}>{{ label }}</a>
  </li>
{% endmacro %}

We don't use '|t' to translate 'Last page,' 'Next page,' etc...

I suggest adding them, so here is the final version of the code:

{% if pages %}
<nav{{ attributes.addClass('fr-pagination').setAttribute('role', 'navigation').setAttribute('aria-label', 'Pagination'|t) }}>
  <ul class="fr-pagination__list pager__items js-pager__items">
  {{ first ? _self.generate_link("First page"|t, first, "first"|t, false) }}
  {{ _self.generate_link("Previous page"|t, prev, "prev"|t, true) }}
  {% for item in pages %}
    {% set item_attributes = item.attributes|default(create_attribute()) %}
    {% set item_attributes = item_attributes.addClass('fr-pagination__link').setAttribute('title', 'Page @key'|t({'@key': item.title})) %}
    <li>
    {% if item.url %}
      <a{{ item_attributes.setAttribute('href', item.url) }}>
        {{ item.title }}
      </a>
    {% else %}
      <a{{ item_attributes.setAttribute('aria-current', 'page') }}>
        {{ item.title }}
      </a>
    {% endif %}
    </li>
  {% endfor %}
  {{ _self.generate_link("Next page"|t, next, "next"|t, true) }}
  {{ last ? _self.generate_link("Last page"|t, last, "last"|t, false) }}
  </ul>
</nav>
{% endif %}

{% macro generate_link(label, url, modifier, display_label) %}
  {% set attributes = create_attribute().addClass('fr-pagination__link', 'fr-pagination__link--' ~ modifier) %}
  {% set attributes = url ? attributes.setAttribute('href', url) : attributes.setAttribute('aria-disabled', 'true').setAttribute('role', 'link') %}
  {% set attributes = display_label ? attributes.addClass("fr-pagination__link--lg-label") : attributes %}
  <li>
    <a{{ attributes }}>{{ label }}</a>
  </li>
{% endmacro %}
Feature request
Status

Fixed

Version

1.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024