decidim-design 0.28.3 → 0.29.0.rc1

data/app/views/decidim/design/components/dialogs.html.erb

@@ -1,45 +1,45 @@
 <% content_for :heading do %>
-  Dialogs
+  <%= t(".title") %>
 <% end %>
 
 <% content_for :description do %>
-  Dialogs are a javascript feature available thanks to an external library called <a href="https://github.com/jonathanlevaillant/a11y-dialog-component" target="_blank" rel="noopener noreferrer">a11y-dialog-component</a>.
+   <%= t(".dialogs_description_html") %>
 <% end %>
 
 <% content_for :toc do %>
-  <a href="#example">Demo</a>
-  <a href="#usage">Usage</a>
-  <a href="#html">HTML tips</a>
+  <a href="#example"><%= t("decidim.design.helpers.demo") %></a>
+  <a href="#usage"><%= t("decidim.design.helpers.usage") %></a>
+  <a href="#html"><%= t("decidim.design.helpers.html_tips") %></a>
 <% end %>
 
 <section id="demo" class="design__section">
-  <h2>Demo</h2>
+  <h2><%= t("decidim.design.helpers.demo") %></h2>
 
-  <p>The dialogs, or modal components, are implemented thorugh the rails helper <code>decidim_modal</code>. </p>
+  <p><%= t(".dialog_demo_description_html") %></p>
 
   <button data-dialog-open="example" class="button button__lg button__secondary">
     Show modal
   </button>
 
   <%= decidim_modal id: "example" do %>
-    I am a modal
+   I am a modal
   <% end %>
 </section>
 
 <section id="usage" class="design__section">
-  <h2>Usage</h2>
+  <h2><%= t("decidim.design.helpers.usage") %></h2>
 
-  <p>An dialog requires two elements:</p>
+  <p><%= t(".usage_description") %></p>
 
-  <p>1. A user actionable element, with the data-attribute <code>data-dialog-open="example"</code>, where example is the <code>id</code> of the modal.</p>
+  <p><%= t(".usage_description_html") %></p>
 
-  <p>2. A modal element, whose <code>id</code> matches the data-target value the trigger refers to.</p>
+  <p><%= t(".usage_description_2_html") %></p>
 
   <div class="design__section-snippet" style="margin-top: inherit;">
-    <p>Source code on GitHub: <%= link_to("decidim-core/app/packs/src/decidim/a11y.js", "https://github.com/decidim/decidim/blob/develop/decidim-core/app/packs/src/decidim/a11y.js", target: "_blank", rel: "noopener noreferrer") %></p>
+    <p><%= t("decidim.design.home.index.github_source") %>: <%= link_to("decidim-core/app/packs/src/decidim/a11y.js", "https://github.com/decidim/decidim/blob/develop/decidim-core/app/packs/src/decidim/a11y.js", target: "_blank", rel: "noopener noreferrer") %></p>
 
     <code>
-      <textarea rows="7">
+      <textarea spellcheck="false" rows="7">
 &lt;button data-dialog-open=&quot;example&quot; class=&quot;button button__lg button__secondary&quot;&gt;
   Show modal
 &lt;/button&gt;
@@ -53,24 +53,24 @@
 </section>
 
 <section id="html" class="design__section">
-  <h2>HTML tips</h2>
+  <h2><%= t("decidim.design.helpers.html_tips") %></h2>
 
-  <p>In order to display a complex modal, matching up the styles, do the following markup:</p>
+  <p><%= t(".tips_description") %></p>
 
-  <p>Pay attention to the <i>data-attributes</i> and the <i>ids</i>. For instance, the <code>[data-dialog-title]</code>'s id starts with <i>dialog-title</i> plus the <i>modal id</i>.</p>
+  <p><%= t(".tips_description_html") %></p>
 
   <div class="design__section-snippet" style="margin-top: inherit;">
     <code>
-      <textarea rows="20">
+      <textarea spellcheck="false" rows="20">
 &#60;%= decidim_modal id: "example" do %&#62;
   <div data-dialog-container>
-    &#60;%= icon "icon_identificator" %&#62; // ... pick a desired icon
+    &#60;%= icon "icon_identifier" %&#62; // ... pick a desired icon
     <h3 id="dialog-title-example" tabindex="-1" data-dialog-title>
       Modal title
     </h3>
     <div>
       <p id="dialog-desc-example">
