Valider cdb67ec5 rédigé par nicod's avatar nicod Validation de Maïeul
Parcourir les fichiers

Pb #88, accessibilité 

Cf. https://core.spip.net/issues/4540
Pour les saisies :
  - radio
  - checkboxes
  - case
  - oui_non
  - choix_grille
regrouper les choix possibles dans un `<fieldset>.

L'option `label` de la saisie devient une `<legend>`.
On ajoute systématiquement la classe `.label`, que ce soit un `<label>` ou une `<legend>`.

Différent ajustement css des styles du privé en lien avec cela.

On en profite pour aerer et commenter un peu le code
(Commit de squash fait par @maieul sur la base du travail de @nicod_)
parent bb026a17

css/saisies.css

+14 −7
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -53,16 +53,23 @@ fieldset { 
	overflow-x: auto;

}



.formulaire_spip .editer .choix-groupe label,

.formulaire_spip .editer .choix-groupe .label {

	float: none;

.formulaire_spip .choix-groupe {

	border: none;

	margin-top: 0;

	margin-bottom: 0;

	margin-left: 0;

	margin-bottom: 0.25em;

	width: auto;

	padding: 0;

}



.formulaire_spip .editer .choix-groupe + .choix-groupe {

	margin-top: 1em;

.formulaire_spip .choix-groupe label,

.formulaire_spip .choix-groupe .label {

	float: none;

	background-color: transparent;

	margin-left: 0;

	margin-bottom: 0.5em;

	padding-left: 0;

	padding-bottom: 0;

	width: auto;

}



/* Base minimale des onglets des saisies fieldsets  */

saisies/_base.html

+38 −5
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -29,32 +29,65 @@ 
		obligatoire=oui})]



]



[(#REM)<!-- on ne génère une saisie que si elle a un nom -->]

[(#ENV{nom}|oui)





	[(#REM)<!-- caractère obligatoire, désactivé ou readonly de la saisie-->]

	#SET{obligatoire,#ENV{obligatoire}|et{#ENV{obligatoire}|!={non}}|?{obligatoire,''}}

	#SET{disable,#ENV{disable,#ENV{disable_avec_post}}|et{#ENV{disable,#ENV{disable_avec_post}}|!={non}}|?{#ENV{disable}|is_array|?{#ENV{disable,#ARRAY},disabled},''}}

	#SET{readonly,#ENV{readonly}|et{#ENV{readonly}|!={non}}|?{readonly,''}}

	#SET{saisies_autonomes,#VAL|saisies_autonomes}







	[(#REM)<!-- Si la saisie est autonome, ne pas l'encapusler-->]

	#SET{saisies_autonomes,#VAL|saisies_autonomes}

	[(#ENV{type_saisie}|in_array{#GET{saisies_autonomes}}|oui)

		[(#INCLURE{fond=saisies/#ENV{type_saisie},env,nom=[(#ENV{nom}|saisie_nom2name)],obligatoire=#GET{obligatoire},disable=#GET{disable},readonly=#GET{readonly}})]

	]





	[(#ENV{type_saisie}|in_array{#GET{saisies_autonomes}}|non)





		[(#REM)<!-- définir l'encapsulation de la saisie et du label (problèmatique d'accessibilité)-->]

		#SET{conteneur_tag, #ENV{saisies_base_conteneur,#DIV|sinon{li}}}

		#SET{conteneur_label, label}

		[(#ENV{type_saisie}|in_array{#LISTE{oui_non,radio,checkbox,case,choix_grille}}|oui)

			#SET{conteneur_tag,fieldset}

			#SET{conteneur_label, legend}

		]



		[(#REM)<!-- affichage des erreur -->]

    [(#SET{nom_slash, #ENV{nom}|replace{\[\\[\\]\]+?, '/'}|rtrim{/}|saisie_nom2name})]

		#SET{erreurs,#ENV**{erreurs}|saisies_cles_nom2name|table_valeur{#GET{nom_slash}}}

		#SET{erreurs,#GET{erreurs,#ENV**{erreurs/#ENV{nom}}}}



		[(#REM)<!-- gestion des describedby -->]

		#SET{describedby, ''}

		[(#ENV*{explication}|oui) #SET{describedby, #GET{describedby}|concat{' ',explication_#ENV{nom}|saisie_nom2classe} ]



		[(#REM)<!-- et maintenant début de la saisie -->]

		<!--!inserer_saisie_editer-->

		<div class="editer editer_[(#ENV{nom}|saisie_nom2classe)][ (#GET{obligatoire})][ (#GET{erreurs}|oui)erreur][ (#ENV{conteneur_class,#ENV{li_class}})][ (#ENV{type_saisie}|saisie_type2classe)]"[ data-id="(#ENV{id_saisie})"][ data-afficher_si="(#ENV*{afficher_si}|saisies_afficher_si_js{#ENV{_saisies}})"]>

		<[(#GET{conteneur_tag})] class="editer editer_[(#ENV{nom}|saisie_nom2classe)][ (#GET{obligatoire})][ (#GET{erreurs}|oui)erreur][ (#ENV{conteneur_class,#ENV{li_class}})][ (#ENV{type_saisie}|saisie_type2classe)]"[ data-id="(#ENV{id_saisie})"][ data-afficher_si="(#ENV*{afficher_si}|saisies_afficher_si_js{#ENV{_saisies}})"]>

			#ENV**{inserer_debut}

			[<label[(#ENV{type_saisie}|match{oui_non|radio|checkbox|case|fichiers}|non) for="champ_[(#ENV{id,#ENV{nom}}|saisie_nom2classe)]"][(#ENV{type_saisie}|=={fichiers}|et{#ENV{nb_fichiers,1}|=={1}}) for="[(#ENV{id,#ENV{nom}}|saisie_nom2classe)]_0"][ class="(#ENV{label_class})"]>(#ENV*{label})[<span class='obligatoire'>(#GET{obligatoire}|oui)[(#ENV*{info_obligatoire}|is_null|?{<:info_obligatoire_02:>,#ENV*{info_obligatoire}})]</span>]</label>]





			[(#REM)<!-- tout ce qui se trouve avant les champ de form au sens html -->]

			[<[(#GET{conteneur_label})]  class="label[ (#ENV{label_class})]"[(#ENV{type_saisie}|match{oui_non|radio|checkbox|case|fichiers}|non) for="champ_[(#ENV{id,#ENV{nom}}|saisie_nom2classe)]"][(#ENV{type_saisie}|=={fichiers}|et{#ENV{nb_fichiers,1}|=={1}}) for="[(#ENV{id,#ENV{nom}}|saisie_nom2classe)]_0"]>(#ENV*{label})[<span class='obligatoire'>(#GET{obligatoire}|oui)[(#ENV*{info_obligatoire}|is_null|?{<:info_obligatoire_02:>,#ENV*{info_obligatoire}})]</span>]</[(#GET{conteneur_label})]>]



			[<span class='erreur_message' id="[erreur_(#ENV{nom}|saisie_nom2classe)]">(#GET{erreurs})</span> #SET{describedby, #GET{describedby}|concat{' ',erreur_#ENV{nom}|saisie_nom2name} ]

			[<p class="explication" id="[explication_(#ENV{nom}|saisie_nom2classe)]">(#ENV*{explication})</p>]

			[<em class='attention'>(#ENV*{attention})</em>]



			[(#REM)<!-- appeler la saisie proprement dite -->]

			[(#INCLURE{fond=saisies/#ENV{type_saisie},env,nom=[(#ENV{nom}|saisie_nom2name)], disable=#GET{disable},readonly=#GET{readonly},describedby=#GET{describedby}|trim})]



			[(#REM)<!-- gerer le disable avec post -->]

			[(#ENV{disable_avec_post}|et{#ENV{disable_avec_post}|!={non}}|et{#ENV{type_saisie}|in_array{#LISTE{case,checkbox}}|non}|oui)<input type='hidden' name='[(#ENV{nom}|saisie_nom2name)]' value="#ENV{valeur,#ENV{defaut}}" />]



			[(#REM)<!-- finir la saisie -->]

			#ENV**{inserer_fin}

		</div>

		</[(#GET{conteneur_tag})]>

	]

]

saisies/checkbox.html

+18 −19
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -54,12 +54,11 @@ 
	[(#REM) Soit il y a des sous-groupes ]

	<BOUCLE_groupes(CONDITION) {si #VALEUR|is_array}>

	<div class="choix-groupe">

	<div class="label">#CLE</div>

		<p class="label">#CLE</p>

		#SET{data,#VALEUR}

		<BOUCLE_recursive(BOUCLE_checkbox) />

	</div>

	</BOUCLE_groupes>



	[(#REM) Soit c'est un tableau simple ]

	<div class="#ENV{choix,choix}[ (#ENV{choix,choix})_#CLE][ (#ENV{class})]">[(#SET{id,champ_[(#ENV{id,#ENV{nom}}|saisie_nom2classe)]_[(#COMPTEUR_BOUCLE|concat{'-',#CLE}|md5)]})]

		<input type="checkbox" name="#ENV{nom}[]" class="checkbox checkbox_[(#ENV{nom}|saisie_nom2classe)]" id="#GET{id}"[ (#CLE|in_array{#ENV{valeur_forcee,#GET{valeur,#GET{defaut}}}}|oui)checked="checked"] value="#CLE"[(#CLE|in_array{#GET{disabled}}|oui) disabled="disabled"][ aria-describedby="(#ENV{describedby})"][ (#ENV*{attributs})] />

saisies/radio.html

+3 −3
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -30,7 +30,7 @@ 
	[(#REM) Soit il y a des sous-groupes ]

	<BOUCLE_groupes(CONDITION) {si #VALEUR|is_array}>

	<div class="choix-groupe">

		<div class="label">#CLE</div>

		<p class="label">#CLE</p>

		#SET{data,#VALEUR}

		<BOUCLE_inclusion(BOUCLE_radio) />

	</div>

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site