decidim-dev 0.24.1 → 0.25.0.rc2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03de1418ff97eccd007ff5c971731415ab969348a1e7f9a18fbfcc510279f873
-  data.tar.gz: 0f4d91588b8539a6a043ee2298887f60afc9fc85c5fc42a9bafebfc446146288
+  metadata.gz: 7b1b24871c99bff6f9e168d4d16ca9dd279b8c7ff0bf312ef0497005bb23b2d5
+  data.tar.gz: 172be48ccb45f63076ccd836cd242530014f4b5301e53a64d405a3473be770d3
 SHA512:
-  metadata.gz: ca63c93ad52c2c5f32f77c441db50113814ddfde9680f64d59dfca5dffc651bae4035c18227591486c97c42ec40246e7fe82e540f5a7318dcd1dfbaf35e0f4ca
-  data.tar.gz: dcf8f5ba71ed4c7abab03d67e7244eb0c9576ecc525b4c5ff35049f288061a7e77cad97c49597844fc39b49c3ef03f3af0446074db3150b9bf27144008a1697f
+  metadata.gz: d53f589538e8fb0aec6b2c1fa703f07dc16d5e9da5d458496d56189c86812c18074e20c0e9d140cf62eef46061a28561602126b5dacd0e2047bf117840a77f50
+  data.tar.gz: 8aee801c5efff8b6fe9c956b08ade7d8359f0c5e5471ae69846b6d63fbcdbd63da5f0d65900783bddc0482430a6fddda02cc26784fdcfd6a6929b76aeebbb3ad

data/app/controllers/concerns/decidim/dev/needs_development_tools.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Dev
+    # This concern adds development tools, such as the accessibility checks
+    # to the views where this is included for development purposes. This should
+    # be only included in the development environment.
+    module NeedsDevelopmentTools
+      extend ActiveSupport::Concern
+
+      included do
+        before_action :apply_development_tools
+      end
+
+      private
+
+      def apply_development_tools
+        return unless respond_to?(:snippets)
+
+        snippets.add(:head, helpers.stylesheet_pack_tag("decidim_dev"))
+        snippets.add(:head, helpers.javascript_pack_tag("decidim_dev"))
+      end
+    end
+  end
+end

data/app/mailers/decidim/dummy_resources/dummy_resource_mailer.rb

@@ -3,11 +3,17 @@
 module Decidim
   module DummyResources
     class DummyResourceMailer < ApplicationMailer
-      def send_email(user, organization)
+      def send_email(user, organization, subject, reply_to)
         @user = user
         @organization = organization
 
-        mail(to: "#{user.name} <#{user.email}>") do |format|
+        hash = { to: "#{user.name} <#{user.email}>" }
+        hash[:subject] = subject if subject
+        hash[:reply_to] = reply_to if reply_to
+
+        mail(
+          hash
+        ) do |format|
           format.text { "This is the test" }
           format.html { "<p>This is a mail </p>" }
         end

data/app/packs/entrypoints/decidim_dev.js

@@ -0,0 +1,7 @@
+// Images
+require.context("../images", true)
+
+// CSS
+import "entrypoints/decidim_dev.scss";
+
+import "src/decidim/dev/accessibility";

data/app/packs/entrypoints/decidim_dev.scss

@@ -0,0 +1 @@
+@import "stylesheets/decidim/dev";

data/app/packs/src/decidim/dev/accessibility.js

