[A11y] Modal: stili a zoom elevati e accessibilità su iOS e Safari

[deodorhunter]

Esiste già una discussione sul tema che ti interessa, o su un tema simile?

• Ho verificato e non esiste

Versione della libreria

3.x, main

Cosa

1. Le varianti con scroll interno attivato (in particolare quella di esempio proprio) si rompe in modo strano nel suo comportamento responsive se ingrandita con formato "orizzontale" (400% a 1024px di viewport per es. o resa mobile orizzontale). Vedi immagine:

È da verificare il comportamento mobile/orizzontale ingrandito anche per tutte le altre varianti

2. Su Mac/Safari/Voiceover il contenuto non risulta isolato dal fondo navigando per elementi successivi/precedenti. Succede anche su BSI.
   Funziona invece correttamente su BSI il componente Navscroll immagino per quanto fatto specifico su quello con ad esempio "inert"

Perché

Garantire accessibilità su tutte le possibili combinazioni di Screen reader, browser e OS, anche a zoom elevati (400%)

Contesto

Per quanto riguarda il punto 1 della issue, i problemi rilevati da un primo test sono:

• una media query proveniente dagli stili di Modal in BSI.
  Commentare la variabile risolve il problema, quantomeno da un test rapido configurato come da screenshot

@media (min-width: 576px) {
   .modal {
      /* --bsi-modal-margin: 1.5rem; */
      --bsi-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
}

- il SASS BSI che genera questo selector, potrebbe dare problemi a zoom elevati/viewport "bassi" quel "208px" arbitrario.

.modal.it-dialog-scrollable .modal-dialog .modal-content {
    display: flex;
    flex-direction: column;
    height: calc(-208px + 100vh);
    border-radius: 0px;
}

Per quanto riguarda il punto 2. si suggerisce di usare "inert" come fatto per Navscroll

Altro

No response

[Fupete]

Promemoria: da risolvere sia su main che su 3.x.

CC @astagi @zetareticoli.