From a5cc94486014dcc2613cdd40797ccb3b6de54033 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Sun, 2 Aug 2020 22:18:02 +0200
Subject: [PATCH 1/2] a11y: add "evaluation stars" rendering using radio
 buttons (#40886)

---
 static/includes/_misc.scss                    | 52 +++++++++++++++++--
 .../widgets/radiobuttons--evaluation.html     | 31 +++++++++++
 .../forms/widgets/select--evaluation.html     |  2 +-
 3 files changed, 79 insertions(+), 6 deletions(-)
 create mode 100644 templates/qommon/forms/widgets/radiobuttons--evaluation.html

diff --git a/static/includes/_misc.scss b/static/includes/_misc.scss
index f8f88417..96513c62 100644
--- a/static/includes/_misc.scss
+++ b/static/includes/_misc.scss
@@ -732,9 +732,14 @@ div.leaflet-control-gps {
 }
 
 // evaluation field
-.star-choice {
-	span {
+.template-evaluation label.star-choice,
+div.star-choice {
+	span.star {
 		&::before {
+			position: static;
+			height: auto;
+			width: auto;
+			border: none;
 			font-family: FontAwesome;
 			content: "\f006";  // star-o
 			color: #776;
@@ -746,10 +751,47 @@ div.leaflet-control-gps {
 			content: "\f005"; // star
 			color: #ffaa00;
 		}
-		&:hover::before {
-			transform: scale(1.4);
-			opacity: 0.8;
+	}
+	input[type=radio]:hover + span.star::before,
+	input[type=radio]:focus + span.star::before,
+	span.star:hover::before {
+		transform: scale(1.4);
+		opacity: 0.8;
+	}
+}
+
+.RadiobuttonsWidget.template-evaluation {
+	br {
+		display: none;
+	}
+	input {
+		@extend .sr-only;
+	}
+	input:focus + span.star {
+		@if $widget-focus-outline == none {
+			outline: $widget-border;
+			@if extract-color($widget-border) == transparent {
+				outline-color: #444;
+			}
+			outline-style: dotted;
+		} @else {
+			outline: $widget-focus-outline;
+			outline-offset: $widget-focus-outline-offset;
 		}
+
+	}
+	input + span::after {
+		// cancel custom radio rendering
+		display: none;
+	}
+	label {
+		margin-right: 0;
+	}
+	input + span {
+		padding-left: 0;
+	}
+	.star-label {
+		@extend .sr-only;
 	}
 }
 
diff --git a/templates/qommon/forms/widgets/radiobuttons--evaluation.html b/templates/qommon/forms/widgets/radiobuttons--evaluation.html
new file mode 100644
index 00000000..8a012663
--- /dev/null
+++ b/templates/qommon/forms/widgets/radiobuttons--evaluation.html
@@ -0,0 +1,31 @@
+{% extends "qommon/forms/widget.html" %}
+{% load qommon %}
+{% block widget-control %}
+
+{% for option in widget.get_options %}
+<label class="star-choice"
+   title="{{ option.label }}"
+   {% if option.disabled %}class="disabled"{% endif %}><input
+   {% if option.selected %}checked="checked"
+   {% elif widget.readonly or option.disabled %}disabled="disabled"{% endif %}
+   {% for attr in widget.attrs.items %}{{attr.0}}="{{attr.1}}"{% endfor %}
+   type="radio" name="{{ widget.name }}"
+   value="{{ option.value }}"><span class="star" aria-hidden="true"></span><span class="star-label">{{ option.label }}</span></label>
+   {% if not forloop.last %}{{ widget.delim|safe }}{% endif %}
+{% endfor %}
+
+<script>
+$(function() {
+  var $widget = $('#form_label_{{widget.name}}').parents('div.widget');
+  $widget.find('.star-choice input').on('change', function() {
+    if ($(this).is(':checked')) {
+      $(this).parent().nextAll().find('.star').removeClass('selected');
+      $(this).parent().prevAll().find('.star').addClass('selected');
+      $(this).next().addClass('selected');
+    }
+  });
+  $widget.find('input:checked').trigger('change');
+});
+</script>
+
+{% endblock %}
diff --git a/templates/qommon/forms/widgets/select--evaluation.html b/templates/qommon/forms/widgets/select--evaluation.html
index 71f8a1d2..6d1b240f 100644
--- a/templates/qommon/forms/widgets/select--evaluation.html
+++ b/templates/qommon/forms/widgets/select--evaluation.html
@@ -11,7 +11,7 @@
 </select>
 <div class="star-choice">
 {% for option in widget.get_options %}
-  <span data-index="{{ forloop.counter }}"></span>
+  <span class="star" data-index="{{ forloop.counter }}"></span>
 {% endfor %}
 </div>
 <script>
-- 
2.29.2

