[Modale] Éléments recevant le focus cachés par le footer

[AtJBC]

Décrire le bug

Dans les modales avec footer (boutons d'actions), lorsque le focus est déplacé au clavier sur un élément comme un champ de formulaire, celui-ci se retrouve parfois caché sous la zone footer.

Les étapes pour reproduire le bug

Ouvrir ce codepen d'exemple en ayant une fenêtre suffisamment réduite pour avoir un scroll.
https://codepen.io/AtJBC/pen/NPreBLv

Comportement attendu

Le footer ne devrait pas masquer le contenu, ou le contenu devrait scroller pour rendre visible l'élément recevant le focus.

Configuration et système utilisé

• Version du DSFR : 1.14.3
• Appareil (mobile, tablette, desktop) : Desktop
• **Système d’exploitation : Win11 **
• Navigateur et version : Firefox

Informations complémentaires

Le problème semble global avec les éléments sticky.
Cf :
https://stackoverflow.com/questions/72742581/scrolling-bug-when-focusing-element-inside-position-sticky-container/79669209#79669209
https://vispero.com/resources/prevent-focused-elements-from-being-obscured-by-sticky-headers/

[7studio]

Bonjour Jean-Baptiste,

J'avoue que ce comportement est un peu ennuyeux 😅

Pourrais-tu me dire si cette implémentation répond à ton besoin s'il te plait ? https://codepen.io/7studio/pen/myEvNbe

Si tu confirmes et que l'équipe DSFR valide l'utilisation de la propriété CSS scroll-padding-bottom, il ne sera pas très compliqué de pousser une PR

Exemple un fichier JS comme ça :

import api from '../../api.js';

class ModalFooter extends api.core.Instance {
  static get instanceClassName () {
    return 'ModalFooter';
  }

  resize () {
    const height = this.getRect().height;
    this.node.parentNode.setProperty('--modal-scroll-padding-bottom', `${height}px`);
  }
}

export { ModalFooter };

et un petit ajout SCSS comme ça :

@include body {
  --modal-scroll-padding-bottom: #{space(-4v)};
    
  scroll-padding-bottom: calc(var(--modal-scroll-padding-bottom) + #{space(4v)});
}

Tu sais où me trouver si besoin 😉

[keryanS]

Intéressant, merci pour l'idée Xavier.

Je me demande pourquoi ça scroll autant, dans ton exemple au tab sur un élément caché on scroll de l'équivalent de 2 inputs

[AtJBC]

@7studio Merci Xavier, en effet ça a l'air de fonctionner, même en responsive avec une zone de boutons plus haute.
Et oui @keryanS le comportement du scroll est un peu étrange, mais au moins on a le champ actif visible.
à voir si ça fonctionne avec tous les éléments pouvant recevoir le focus.

[7studio]

J'ai enregistré le passage de focus pour comprendre votre remarque 😅

Votre interrogation porte sur le fait que quand on donne le focus à "Libellé 3" il passe au centre au lieu de remonter juste un peu ?

Enregistrement.de.l.ecran.2026-02-13.141632.mp4

Ce comportement semble identique dans Fx et Chrome donc bon, ça ne me dérange pas.

En plus côté WCAG, il partage une solution technique similaire : https://www.w3.org/WAI/WCAG22/Techniques/css/C43

[AtJBC]

Oui pour moi c'était ça le "souci"
Mais en fait ce n'est probablement pas un problème

[keryanS]

Ok pour moi, j'ai repris en grande partie ton code @7studio

Ajout dans la 1.15 👍

Merci pour l'aide :)