From 927adcc776859fd30411a4d76ab14399847894ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Fri, 11 Mar 2022 08:41:52 +0100
Subject: [PATCH] a11y: adapt for radiobuttons/checkboxes widgets in fieldsets
 (#62750)

---
 static/ac-versailles/_custom.scss               |  2 +-
 static/alpes-maritimes-2018/_custom.scss        |  6 +++---
 static/arpajon/_custom.scss                     |  2 +-
 static/bethune-bruay/_custom.scss               |  4 ++--
 static/caen/_custom.scss                        |  2 +-
 static/calvados-cd14/_custom.scss               |  2 +-
 static/calvados-intranet-cd14/_custom.scss      |  4 ++--
 static/cd06-ezyservices/_custom.scss            |  2 +-
 static/cnil/_custom.scss                        |  2 +-
 static/haute-garonne-cd31/_custom.scss          |  2 +-
 static/includes/_forms.scss                     | 10 ++++++++--
 static/izi-ici/_custom.scss                     |  2 +-
 static/la-rochelle/_custom.scss                 |  2 +-
 static/ma-cnil/_custom.scss                     |  2 +-
 static/minint/sass/_form.scss                   |  2 +-
 static/pre-saint-gervais/_custom.scss           |  2 +-
 static/quimper/_custom.scss                     |  4 ++--
 static/rouen/_custom.scss                       |  2 +-
 static/saone-et-loire-cd71-2019/_custom.scss    |  2 +-
 static/sens/_custom.scss                        |  2 +-
 static/signal-publik/_custom.scss               |  2 +-
 static/strasbourg-2018/_custom.scss             |  6 ++++++
 static/thonon-agglomeration-online/_custom.scss |  2 +-
 static/thonon-agglomeration/_custom.scss        |  2 +-
 static/toulouse-metropole/_custom.scss          |  6 +++---
 static/toulouse/_custom.scss                    |  4 ++--
 static/villejuif/_custom.scss                   | 10 +++++-----
 27 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/static/ac-versailles/_custom.scss b/static/ac-versailles/_custom.scss
index bff006ea..addbee0c 100644
--- a/static/ac-versailles/_custom.scss
+++ b/static/ac-versailles/_custom.scss
@@ -51,7 +51,7 @@ form.quixote {
 		border: 1px solid #999;
 	}
 
-	div.title label {
+	.title label {
 		font-weight: bold;
 	}
 
diff --git a/static/alpes-maritimes-2018/_custom.scss b/static/alpes-maritimes-2018/_custom.scss
index b75fb5e7..29d2ab49 100644
--- a/static/alpes-maritimes-2018/_custom.scss
+++ b/static/alpes-maritimes-2018/_custom.scss
@@ -398,7 +398,7 @@ div.gru-content div#rub_service, div#rub_service {
 		&.FileWidget {
 			margin-bottom: 0;
 		}
-		div.title {
+		.title {
 			font-weight: bold;
 			margin-bottom: 1ex;
 		}
@@ -422,7 +422,7 @@ div.gru-content div#rub_service, div#rub_service {
 			width: 100%;
 			display: block;
 		}
-		div.widget div.title, div.field span.label {
+		div.widget .title, div.field span.label {
 			font-weight: bold;
 			&::after {
 				content: ':';
@@ -432,7 +432,7 @@ div.gru-content div#rub_service, div#rub_service {
 		div.field {
 			margin: 0;
 		}
-		div.title, div.content, div.value {
+		.title, div.content, div.value {
 			display: inline;
 		}
 		div.page {
diff --git a/static/arpajon/_custom.scss b/static/arpajon/_custom.scss
index 82ee475a..58f797a3 100644
--- a/static/arpajon/_custom.scss
+++ b/static/arpajon/_custom.scss
@@ -107,7 +107,7 @@ div#services > ul > li > strong > a,
 	}
 }
 
-div.title label {
+.title label {
 	font-weight: bold;
 }
 
diff --git a/static/bethune-bruay/_custom.scss b/static/bethune-bruay/_custom.scss
index 22cb4892..bf585a3b 100644
--- a/static/bethune-bruay/_custom.scss
+++ b/static/bethune-bruay/_custom.scss
@@ -89,13 +89,13 @@ select, select:focus, select:focus:not([readonly]) {
 	border-bottom: 1px solid $grey;
 }
 
-div.widget div.title {
+div.widget .title {
 	color: $grey;
 	text-transform: uppercase;
 	font-weight: 700;
 }
 
-.CheckboxWidget div.title > label {
+.CheckboxWidget .title > label {
 	color: black;
 	font-weight: normal;
 	text-transform: none;
diff --git a/static/caen/_custom.scss b/static/caen/_custom.scss
index 9475dced..e3a7db79 100644
--- a/static/caen/_custom.scss
+++ b/static/caen/_custom.scss
@@ -645,7 +645,7 @@ div#account-management ul {
 	@extend %small-button-links-list;
 }
 
-div.widget div.title {
+div.widget .title {
 	margin-bottom: 0.25em;
 }
 
diff --git a/static/calvados-cd14/_custom.scss b/static/calvados-cd14/_custom.scss
index b3aa902b..76d599fb 100644
--- a/static/calvados-cd14/_custom.scss
+++ b/static/calvados-cd14/_custom.scss
@@ -161,7 +161,7 @@ body.scrolled {
 	}
 }
 
-div.widget div.title {
+div.widget .title {
 	margin-bottom: 2px;
 }
 
diff --git a/static/calvados-intranet-cd14/_custom.scss b/static/calvados-intranet-cd14/_custom.scss
index 5092fce5..6378f409 100644
--- a/static/calvados-intranet-cd14/_custom.scss
+++ b/static/calvados-intranet-cd14/_custom.scss
@@ -324,7 +324,7 @@ body.has-picture {
 	}
 }
 
-div.widget div.title {
+div.widget .title {
 	margin-bottom: 2px;
 }
 
@@ -346,4 +346,4 @@ span.helptext, div.hint {
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/static/cd06-ezyservices/_custom.scss b/static/cd06-ezyservices/_custom.scss
index bb636a63..a0c9052f 100644
--- a/static/cd06-ezyservices/_custom.scss
+++ b/static/cd06-ezyservices/_custom.scss
@@ -165,7 +165,7 @@ div#tracking-code {
 	}
 }
 
-div.widget div.title {
+div.widget .title {
 	font-size: 1.1rem;
 	font-weight: bold;
 	margin-bottom: 5px;
diff --git a/static/cnil/_custom.scss b/static/cnil/_custom.scss
index d10da07b..d989f861 100644
--- a/static/cnil/_custom.scss
+++ b/static/cnil/_custom.scss
@@ -200,7 +200,7 @@ div.form-validation {
 	div.page {
 		background: $lightgray;
 	}
-	div.title label {
+	.title label {
 		font-weight: bold;
 	}
 	input[readonly], select[readonly], textarea[readonly] {
diff --git a/static/haute-garonne-cd31/_custom.scss b/static/haute-garonne-cd31/_custom.scss
index 641f50d0..db9ff5fd 100644
--- a/static/haute-garonne-cd31/_custom.scss
+++ b/static/haute-garonne-cd31/_custom.scss
@@ -391,7 +391,7 @@ div#rub_service {
 			padding-left: 0;
 		}
 	}
-	div.widget div.title label {
+	div.widget .title label {
 		color: $primary-color;
 		font-weight: 600;
 	}
diff --git a/static/includes/_forms.scss b/static/includes/_forms.scss
index ccc4b493..be563cbf 100644
--- a/static/includes/_forms.scss
+++ b/static/includes/_forms.scss
@@ -158,10 +158,16 @@ span.required {
 	top: -0.1em;
 }
 
-div.widget div.title {
+div.widget .title {
 	margin-bottom: 0;
 }
 
+.fieldset-widget {
+	border: none;
+	padding: 0;
+	margin: 0;
+}
+
 div.buttons {
 	margin-top: 2em;
 }
@@ -521,7 +527,7 @@ div.select2-search {
 	div.django-checkbox-input,
 	div.CheckboxWidget {
 		position: relative;
-		div.title {
+		.title {
 			margin-left: 1.5rem;
 		}
 		div.content {
diff --git a/static/izi-ici/_custom.scss b/static/izi-ici/_custom.scss
index 2a3e53d6..ed473626 100644
--- a/static/izi-ici/_custom.scss
+++ b/static/izi-ici/_custom.scss
@@ -132,7 +132,7 @@ main {
 	padding-top: 2em;
 }
 
-div.title label {
+.title label {
 	font-weight: bold;
 	font-size: 15px;
 	color: $gray-1;
diff --git a/static/la-rochelle/_custom.scss b/static/la-rochelle/_custom.scss
index 033f0873..f1a131fc 100644
--- a/static/la-rochelle/_custom.scss
+++ b/static/la-rochelle/_custom.scss
@@ -83,7 +83,7 @@ div#rub_service h2 {
 }
 
 form.quixote {
-	div.title label {
+	.title label {
 		font-weight: bold;
 		span.required {
 			color: #c33;
diff --git a/static/ma-cnil/_custom.scss b/static/ma-cnil/_custom.scss
index 4d72b64d..5701b63a 100644
--- a/static/ma-cnil/_custom.scss
+++ b/static/ma-cnil/_custom.scss
@@ -200,7 +200,7 @@ div.form-validation {
 	div.page {
 		background: $lightgray;
 	}
-	div.title label {
+	.title label {
 		font-weight: bold;
 	}
 	input[readonly], select[readonly], textarea[readonly] {
diff --git a/static/minint/sass/_form.scss b/static/minint/sass/_form.scss
index 123e6cd0..73625804 100644
--- a/static/minint/sass/_form.scss
+++ b/static/minint/sass/_form.scss
@@ -274,7 +274,7 @@ div[id^="rub"] {
 .help { padding: .5em; margin: .5em 0; background-color: $gray-light; font-size: $font-size-small-px; border-radius: 5px;  }
 .info { font-size: $font-size-small-px; }
 div.widget { margin-bottom: 0; }
-div.widget div.title { color: $texte; font-weight: normal; }
+div.widget .title { color: $texte; font-weight: normal; }
 
 div.CheckboxesWidget .content,
 div.RadiobuttonsWidget .content {
diff --git a/static/pre-saint-gervais/_custom.scss b/static/pre-saint-gervais/_custom.scss
index ac35fc84..e3fbb06c 100644
--- a/static/pre-saint-gervais/_custom.scss
+++ b/static/pre-saint-gervais/_custom.scss
@@ -585,7 +585,7 @@ div#tracking-code {
 }
 
 form p label,
-div.widget div.title label {
+div.widget .title label {
 	text-align: left;
 	text-transform: uppercase;
 	font-size: 80%;
diff --git a/static/quimper/_custom.scss b/static/quimper/_custom.scss
index 6f6c9965..d50f4ca3 100644
--- a/static/quimper/_custom.scss
+++ b/static/quimper/_custom.scss
@@ -370,7 +370,7 @@ div.gru-content div.cell.trackingcodeinputcell {
 }
 
 div.hint,
-div.title label {
+.title label {
 	margin-left: 0.7rem;
 }
 
@@ -399,7 +399,7 @@ div.title label {
 	}
 }
 
-div.widget div.title label,
+div.widget .title label,
 form p label {
 	font-weight: bold;
 	color: $mauve;
diff --git a/static/rouen/_custom.scss b/static/rouen/_custom.scss
index 7bfa4998..b5b354da 100644
--- a/static/rouen/_custom.scss
+++ b/static/rouen/_custom.scss
@@ -307,7 +307,7 @@ input[type=tel], input[type=time], input[type=url], input[type=week], textarea {
 	-webkit-appearance: none;
 }
 
-form.quixote div.title label, body.authentic label {
+form.quixote .title label, body.authentic label {
 	display: block;
 	font-weight: bold;
 	font-size: 122%;
diff --git a/static/saone-et-loire-cd71-2019/_custom.scss b/static/saone-et-loire-cd71-2019/_custom.scss
index 88209a1b..78cfc517 100644
--- a/static/saone-et-loire-cd71-2019/_custom.scss
+++ b/static/saone-et-loire-cd71-2019/_custom.scss
@@ -294,7 +294,7 @@ div#rub_service div.dataview, div#rub_service dl#evolutions, div#rub_service for
 }
 
 div.dataview span.label,
-div.widget div.title label,
+div.widget .title label,
 form p label {
 	font-weight: bold;
 	color: $darkblue;
diff --git a/static/sens/_custom.scss b/static/sens/_custom.scss
index 590addf1..7e1ed124 100644
--- a/static/sens/_custom.scss
+++ b/static/sens/_custom.scss
@@ -75,7 +75,7 @@ div#nav {
 	}
 }
 
-div.title {
+.title {
 	font-weight: 600;
 }
 
diff --git a/static/signal-publik/_custom.scss b/static/signal-publik/_custom.scss
index b27d56e3..fccdc631 100644
--- a/static/signal-publik/_custom.scss
+++ b/static/signal-publik/_custom.scss
@@ -435,7 +435,7 @@ div.hint {
 	}
 }
 
-div.widget div.title label,
+div.widget .title label,
 form p label {
 	font-weight: bold;
 	color: $darkgray;
diff --git a/static/strasbourg-2018/_custom.scss b/static/strasbourg-2018/_custom.scss
index 222e16be..ce12cb34 100644
--- a/static/strasbourg-2018/_custom.scss
+++ b/static/strasbourg-2018/_custom.scss
@@ -1,3 +1,9 @@
+.fieldset-widget {
+	border: none;
+	padding: 0;
+	margin: 0;
+}
+
 #content div.textcell {
 	@extend %organism-rte;
 }
diff --git a/static/thonon-agglomeration-online/_custom.scss b/static/thonon-agglomeration-online/_custom.scss
index 2f558f52..79292bb3 100644
--- a/static/thonon-agglomeration-online/_custom.scss
+++ b/static/thonon-agglomeration-online/_custom.scss
@@ -685,7 +685,7 @@ div.buttons .previous-button button {
 //	WCS
 //
 
-div.widget div.title {
+div.widget .title {
 	margin-bottom: .25em;
 }
 
diff --git a/static/thonon-agglomeration/_custom.scss b/static/thonon-agglomeration/_custom.scss
index e62b8a96..66a3042e 100644
--- a/static/thonon-agglomeration/_custom.scss
+++ b/static/thonon-agglomeration/_custom.scss
@@ -63,7 +63,7 @@ form.quixote {
 		border-radius: 15px;
 	}
 
-	div.title label {
+	.title label {
 		font-weight: bold;
 	}
 
diff --git a/static/toulouse-metropole/_custom.scss b/static/toulouse-metropole/_custom.scss
index 328991eb..ed897a38 100644
--- a/static/toulouse-metropole/_custom.scss
+++ b/static/toulouse-metropole/_custom.scss
@@ -1143,7 +1143,7 @@ div#rub_service {
 		div.page h3 {
 			border: none;
 		}
-		div.widget div.title {
+		div.widget .title {
 			font-size: 1.231rem;
 		}
 		> div.buttons {
@@ -1747,7 +1747,7 @@ div.list-of-forms span.form-number {
 }
 
 form p label,
-form.quixote div.title label {
+form.quixote .title label {
 	font-weight: bold;
 }
 
@@ -1831,7 +1831,7 @@ $list-illus:
 	encombrants-refrigerateur-americain;
 
 @each $list-illu in $list-illus {
-	div#rub_service form div.widget.#{$list-illu} div.title {
+	div#rub_service form div.widget.#{$list-illu} .title {
 		background: url(/assets/picto:#{$list-illu}) 0px 20px no-repeat;
 		height: 150px;
 	}
diff --git a/static/toulouse/_custom.scss b/static/toulouse/_custom.scss
index bdd2bd09..e3b74eb6 100644
--- a/static/toulouse/_custom.scss
+++ b/static/toulouse/_custom.scss
@@ -1125,7 +1125,7 @@ div#rub_service {
 		div.page h3 {
 			border: none;
 		}
-		div.widget div.title {
+		div.widget .title {
 			font-size: 1.231rem;
 		}
 		> div.buttons {
@@ -1783,7 +1783,7 @@ div.list-of-forms span.form-number {
 }
 
 form p label,
-form.quixote div.title label {
+form.quixote .title label {
 	font-weight: bold;
 }
 
diff --git a/static/villejuif/_custom.scss b/static/villejuif/_custom.scss
index 27642103..231146f0 100644
--- a/static/villejuif/_custom.scss
+++ b/static/villejuif/_custom.scss
@@ -97,7 +97,7 @@ div.widget {
 	margin-bottom: 15px;
 }
 
-div.widget div.title{
+div.widget .title{
 	margin-bottom: 5px;
 	font-weight: bold;
 }
@@ -153,7 +153,7 @@ div.error + textarea, div.error + input,div.error + ul input {
 	border: 1px solid red;
 }
 
-div.widget div.title {
+div.widget .title {
 	padding-left: 2px;
 	border-left: 2px solid $primary-color;
 	padding: 5px 0 5px 15px;
@@ -163,10 +163,10 @@ div.widget div.title {
 div.widget.CheckboxWidget {
 	border-left: 2px solid $primary-color;
 	padding-left: 5px;
-	div.title, div.content {
+	.title, div.content {
 		border: 0;
 	}
-	div.title {
+	.title {
 		padding: 0 0 0 5px;
 	}
 }
@@ -187,7 +187,7 @@ div.RadiobuttonsWidget div.content {
 
 
 div.widget div.content div.widget div.content,
-div.widget div.content div.widget div.title,
+div.widget div.content div.widget .title,
 div.blocChamp div.content div.widget div.content div.widget div.content {
 	border: none;
 }
-- 
2.35.1