-        Modal description (optional)
+         Modal description (optional)
       </p>
 
       // ... add more HTML
@@ -78,7 +78,7 @@
   </div>
   <div data-dialog-actions>
     <button data-dialog-close="example">
-      Close modal
+       Close modal
     </button>
     // ... add more buttons
   </div>

data/app/views/decidim/design/components/dropdowns.html.erb

@@ -1,24 +1,24 @@
 <% content_for :heading do %>
-  Dropdowns
+  <%= t("decidim.design.helpers.dropdowns") %>
 <% end %>
 
 <% content_for :description do %>
-  Dropdowns are a javascript feature available thanks to an external library called <a href="https://github.com/jonathanlevaillant/a11y-dropdown-component" target="_blank" rel="noopener noreferrer">a11y-dropdown-component</a>.
+<%= t("decidim.design.helpers.dropdowns_description_html", link: link_to(t("decidim.design.helpers.ally_link"), "https://github.com/jonathanlevaillant/a11y-dropdown-component", target: "_blank", rel: "noopener noreferrer")) %>
 <% end %>
 
 <% content_for :toc do %>
-  <a href="#example">Demo</a>
-  <a href="#usage">Usage</a>
+  <a href="#example"><%= t("decidim.design.helpers.demo") %></a>
+  <a href="#usage"><%= t("decidim.design.helpers.usage") %></a>
 <% end %>
 
 <section id="demo" class="design__section">
-  <h2>Demo</h2>
+  <h2><%= t("decidim.design.helpers.demo") %></h2>
 
-  <p>The dropdowns are used along the application in order to collapse large, easy-readable menus for desktop devices, but too wordy for mobile devices.</p>
+  <p><%= t("decidim.design.helpers.dropdowns_demo_description") %></p>
 
-  <p>This javascript feature is enhanced with a small css, through the naming: the hideable content MUST HAVE an <code>id</code> starting with <i>dropdown-menu</i>.</p>
+  <p><%= t("decidim.design.helpers.dropdowns_demo_description_html") %></p>
 
-  <p>The following example will not be noticeable in desktop, but mobile:</p>
+  <p><%= t("decidim.design.helpers.dropdowns_demo_1_description") %></p>
 
   <button id="dropdown-trigger-element" data-component="dropdown" data-target="dropdown-menu-element" data-auto-close="true">
     <span><%= t("decidim.searches.filters.jump_to") %></span>
@@ -36,19 +36,19 @@
 </section>
 
 <section id="usage" class="design__section">
-  <h2>Usage</h2>
+  <h2><%= t("decidim.design.helpers.usage") %></h2>
 
-  <p>An dropdown requires two elements:</p>
+  <p><%= t("decidim.design.helpers.dropdowns_usage_description") %></p>
 
-  <p>1. A user actionable element, with the data-attributes <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.</p>
+  <p><%= t("decidim.design.helpers.dropdowns_usage_description_html") %></p>
 
-  <p>2. A hideable element, whose <code>id</code> matches the data-target value the trigger refers to.</p>
+  <p><%= t("decidim.design.helpers.dropdowns_usage_1_description") %></p>
 
   <div class="design__section-snippet" style="margin-top: inherit;">
-    <p>Source code on GitHub: <%= link_to("decidim-core/app/packs/src/decidim/a11y.js", "https://github.com/decidim/decidim/blob/develop/decidim-core/app/packs/src/decidim/a11y.js", target: "_blank", rel: "noopener noreferrer") %></p>
+    <p><%= t("decidim.design.home.index.github_source") %>: <%= link_to("decidim-core/app/packs/src/decidim/a11y.js", "https://github.com/decidim/decidim/blob/develop/decidim-core/app/packs/src/decidim/a11y.js", target: "_blank", rel: "noopener noreferrer") %></p>
 
     <code>
-      <textarea rows="8">
+      <textarea spellcheck="false" rows="8">
 &lt;button id=&quot;dropdown-trigger-element&quot; data-component=&quot;dropdown&quot; data-target=&quot;dropdown-menu-element&quot;&gt;
   Trigger
 &lt;/button&gt;

data/app/views/decidim/design/components/follow.html.erb

@@ -1,5 +1,5 @@
 <% content_for :heading do %>
-  Follow
+  <%= t(".title") %>
 <% end %>
 
 <% content_for :toc do %>