@@ -0,0 +1,168 @@
+import axe from "axe-core"
+import icon from "src/decidim/icon"
+
+const positionIndicators = () => {
+  $(".decidim-accessibility-indicator").each((_i, el) => {
+    const $indicator = $(el);
+    const $target = $indicator.data("accessibility-target");
+    const offset = $target.offset();
+
+    $indicator.css({
+      top: offset.top - 30,
+      left: offset.left - 30
+    });
+  });
+};
+
+const moveScreenTo = ($target) => {
+  // Scroll the view where the indicator is visible
+  const targetTop = $target.offset().top;
+  const screenHeight = $(window).height();
+  const screenTop = $(window).scrollTop();
+  const screenBottom = screenTop + screenHeight;
+  if (targetTop < screenTop || targetTop > screenBottom) {
+    $(window).scrollTop(targetTop - Math.round(screenHeight / 2));
+  }
+
+  // Scroll horizontally so that the element is visible (240 is the
+  // accessibility sidebar width).
+  const targetLeft = $target.offset().left;
+  const screenWidth = $(window).width() - 240;
+  const screenLeft = $(window).scrollLeft() + 240;
+  const screenRight = screenLeft + screenWidth;
+  if (targetLeft < screenLeft || targetLeft > screenRight) {
+    $(window).scrollLeft(targetLeft - Math.round(screenWidth / 2));
+  }
+};
+
+const htmlEncode = (text) => {
+  return $("<div />").text(text).html();
+};
+
+$(() => {
+  const $badge = $(`
+    <div lang="en" class="decidim-accessibility-badge" tabindex="0" aria-label="Toggle accessibility report">
+      <div class="decidim-accessibility-title">WAI WCAG</div>
+      <div class="decidim-accessibility-info"></div>
+    </div>
+  `);
+  const $report = $('<div lang="en" class="decidim-accessibility-report"></div>');
+
+  let resizeTimeout = null;
+  $(window).on("resize", () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      positionIndicators();
+    }, 500);
+  });
+
+  $badge.on("click", () => {
+    $("body").toggleClass("decidim-accessibility-report-open");
+    positionIndicators();
+  });
+
+  axe.run().then((results) => {
+    $("body").prepend($report).prepend($badge);
+
+    if (results.violations.length < 1) {
+      $badge.addClass("decidim-accessibility-success");
+      $(".decidim-accessibility-info", $badge).append(icon("check"));
+      $report.append(`
+        <div class="decidim-accessibility-report-item">
+          <div class="decidim-accessibility-report-item-title">
+            No accessibility violations found
+          </div>
+        </div>
+      `);
+      return;
+    }
+
+    $badge.addClass("decidim-accessibility-violation");
+    $(".decidim-accessibility-info", $badge).append(icon("warning")).append(`
+      <span class="decidim-accessibility-info-amount">
+        ${results.violations.length}
+      </span>
+    `);
+
+    results.violations.forEach((violation) => {
+      const $item = $(`
+        <div class="decidim-accessibility-report-item" data-accessibility-violation-id="${violation.id}">
+          <div class="decidim-accessibility-report-item-title">
+            ${violation.id} - ${htmlEncode(violation.help)}
+          </div>
+          <div class="decidim-accessibility-report-item-description">
+            <div>Impact: ${violation.impact}</div>
+            <div>
+              ${htmlEncode(violation.description)}
+            </div>
+            <div class="decidim-accessibility-report-item-nodes">
+              Nodes:
+            </div>
+          </div>
+        </div>
+      `);
+      const $violationNodes = $("<ul></ul>");
+      $(".decidim-accessibility-report-item-nodes", $item).append($violationNodes);
+
+      violation.nodes.forEach((node) => {
+        node.target.forEach((target) => {
+          // The selectors can have IDs starting with numbers which may not
+          // be correctly indicated by axe. E.g. if the selector is `#123aa`,
+          // axe might report it as `#\31 23aa`. It always adds `#\3` and a
+          // space after the following number.
+          const selector = target.replace(/#\\3([0-9]) /g, "#$1")
+          const $target = $(selector);
+          const $indicator = $(`
+            <div class="decidim-accessibility-indicator" aria-hidden="true">${icon("warning")}</div>
+          `);
+          $indicator.data("accessibility-target", $target);
+          $target.data("accessibility-indicator", $indicator);
+          $target.attr("data-accessibility-violation", true);
+          $("body").append($indicator);
+
+          const $link = $(`<a href="#">${selector}</a>`);
+          $link.data("accessibility-target", $target);
+
+          $violationNodes.append($("<li></li>").append($link));
+
+          $indicator.on("click", () => {
+            clearTimeout($item.data("blink-timeout"));
+            clearTimeout($link.data("blink-timeout"));
+
+            $item.addClass("decidim-accessibility-report-item-blink");
+            $item.data("blink-timeout", setTimeout(() => {
+              $item.removeClass("decidim-accessibility-report-item-blink");
+            }, 1000));
+            $link.addClass("decidim-accessibility-report-item-nodes-item-blink");
+            $link.data("blink-timeout", setTimeout(() => {
+              $link.removeClass("decidim-accessibility-report-item-nodes-item-blink");
+            }, 1000));
+          });
+        });
+      });
+
+      $(".decidim-accessibility-report-item-nodes a", $item).on("click", (ev) => {
+        ev.preventDefault();
+        const $target = $(ev.target).data("accessibility-target");
+        const $indicator = $target.data("accessibility-indicator");
+        clearTimeout($indicator.data("blink-timeout"));
+
+        moveScreenTo($target);
+
+        setTimeout(() => {
+          // From base color to blink color (1s)
+          $indicator.addClass("decidim-accessibility-indicator-blink")
+          $target.attr("data-accessibility-violation", "blink");
+
+          // From blink color to base color (1s)
+          $indicator.data("blink-timeout", setTimeout(() => {
+            $indicator.removeClass("decidim-accessibility-indicator-blink");
+            $target.attr("data-accessibility-violation", true);
+          }, 1000));
+        }, 10);
+      });
+
+      $report.append($item);
+    });
+  });
+});

