decidim-dev 0.24.0 → 0.25.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3b1d7daefcdefe63f29b31c8955b3d70c8265df2464702b21a79f89ada40360d
-  data.tar.gz: 313bfbf5bcff1fbd753d3f6b219f3306843a4ed70424acd17c80a929e7e60f65
+  metadata.gz: 9aba426c40ed9db49b093290768b3259090e9d848ce4d75e0c09b32c96c46be0
+  data.tar.gz: 565ba64637d47bc4728ceee547925a78ffee3921150c32f0d2eb0ca532260cde
 SHA512:
-  metadata.gz: 55269ab95f1df0266f33ee728b5cf0a49a2681ea3f14570b45e6eca24e7b210682cab6ab2e44e0003b019ad57b29355b1abd3712f34a62b73d0125052e44d2c0
-  data.tar.gz: 6c3c74b497daa999098b02704ec560bf29d311baaec725f9aa8be4a2f9bc679b7b95a623918e7f52ed6faa6ca8776cdb9406e1eca9b3a3cde7bd7fd76c112509
+  metadata.gz: b35b529f119a29986c1c94e99ca8dd568bab021481756e2fde1fd016cebfff3249ec0fd697253e4e7b7e713f89e9da63e889cecaef257ec69dc36a87a9cacf26
+  data.tar.gz: 2ca207da7cf3f2c11c19fd7844d1de75afb6a480b4cbc9fd5eba3a327517731446970a2f52056c325f78a11e714cf479f3f242f130e11ede1f9b2da505eeabcd

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.scss

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

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/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