fix(a11y): Correction du focus, description image et email

- Accordéon - Bouton radio - Interrupteur - Bouton - Lien
betagouv · Dec 18, 2024 · 5b99e15 · 5b99e15
1 parent b2d5cb9
commit 5b99e15
Show file tree

Hide file tree

Showing 29 changed files with 316 additions and 244 deletions.
diff --git a/app/lib/core/assets/images.dart b/app/lib/core/assets/images.dart
@@ -2,5 +2,7 @@ abstract final class AssetsImages {
   const AssetsImages._();
 
   static const franceNationVerte = 'assets/logos/logo_fnv.png';
+  static const franceNationVerteSemantic = 'Logo de France Nation Verte';
+
   static const nosGestesClimat = 'assets/logos/nos_gestes_climat.png';
 }
diff --git a/app/lib/core/assets/svgs.dart b/app/lib/core/assets/svgs.dart
@@ -2,7 +2,11 @@ abstract final class AssetsSvgs {
   const AssetsSvgs._();
 
   static const republiqueFrancaise = 'assets/logos/logo_rf.svg';
+  static const republiqueFrancaiseSemantic =
+      'Logo officiel de la République Française';
   static const ademe = 'assets/logos/logo_ademe.svg';
+  static const ademeSemantic =
+      'Logo de l’ADEME: Agence de la transition écologique';
   static const mesAidesVeloLogo = 'assets/logos/mesaidesvelo_logo.svg';
   static const mesAidesVeloTexte = 'assets/logos/mesaidesvelo_texte.svg';
   static const bibliothequeEmpty = 'assets/svgs/bibliotheque_illustration.svg';

diff --git a/app/lib/features/authentification/creer_compte/presentation/pages/creer_compte_view.dart b/app/lib/features/authentification/creer_compte/presentation/pages/creer_compte_view.dart
@@ -44,6 +44,7 @@ class CreerCompteView extends StatelessWidget {
               const SizedBox(height: DsfrSpacings.s3w),
               DsfrInput(
                 label: Localisation.adresseEmail,
+                hintText: Localisation.adresseEmailHint,
                 onChanged: (final value) => context
                     .read<CreerCompteBloc>()
                     .add(CreerCompteAdresseMailAChangee(value)),

diff --git a/app/lib/features/authentification/creer_compte/presentation/widgets/jaccepte.dart b/app/lib/features/authentification/creer_compte/presentation/widgets/jaccepte.dart
@@ -45,42 +45,41 @@ class _JaccepteState extends State<Jaccepte> {
     return GestureDetector(
       onTap: () => widget.onChanged(!widget.value),
       behavior: HitTestBehavior.opaque,
-      child: Row(
-        children: [
-          Semantics(
-            checked: widget.value,
-            label: '$jaccepte${widget.label}',
-            onTap: () => widget.onChanged(!widget.value),
-            child: DsfrCheckboxIcon(value: widget.value),
-          ),
-          const SizedBox(width: DsfrSpacings.s1w),
-          Expanded(
-            child: Text.rich(
-              TextSpan(
-                text: jaccepte,
-                children: [
-                  TextSpan(
-                    text: '${widget.label} ',
-                    style: style.copyWith(
-                      decoration: TextDecoration.underline,
-                    ),
-                    recognizer: _recognizer,
-                    children: const [
-                      WidgetSpan(
-                        alignment: PlaceholderAlignment.middle,
-                        child: Icon(
-                          DsfrIcons.systemExternalLinkFill,
-                          size: 16,
-                        ),
+      child: Semantics(
+        checked: widget.value,
+        label: '$jaccepte${widget.label}',
+        child: Row(
+          children: [
+            DsfrCheckboxIcon(value: widget.value),
+            const SizedBox(width: DsfrSpacings.s1w),
+            Expanded(
+              child: Text.rich(
+                TextSpan(
+                  text: jaccepte,
+                  children: [
+                    TextSpan(
+                      text: '${widget.label} ',
+                      style: style.copyWith(
+                        decoration: TextDecoration.underline,
                       ),
-                    ],
-                  ),
-                ],
+                      recognizer: _recognizer,
+                      children: const [
+                        WidgetSpan(
+                          alignment: PlaceholderAlignment.middle,
+                          child: Icon(
+                            DsfrIcons.systemExternalLinkFill,
+                            size: 16,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ],
+                ),
+                style: style,
               ),
-              style: style,
             ),
-          ),
-        ],
+          ],
+        ),
       ),
     );
   }

diff --git a/app/lib/features/authentification/mot_de_passe_oublie/pages/mot_de_passe_oublie_view.dart b/app/lib/features/authentification/mot_de_passe_oublie/pages/mot_de_passe_oublie_view.dart
@@ -34,6 +34,7 @@ class MotDePasseOublieView extends StatelessWidget {
             const SizedBox(height: DsfrSpacings.s3w),
             DsfrInput(
               label: Localisation.adresseEmail,
+              hintText: Localisation.adresseEmailHint,
               onChanged: (final value) =>
                   context.read<MotDePasseOublieBloc>().add(
                         MotDePasseOublieEmailChange(value),

diff --git a/app/lib/features/authentification/se_connecter/presentation/pages/se_connecter_view.dart b/app/lib/features/authentification/se_connecter/presentation/pages/se_connecter_view.dart
@@ -44,6 +44,7 @@ class SeConnecterView extends StatelessWidget {
               const SizedBox(height: DsfrSpacings.s3w),
               DsfrInput(
                 label: Localisation.adresseEmail,
+                hintText: Localisation.adresseEmailHint,
                 onChanged: (final value) => context
                     .read<SeConnecterBloc>()
                     .add(SeConnecterAdresseMailAChange(value)),

diff --git a/app/lib/features/bibliotheque/presentation/pages/bibliotheque_view.dart b/app/lib/features/bibliotheque/presentation/pages/bibliotheque_view.dart
@@ -61,7 +61,7 @@ class _Favorites extends StatelessWidget {
   const _Favorites();
 
   @override
-  Widget build(final context) => DsfrToggle(
+  Widget build(final context) => DsfrToggleSwitch(
         label: Localisation.mesFavoris,
         value: context.select<BibliothequeBloc, bool>(
           (final value) => value.state.isFavorites,

diff --git a/app/lib/features/pre_onboarding/presentation/pages/pre_onboarding_page.dart b/app/lib/features/pre_onboarding/presentation/pages/pre_onboarding_page.dart
@@ -45,11 +45,21 @@ class PreOnboardingPage extends StatelessWidget {
                         SvgPicture.asset(
                           AssetsSvgs.republiqueFrancaise,
                           height: 69,
+                          semanticsLabel:
+                              AssetsSvgs.republiqueFrancaiseSemantic,
                         ),
                         const SizedBox(width: DsfrSpacings.s3w),
-                        Image.asset(AssetsImages.franceNationVerte, height: 46),
+                        Image.asset(
+                          AssetsImages.franceNationVerte,
+                          semanticLabel: AssetsImages.franceNationVerteSemantic,
+                          height: 46,
+                        ),
                         const SizedBox(width: DsfrSpacings.s3w),
-                        SvgPicture.asset(AssetsSvgs.ademe, height: 55),
+                        SvgPicture.asset(
+                          AssetsSvgs.ademe,
+                          height: 55,
+                          semanticsLabel: AssetsSvgs.ademeSemantic,
+                        ),
                       ],
                     ),
                   ],

diff --git a/app/lib/features/profil/informations/presentation/widgets/mes_informations_annee.dart b/app/lib/features/profil/informations/presentation/widgets/mes_informations_annee.dart
@@ -17,7 +17,7 @@ class MesInformationsAnnee extends StatelessWidget {
 
     return DsfrInput(
       label: Localisation.anneeDeNaissance,
-      hint: Localisation.facultatif,
+      hintText: Localisation.facultatif,
       initialValue: anneeDeNaissance?.toString(),
       onChanged: (final value) {
         final parsedValue = int.tryParse(value);

diff --git a/app/lib/features/profil/informations/presentation/widgets/mes_informations_nom.dart b/app/lib/features/profil/informations/presentation/widgets/mes_informations_nom.dart
@@ -15,7 +15,7 @@ class MesInformationsNom extends StatelessWidget {
 
     return DsfrInput(
       label: Localisation.nom,
-      hint: Localisation.facultatif,
+      hintText: Localisation.facultatif,
       initialValue: nom,
       onChanged: (final value) => context
           .read<MesInformationsBloc>()

diff --git a/...s/profil/informations/presentation/widgets/mes_informations_nombre_de_parts_fiscales.dart b/...s/profil/informations/presentation/widgets/mes_informations_nombre_de_parts_fiscales.dart
@@ -18,7 +18,7 @@ class MesInformationsNombreDePartsFiscales extends StatelessWidget {
 
     return DsfrInput(
       label: Localisation.nombreDePartsFiscales,
-      hint: Localisation.nombreDePartsFiscalesDescription,
+      hintText: Localisation.nombreDePartsFiscalesDescription,
       initialValue: FnvNumberFormat.formatNumber(nombreDePartsFiscales),
       onChanged: (final value) {
         final parse = double.tryParse(value.replaceFirst(',', '.'));

diff --git a/app/lib/features/profil/informations/presentation/widgets/mes_informations_prenom.dart b/app/lib/features/profil/informations/presentation/widgets/mes_informations_prenom.dart
@@ -16,7 +16,7 @@ class MesInformationsPrenom extends StatelessWidget {
 
     return DsfrInput(
       label: Localisation.prenom,
-      hint: Localisation.obligatoire,
+      hintText: Localisation.obligatoire,
       initialValue: prenom,
       onChanged: (final value) => context
           .read<MesInformationsBloc>()

diff --git a/app/lib/features/simulateur_velo/presentation/pages/aide_simulateur_velo_page.dart b/app/lib/features/simulateur_velo/presentation/pages/aide_simulateur_velo_page.dart
@@ -340,7 +340,7 @@ class _NombreDePartsFiscales extends StatelessWidget {
 
     return DsfrInput(
       label: Localisation.nombreDePartsFiscales,
-      hint: Localisation.nombreDePartsFiscalesDescription,
+      hintText: Localisation.nombreDePartsFiscalesDescription,
       initialValue: FnvNumberFormat.formatNumber(nombreDePartsFiscales),
       onChanged: (final value) {
         final parse = double.tryParse(value.replaceFirst(',', '.'));

diff --git a/app/lib/l10n/l10n.dart b/app/lib/l10n/l10n.dart
@@ -12,6 +12,7 @@ abstract final class Localisation {
   static const acheterUnVelo = 'Acheter un vélo';
   static const actionRealisee = 'Action réalisée';
   static const adresseEmail = 'Mon adresse email';
+  static const adresseEmailHint = 'Format attendu : nom@domaine.fr';
   static const adultes = 'Adulte(s)';
   static const aideVeloAvertissement =
       'Veuillez compléter ces informations afin de débuter l’estimation';

diff --git a/packages/agir_lints/lib/analysis_options.yaml b/packages/agir_lints/lib/analysis_options.yaml
@@ -109,6 +109,7 @@ dart_code_metrics:
     - prefer-addition-subtraction-assignments: false
     - prefer-boolean-prefixes: false
     - prefer-commenting-analyzer-ignores: false
+    - prefer-container: false
     - prefer-correct-identifier-length: false
     - prefer-correct-handler-name: false
     - prefer-correct-switch-length: false

diff --git a/packages/dsfr.dart/example/lib/toggles_page.dart b/packages/dsfr.dart/example/lib/toggles_page.dart
@@ -23,7 +23,7 @@ class _TogglesPageState extends State<TogglesPage> {
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            DsfrToggle(
+            DsfrToggleSwitch(
               label: 'Vos favoris',
               value: _toggle,
               onChanged: (final value) {
@@ -33,7 +33,7 @@ class _TogglesPageState extends State<TogglesPage> {
               },
             ),
             const SizedBox(height: 16),
-            DsfrToggle(
+            DsfrToggleSwitch(
               label: 'Vos favoris',
               value: !_toggle,
               onChanged: (final value) {

diff --git a/packages/dsfr.dart/lib/dsfr.dart b/packages/dsfr.dart/lib/dsfr.dart
@@ -9,8 +9,8 @@ export 'src/composants/divider.dart';
 export 'src/composants/form_message.dart';
 export 'src/composants/input.dart';
 export 'src/composants/input_headless.dart';
+export 'src/composants/link.dart';
 export 'src/composants/link_icon_position.dart';
-export 'src/composants/links.dart';
 export 'src/composants/modal.dart';
 export 'src/composants/notice.dart';
 export 'src/composants/radios/radio.dart';
@@ -19,7 +19,7 @@ export 'src/composants/radios/radio_set.dart';
 export 'src/composants/radios/radio_set_headless.dart';
 export 'src/composants/select.dart';
 export 'src/composants/tags.dart';
-export 'src/composants/toggle.dart';
+export 'src/composants/toggle_switch.dart';
 export 'src/fondamentaux/colors.g.dart';
 export 'src/fondamentaux/fonts.dart';
 export 'src/fondamentaux/icons.g.dart';

diff --git a/packages/dsfr.dart/lib/src/atoms/focus_widget.dart b/packages/dsfr.dart/lib/src/atoms/focus_widget.dart
@@ -0,0 +1,36 @@
+import 'package:dsfr/src/fondamentaux/colors.g.dart';
+import 'package:dsfr/src/fondamentaux/spacing.g.dart';
+import 'package:flutter/material.dart';
+
+class DsfrFocusWidget extends StatelessWidget {
+  const DsfrFocusWidget({
+    super.key,
+    required this.isFocused,
+    this.borderRadius,
+    required this.child,
+  });
+
+  final bool isFocused;
+  final BorderRadiusGeometry? borderRadius;
+  final Widget child;
+
+  @override
+  Widget build(final BuildContext context) => DecoratedBox(
+        decoration: BoxDecoration(
+          border: isFocused
+              ? const Border.fromBorderSide(
+                  BorderSide(
+                    color: DsfrColors.focus525,
+                    width: DsfrSpacings.s0v5,
+                    strokeAlign: BorderSide.strokeAlignOutside,
+                  ),
+                )
+              : null,
+          borderRadius: borderRadius,
+        ),
+        child: Padding(
+          padding: const EdgeInsets.all(DsfrSpacings.s0v5),
+          child: child,
+        ),
+      );
+}
diff --git a/packages/dsfr.dart/lib/src/composants/accordions.dart b/packages/dsfr.dart/lib/src/composants/accordions.dart
@@ -1,3 +1,4 @@
+import 'package:dsfr/src/atoms/focus_widget.dart';
 import 'package:dsfr/src/composants/divider.dart';
 import 'package:dsfr/src/fondamentaux/colors.g.dart';
 import 'package:dsfr/src/fondamentaux/icons.g.dart';
@@ -62,7 +63,7 @@ class _DsfrAccordionsGroupState extends State<DsfrAccordionsGroup> {
   }
 }
 
-class _DsfrAccordion extends StatelessWidget {
+class _DsfrAccordion extends StatefulWidget {
   const _DsfrAccordion({
     required this.index,
     required this.item,
@@ -75,37 +76,54 @@ class _DsfrAccordion extends StatelessWidget {
   final bool isExpanded;
   final DsfrAccordionCallback onAccordionCallback;
 
-  void _handleTap() => onAccordionCallback(index, !isExpanded);
+  @override
+  State<_DsfrAccordion> createState() => _DsfrAccordionState();
+}
+
+class _DsfrAccordionState extends State<_DsfrAccordion>
+    with MaterialStateMixin<_DsfrAccordion> {
+  void _handleTap() =>
+      widget.onAccordionCallback(widget.index, !widget.isExpanded);
 
   @override
   Widget build(final context) => Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
-          ColoredBox(
-            color: isExpanded ? DsfrColors.blueFrance925 : Colors.transparent,
-            child: GestureDetector(
-              onTap: item.isEnable ? _handleTap : null,
-              behavior: HitTestBehavior.opaque,
-              child: ConstrainedBox(
-                constraints: const BoxConstraints(minHeight: 48),
-                child: Padding(
-                  padding:
-                      const EdgeInsets.symmetric(vertical: DsfrSpacings.s3v),
-                  child: Row(
-                    children: [
-                      Expanded(child: item.headerBuilder(isExpanded)),
-                      if (item.isEnable)
-                        AnimatedRotation(
-                          turns: isExpanded ? -0.5 : 0,
-                          duration: Durations.short4,
-                          child: const Icon(
-                            DsfrIcons.systemArrowDownSLine,
-                            size: DsfrSpacings.s2w,
-                            color: DsfrColors.blueFranceSun113,
-                          ),
+          InkWell(
+            onTap: widget.item.isEnable ? _handleTap : null,
+            onHighlightChanged: updateMaterialState(WidgetState.pressed),
+            onHover: updateMaterialState(WidgetState.hovered),
+            focusColor: Colors.transparent,
+            onFocusChange: updateMaterialState(WidgetState.focused),
+            child: DsfrFocusWidget(
+              isFocused: isFocused,
+              child: ColoredBox(
+                color: widget.isExpanded
+                    ? DsfrColors.blueFrance925
+                    : Colors.transparent,
+                child: ConstrainedBox(
+                  constraints: const BoxConstraints(minHeight: 48),
+                  child: Padding(
+                    padding:
+                        const EdgeInsets.symmetric(vertical: DsfrSpacings.s3v),
+                    child: Row(
+                      children: [
+                        Expanded(
+                          child: widget.item.headerBuilder(widget.isExpanded),
                         ),
-                      const SizedBox(width: DsfrSpacings.s2w),
-                    ],
+                        if (widget.item.isEnable)
+                          AnimatedRotation(
+                            turns: widget.isExpanded ? -0.5 : 0,
+                            duration: Durations.short4,
+                            child: const Icon(
+                              DsfrIcons.systemArrowDownSLine,
+                              size: DsfrSpacings.s2w,
+                              color: DsfrColors.blueFranceSun113,
+                            ),
+                          ),
+                        const SizedBox(width: DsfrSpacings.s2w),
+                      ],
+                    ),
                   ),
                 ),
               ),
@@ -118,9 +136,9 @@ class _DsfrAccordion extends StatelessWidget {
                 top: DsfrSpacings.s2w,
                 bottom: DsfrSpacings.s3w,
               ),
-              child: item.body,
+              child: widget.item.body,
             ),
-            crossFadeState: isExpanded
+            crossFadeState: widget.isExpanded
                 ? CrossFadeState.showSecond
                 : CrossFadeState.showFirst,
             duration: Durations.short4,