data/app/views/decidim/design/components/forms.html.erb

@@ -1,21 +1,22 @@
 <% content_for :heading do %>
-  <%= cell "decidim/announcement", "This page comes from a legacy view. Content is outdated.", callout_class: "alert" %>
-  Forms
+  <%= cell "decidim/announcement", t(".header_alert"), callout_class: "alert" %>
+  <%= t(".title") %>
 <% end %>
 
 <% content_for :toc do %>
-  <a href="#common">HTML regular inputs</a>
-  <a href="#helps">Help texts</a>
-  <a href="#disabled">Disabled</a>
-  <a href="#error">Errors</a>
-  <a href="#length">Min/Max length</a>
-  <a href="#emoji">Emojis</a>
+  <a href="#common"><%= t(".html_regular_inputs") %></a>
+  <a href="#helps"><%= t(".help_texts") %></a>
+  <a href="#disabled"><%= t(".disabled") %></a>
+  <a href="#error"><%= t(".errors") %></a>
+  <a href="#length"><%= t(".min_max_length") %></a>
+  <a href="#emoji"><%= t(".emojis") %></a>
+  <a href="#multiselect"><%= t(".multiselect") %></a>
 <% end %>
 
 <%
   text_types = [
                 "date",
-                # "datetime-local",
+                "datetime_local",
                 # "email",
                 # "month",
                 "number",
@@ -32,15 +33,15 @@
 %>
 
 <section id="common-panel" class="design__section">
-  <h2 class="h2">HTML regular inputs</h2>
+  <h2 class="h2"><%= t(".html_regular_inputs") %></h2>
 
   <div class="form__wrapper">
-    <%= cell "decidim/announcement", "Only displays common types, full available list: date, datetime-local, email, month, number, password, search, tel, text, time, url, week" %>
+    <%= cell "decidim/announcement", t(".regular_inputs_description") %>
 
     <% text_types.each do |element| %>
       <label>
         input type="<%= element %>"
-        <input type="<%= element %>">
+        <input type="<%= element %>" <% if %w(datetime-local date).include?(element) %> hide_help="true" <% end %>>
       </label>
     <% end %>
 
@@ -74,7 +75,7 @@
 </section>
 
 <section id="helps" class="design__section">
-  <h2 class="h2">Help texts</h2>
+  <h2 class="h2"><%= t(".help_texts") %></h2>
 
   <div class="form__wrapper">
     <% text_types.each do |element| %>
@@ -118,7 +119,7 @@
 </section>
 
 <section id="disabled" class="design__section">
-  <h2 class="h2">Disabled</h2>
+  <h2 class="h2"><%= t(".disabled") %></h2>
 
   <div class="form__wrapper">
     <% text_types.each do |element| %>
@@ -158,10 +159,10 @@
 </section>
 
 <section id="error" class="design__section">
-  <h2 class="h2">Errors</h2>
+  <h2 class="h2"><%= t(".errors") %></h2>
 
   <div class="form__wrapper">
-    <%= cell "decidim/announcement", "Does not apply for select" %>
+    <%= cell "decidim/announcement", t(".errors_description") %>
 
     <% text_types.each do |element| %>
       <label>
@@ -186,7 +187,7 @@
     <% end %>
 
     <label>
-      textarea required
+      <%= t(".textarea_required") %>
       <textarea cols="30" rows="10" required></textarea>
       <div class="form-error">Lorem ipsum dolor sit amet.</div>
     </label>
@@ -194,10 +195,10 @@
 </section>
 
 <section id="length" class="design__section">
-  <h2 class="h2">Min/Max length</h2>
+  <h2 class="h2"><%= t(".min_max_length") %></h2>
 
   <div class="form__wrapper">
-    <%= cell "decidim/announcement", "Only works for input type='text' and textarea" %>
+    <%= cell "decidim/announcement", t(".min_max_length_description") %>
 
     <label>
       input type="text" maxlength="20"
@@ -222,10 +223,10 @@
 </section>
 
 <section id="emoji" class="design__section">
-  <h2 class="h2">Emojis</h2>
+  <h2 class="h2"><%= t(".emojis") %></h2>
 
   <div class="form__wrapper">
-    <%= cell "decidim/announcement", "Only works for textarea" %>
+    <%= cell "decidim/announcement", t(".emojis_description") %>
 
     <label>
       textarea data-input-emoji="true"
@@ -233,3 +234,16 @@
     </label>
   </div>
 </section>
+
+<section id="multiselect" class="design__section">
+  <h2 class="h2"><%= t(".multiselect") %></h2>
+
+  <div class="form__wrapper">
+    <p><%= t(".multiselect_description_html") %></p>
+
+    <label>
+      input type="text" class="js-tags-container" value="abc, 123"
+      <input type="text" class="js-tags-container" value="abc, 123">
+    </label>
+  </div>
+</section>

data/app/views/decidim/design/components/report.html.erb

@@ -1,5 +1,5 @@
 <% content_for :heading do %>
-  Report
+  <%= t(".title") %>
 <% end %>
 
 <% content_for :toc do %>

data/app/views/decidim/design/components/share.html.erb

@@ -1,5 +1,5 @@
 <% content_for :heading do %>
-  Share
+  <%= t(".title") %>
 <% end %>
 
 <% content_for :toc do %>

data/app/views/decidim/design/components/tab_panels.html.erb

@@ -1,5 +1,5 @@
 <% content_for :heading do %>
-  Tab Panels
+  <%= t(".title") %>
 <% end %>
 
 <% content_for :toc do %>

data/app/views/decidim/design/components/tooltips.html.erb

@@ -0,0 +1,104 @@
+<% content_for :heading do %>
+  <%= t(".title") %>
+<% end %>
+
+<% content_for :description do %>
+  <%= t(".description") %>
+<% end %>
+
+<% content_for :toc do %>
+  <a href="#demo"><%= t(".demo") %></a>
+  <a href="#usage"><%= t(".usage") %></a>
+<% end %>
+
+<section id="demo" class="design__section">
+  <h2><%= t(".demo") %></h2>
+
+  <p><%= t(".demo_description") %></p>
+
+  <table class="design__table">
+    <thead>
+      <th><%= t(".demo") %></th>
+      <th><%= t(".usage") %></th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <%= with_tooltip("Hello world", class: :top) do %>
+            <span>Hover me</span>
+          <% end %>
+        </td>
+        <td>
+          class: :top
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <%= with_tooltip("Hello world", class: :bottom) do %>
+            <span>Hover me</span>
+          <% end %>
+        </td>
+        <td>
+          class: :bottom
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <%= with_tooltip("Hello world", class: :left) do %>
+            <span>Hover me</span>
+          <% end %>
+        </td>
+        <td>
+          class: :left
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <%= with_tooltip("Hello world", class: :right) do %>
+            <span>Hover me</span>
+          <% end %>
+        </td>
+        <td>
+          class: :right
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+
+<section id="usage" class="design__section">
+  <h2><%= t(".usage") %></h2>
+
+  <p><%= t(".usage_p") %></p>
+
+  <p><%= t(".usage_p_1_html") %></p>
+
+  <p><%= t(".usage_p_2_html") %></p>
+
+  <p><%= t(".usage_p_3_html") %></p>
+
+  <div class="design__section-snippet" style="margin-top: inherit;">
+    <% github_link = "https://github.com/decidim/decidim/blob/develop/decidim-core/app/packs/src/decidim/tooltips.js" %>
+    <p><%= t(".github_source_html", github_link: link_to("decidim-core/app/packs/src/decidim/tooltips.js", github_link, target: "_blank", rel: "noopener noreferrer")) %></p>
+
+    <code>
+      <textarea spellcheck="false" rows="16">
+<%%= with_tooltip("Hello world", class: :top) do %>
+  <span>Hover me</span>
+<%% end %>
+
+<%%= with_tooltip("Hello world", class: :bottom) do %>
+  <span>Hover me</span>
+<%% end %>
+
+<%%= with_tooltip("Hello world", class: :right) do %>
+  <span>Hover me</span>
+<%% end %>
+
+<%%= with_tooltip("Hello world", class: :left) do %>
+  <span>Hover me</span>
+<%% end %>
+      </textarea>
+    </code>
+  </div>
+</section>

data/app/views/decidim/design/foundations/accessibility.html.erb

@@ -1,99 +1,99 @@
 <% content_for :heading do %>
-  Accessibility
+  <%= t(".accessibility_title") %>
 <% end %>
 
 <% content_for :description do %>
-  <p>Decidim follows the <u>Web Content Accessibility Guidelines (WCAG) 2.1</u>.</p>
+  <p><%= t(".decidim_follows_html") %></p>
 <% end %>
 
 <% content_for :toc do %>
-  <a href="#heading-order">Illogical heading order</a>
-  <a href="#unique-h1">Unique H1</a>
-  <a href="#one-heading">Heading on important sections</a>
-  <a href="#color-contrast">Color contrast</a>
-  <a href="#links-buttons">Links and buttons</a>
-  <a href="#a11y-labels">Accessibility labels</a>
-  <a href="#adjacent-links">Adjacent links</a>
-  <a href="#aria">Use ARIA</a>
-  <a href="#elements-hidden">Elements hidden</a>
+  <a href="#heading-order"><%= t(".illogical_heading_order") %></a>
+  <a href="#unique-h1"><%= t(".unique_h1") %></a>
+  <a href="#one-heading"><%= t(".heading_on") %></a>
+  <a href="#color-contrast"><%= t(".color_contrast") %></a>
+  <a href="#links-buttons"><%= t(".links_and_buttons") %></a>
+  <a href="#a11y-labels"><%= t(".accessibility_labels") %></a>
+  <a href="#adjacent-links"><%= t(".adjacent_links") %></a>
+  <a href="#aria"><%= t(".use_aria") %></a>
+  <a href="#elements-hidden"><%= t(".elements_hidden") %></a>
 <% end %>
 
 <section id="heading-order" class="design__section">
-  <h2>Illogical heading order</h2>
+  <h2><%= t(".illogical_heading_order") %></h2>
 
-  <p>Every page should have a logical heading order when using the &#60;h1&#62;, &#60;h2&#62;, &#60;h3&#62;, &#60;h4&#62;, &#60;h5&#62; and &#60;h6&#62; heading elements.</p>
+  <p><%= t(".illogical_heading_paragraph") %></p>
 
-  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_illogical_heading_order" target="_blank" rel="noopener noreferrer">here</a></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_illogical_heading_order", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="unique-h1" class="design__section">
-  <h2>Unique H1</h2>
+  <h2><%= t(".unique_h1") %></h2>
 
-  <p>Every page should have a unique H1 heading on it</p>
+  <p><%= t(".unique_h1_paragraph") %></p>
 
-  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_unique_h1_on_every_page" target="_blank" rel="noopener noreferrer">here</a></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_unique_h1_on_every_page", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="one-heading" class="design__section">
-  <h2>Heading on important sections</h2>
+  <h2><%= t(".important_sections_heading") %></h2>
 
-  <p>It is highly important that each important section of the page has a heading to make it easier to understand what important sections are on the page just by browsing through its headings.</p>
+  <p><%= t(".important_sections_paragraph") %></p>
 
-  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_heading_on_important_sections" target="_blank" rel="noopener noreferrer">here</a></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_heading_on_important_sections", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="color-contrast" class="design__section">
-  <h2>Color contrast</h2>
+  <h2><%= t(".color_contrast") %></h2>
 
-  <p>When creating user interfaces or modifying the colors, always make sure that you are not breaking accessibility with your changes. You can use the Color contrast checker to ensure that your colors have enough contrast against the background color where they are displayed at.</p>
+  <p><%= t(".color_contrast_paragraph") %></p>
 
-  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_color_contrast " target="_blank" rel="noopener noreferrer">here</a></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_color_contrast ", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="links-buttons" class="design__section">
-  <h2>Links and buttons</h2>
+  <h2><%= t(".links_and_buttons") %></h2>
 
-  <p>The anchor elements (i.e. links) are meant to link to different pages or to anchor positions within the page. If the element is supposed to e.g. open some hidden item on that page, you should use the &#60;button&#62; element instead.</p>
+  <p><%= t(".links_and_buttons_paragraph") %></p>
 
-  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_links_and_buttons" target="_blank" rel="noopener noreferrer">here</a></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_links_and_buttons", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="a11y-labels" class="design__section">
-  <h2>Accessibility labels</h2>
+  <h2><%= t(".accessibility_labels") %></h2>
 
-  <p>When defining elements, always make sure they make sense for screen reader users.</p>
+  <p><%= t(".accessibility_labels_paragraph") %></p>
 
-  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_accessibility_labels" target="_blank" rel="noopener noreferrer">here</a></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_accessibility_labels", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="adjacent-links" class="design__section">
-  <h2>Adjacent links for the same resource</h2>
+  <h2><%= t(".adjacent_links_header") %></h2>
 
-  <p>If the same resource has multiple adjacent links pointing to it, it makes it difficult for such users to glance through the page because they might need to go through multiple links to get to the next resource.</p>
+  <p><%= t(".adjacent_links_paragraph") %></p>
 
-  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_adjacent_links_for_the_same_resource" target="_blank" rel="noopener noreferrer">here</a></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_adjacent_links_for_the_same_resource", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="dynamic-changes" class="design__section">
-  <h2>Dynamic functionality changes the page context unintuitively</h2>
+  <h2><%= t(".dynamic_changes_header") %></h2>
 
-  <p>Changes in the form inputs should not change the context of the page automatically.</p>
+  <p><%= t(".dynamic_changes_paragraph") %></p>
 
-  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_dynamic_functionality_changes_the_page_context_unintuitively" target="_blank" rel="noopener noreferrer">here</a></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_dynamic_functionality_changes_the_page_context_unintuitively", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="aria" class="design__section">
-  <h2>Use ARIA attributes where possible</h2>
+  <h2><%= t(".use_aria_header") %></h2>
 
-  <p>Many elements that provide interactive functionality on the website require ARIA attributes on them to make them accessible.</p>
+  <p><%= t(".use_aria_paragraph") %></p>
 
-  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_use_aria_attributes_where_possible" target="_blank" rel="noopener noreferrer">here</a></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_use_aria_attributes_where_possible", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>
 
 <section id="elements-hidden" class="design__section">
-  <h2>Elements hidden from the accessibility API</h2>
+  <h2><%= t(".elements_hidden_header") %></h2>
 
-  <p>To hide an element from assistive technologies, use the aria-hidden="true" attribute on it.</p>
+  <p><%= t(".elements_hidden_paragraph") %></p>
 
-  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_elements_hidden_from_the_accessibility_api" target="_blank" rel="noopener noreferrer">here</a></p>
+  <p><%= t(".see_further_info_html", link: link_to(t(".here_link"), "https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_elements_hidden_from_the_accessibility_api", target: "_blank", rel: "noopener noreferrer")) %></p>
 </section>

data/app/views/decidim/design/foundations/color.html.erb

@@ -1,10 +1,13 @@
 <% content_for :heading do %>
-  Color
+  <%= t(".color_header") %>
 <% end %>
 
 <% content_for :description do %>
-  <p>We provide a Base palette with few colors so simple customizations are easy. You can modify the Base palette either in the Administration area or in the Tailwind configuration file if you need more advanced customization.</p>
-  <p>When customizing your colors, have in mind the <%= link_to "WCAG 2.1 AA compliant contrast ratios", "https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html" %>. You can check the contrast of your choosing with <%= link_to "WebAIM Contrast Checker", "https://webaim.org/resources/contrastchecker" %> or other similar tools.</p>
+  <p><%= t(".description_p1") %></p>
+  <p><%= t(".description_p2_html",
+           contrast_link: link_to(t(".wcag_compliant_rations"), "https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html", target: "_blank", rel: "noopener noreferrer"),
+           checker_link: link_to(t(".wcag_contrast_checker"), "https://webaim.org/resources/contrastchecker", target: "_blank", rel: "noopener noreferrer")
+         ) %></p>
 <% end %>
 
 <% content_for :toc do %>

data/app/views/decidim/design/foundations/iconography.html.erb

@@ -1,10 +1,11 @@
 <% content_for :heading do %>
-  Iconography
+  <%= t(".title") %>
 <% end %>
 
 <% content_for :description do %>
-  <p>We use icons to reinforce the meaning of actions, titles, etc.</p>
-  <p>We use the Remixicon open source library: <a href="https://remixicon.com" target="_blank" rel="noopener noreferrer">https://remixicon.com</a></p>
+<p><%= t(".description_iconography") %></p>
+ <% iconography_link_url = "https://remixicon.com" %>
+<p><%= t(".description_iconography_html", iconography_link: link_to(iconography_link_url, iconography_link_url, target: "_blank", rel: "noopener noreferrer")) %></p>
 <% end %>
 
 <% content_for :toc do %>