data/app/packs/stylesheets/decidim/dev/_accessibility.scss

@@ -0,0 +1,133 @@
+.decidim-accessibility-badge{
+  position: fixed;
+  display: flex;
+  z-index: 9999;
+  top: 60px;
+  left: 0;
+  background: #fff;
+  border: 1px solid #888;
+  align-items: stretch;
+  user-select: none;
+  cursor: pointer;
+
+  &.decidim-accessibility-success{
+    .decidim-accessibility-info{
+      color: #339833;
+    }
+  }
+
+  &.decidim-accessibility-violation{
+    .decidim-accessibility-info{
+      color: #f00;
+    }
+  }
+
+  > *{
+    border-left: 1px solid #888;
+    padding: 2px 10px;
+
+    &:first-child{
+      border-left: 0;
+    }
+  }
+
+  .decidim-accessibility-info{
+    display: flex;
+    text-align: center;
+    align-items: center;
+  }
+}
+
+.decidim-accessibility-report{
+  position: fixed;
+  z-index: 99999;
+  display: none;
+  overflow: auto;
+  padding: 10px 0;
+  background-color: #fff;
+  border-right: 1px solid #888;
+
+  .decidim-accessibility-report-item{
+    background-color: #fff;
+    border-top: 1px solid #888;
+    padding: 10px 20px;
+    transition: background-color 1s;
+
+    &:first-child{
+      border-top: 0;
+    }
+
+    &.decidim-accessibility-report-item-blink{
+      background-color: #fff9d5;
+    }
+
+    .decidim-accessibility-report-item-title{
+      font-size: 18px;
+      font-weight: bold;
+    }
+
+    .decidim-accessibility-report-item-nodes{
+      a{
+        background-color: rgba(255, 255, 255, 0);
+        transition: background-color 1s;
+
+        &.decidim-accessibility-report-item-nodes-item-blink{
+          background-color: #ffbdad;
+        }
+      }
+    }
+  }
+}
+
+.decidim-accessibility-indicator{
+  position: absolute;
+  z-index: 9999;
+  display: none;
+  opacity: 0;
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  border: 5px solid #f00;
+  color: #f00;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 1s, border-color 1s, background-color 1s, color 1s;
+  user-select: none;
+  cursor: pointer;
+
+  &.decidim-accessibility-indicator-blink{
+    border-color: #f19d00;
+    background-color: #f19d00;
+    color: #fff;
+  }
+}
+
+body.decidim-accessibility-report-open{
+  .decidim-accessibility-report{
+    display: block;
+    width: 240px;
+    height: 100%;
+  }
+
+  .decidim-accessibility-badge,
+  .off-canvas-wrapper,
+  .profiler-results.profiler-top.profiler-left{
+    left: 240px;
+  }
+
+  .decidim-accessibility-indicator{
+    display: flex;
+    opacity: 1;
+  }
+
+  [data-accessibility-violation]{
+    outline: 5px dashed #f00 !important;
+    outline-offset: 3px !important;
+    transition: outline-color 1s;
+
+    &[data-accessibility-violation="blink"]{
+      outline-color: #f19d00 !important;
+    }
+  }
+}

data/app/packs/stylesheets/decidim/dev.scss

@@ -0,0 +1 @@
+@import "stylesheets/decidim/dev/accessibility";

data/config/assets.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+base_path = File.expand_path("..", __dir__)
+
+Decidim::Webpacker.register_path("#{base_path}/app/packs")
+Decidim::Webpacker.register_entrypoints(
+  decidim_dev: "#{base_path}/app/packs/entrypoints/decidim_dev.js"
+)

data/config/locales/ar.yml

@@ -25,17 +25,11 @@ ar:
           next_level_in: إنشاء %{score} اختبارات أخرى للوصول إلى المستوى التالي!
           unearned_another: لم ينشئ هذا المشارك أي اختبارات حتى الآن.
           unearned_own: لم تنشئ أية اختبارات بعد.
-    pages:
-      home:
-        statistics:
-          bar: شريط
-          dummies_count_high: الدمى عالية
-          dummies_count_medium: الدمى المتوسطة
-          foo: فو
-    participatory_processes:
-      statistics:
-        dummies_count_high: الدمى عالية
-        dummies_count_medium: الدمى المتوسطة
     resource_links:
       test_link:
         dummy_resource_dummy: الدمية ذات الصلة
+    statistics:
+      bar: شريط
+      dummies_count_high: الدمى عالية
+      dummies_count_medium: الدمى المتوسطة
+      foo: فو

data/config/locales/bg.yml

@@ -40,17 +40,11 @@ bg:
           next_level_in: Създайте още %{score} теста за да достигнете следващо ниво!
           unearned_another: Този участник все още не е създал тест.
           unearned_own: Вие все още не сте създали тест.
-    pages:
-      home:
-        statistics:
-          bar: Нещо1
-          dummies_count_high: Пример за максимум
-          dummies_count_medium: Пример за средно
-          foo: Нещо2
-    participatory_processes:
-      statistics:
-        dummies_count_high: Пример за максимум
-        dummies_count_medium: Пример за средно
     resource_links:
       test_link:
         dummy_resource_dummy: Пример за свързан
+    statistics:
+      bar: Нещо1
+      dummies_count_high: Пример за максимум
+      dummies_count_medium: Пример за средно
+      foo: Нещо2

data/config/locales/ca.yml

@@ -40,17 +40,11 @@ ca:
           next_level_in: Crea %{score} més proves per arribar al següent nivell!
           unearned_another: Aquesta participant encara no ha creat cap prova.
           unearned_own: Encara no has creat cap prova.
-    pages:
-      home:
-        statistics:
-          bar: Barra
-          dummies_count_high: Fals alt
-          dummies_count_medium: Fals mitjà
-          foo: Foo
-    participatory_processes:
-      statistics:
-        dummies_count_high: Prova alt
-        dummies_count_medium: Prova mig
     resource_links:
       test_link:
         dummy_resource_dummy: Prova relacionada
+    statistics:
+      bar: Barra
+      dummies_count_high: Fals alt
+      dummies_count_medium: Fals mitjà
+      foo: Foo