Componentes del diálogo: ¿Ir a HTML nativo o crear uno propio? | trucos CSS

Como el autor de la biblioteca llamó Interfaz de usuario agnósticaSiempre estoy buscando nuevos componentes. Y recientemente decidí profundizar y comenzar a trabajar en un nuevo componente de diálogo (también conocido como componente modal). Esto es algo que a muchos desarrolladores les gusta tener en su conjunto de herramientas y mi objetivo era hacerlo lo mejor posible, con un enfoque especial adicional en hacerlo inclusivo y accesible.

Mi primer pensamiento fue que evitaría cualquier adicción y me esforzaría por crear mi propio componente de diálogo. Como sabrás, hay uno nuevo. <dialog> un elemento que da vueltas y decidí que usarlo como punto de partida sería lo correcto, especialmente en los departamentos de inclusión y accesibilidad.

Pero después de investigar un poco, opté por usar la palanca en su lugar. a11y-diálogo desde Gatito GirodelIncluso escribí adaptadores para que se integre sin problemas con vue3, Maravillosoy AngularKitty ha ofrecido durante mucho tiempo una Reaccionar adaptador también.

¿Por qué me fui de esta manera? Déjame guiarte a través de mi proceso de pensamiento.

primera pregunta: Deber Incluso uso el nativo. <dialog> ¿elemento?

El nativo <dialog> el elemento está mejorando activamente y probablemente será el camino a seguir. Pero todavía hay algunos problemas en este momento. Kitty señaló Bastante bien:

1. Hacer clic en la superposición de fondo no cierra el cuadro de diálogo predeterminado
2. EN alertdialog Rol de ARIA utilizado para señales simplemente no funciona con el nativo <dialog> Se supone que debemos usar este rol cuando el cuadro de diálogo requiere una respuesta del usuario y no debe cerrarse haciendo clic en el fondo o presionando ESC.
3. EN <dialog> elemento viene con un ::backdrop pseudo - elemento, pero solo está disponible cuando el cuadro de diálogo se abre mediante programación con dialog.showModal().

Y como también señala Kitty, hay problemas comunes con los estilos predeterminados del elemento, como el hecho de que se dejan en el navegador y requerirán JavaScript. Así que no es 100% HTML de todos modos.

Aquí hay un bolígrafo que demuestra estos puntos:

Ahora, es posible que algunos de estos problemas no le afecten a usted ni a ningún proyecto en el que esté trabajando específicamente, e incluso puede solucionarlos. Si aún desea utilizar el diálogo natural, debería ver Adán Argylees una gran publicación en construir un componente de diálogo con diálogo natural.

Bien, analicemos cuáles son los requisitos para un componente de diálogo accesible...

Lo que estoy buscando

Sé que hay muchas ideas sobre lo que debe o no debe hacer un componente de diálogo. Pero en cuanto a lo que yo personalmente estaba buscando para AgnosticUI depende de lo que creo que hace para una experiencia de diálogo accesible:

1. El cuadro de diálogo debe cerrarse haciendo clic fuera del cuadro de diálogo (en el fondo) o haciendo clic en ESC llave.
2. Debe capturar el foco para evitar que el componente se desplace con el teclado.
3. Debe permitir la partición con TAB y tabula hacia atrás con SHIFT+TAB.
4. Debe devolver el foco al elemento previamente enfocado cuando está cerrado.
5. Debe ser aplicado correctamente aria-* atributos e interruptores.
6. Debe proporcionar portales (solo si lo usamos dentro de JavaScript).
7. ella tiene que apoyar alertdialog El papel de ARIA en situaciones de ansiedad.
8. Debería evitar que el cuerpo principal se vuelquesi necesario.
9. Sería genial si nuestra realización pudiera evitarse. errores comunes que vienen con el local <dialog> elemento.
10. Idealmente, proporcionaría una manera de aplicar un estilo personalizado mientras acepta prefers-reduced-motion solicitud de preferencias del usuario como medida adicional de accesibilidad.

No soy el único con una lista de deseos. Es posible que desee ver Artículo de Scott O'Hara sobre el tema así como el texto completo de Kitty crear un diálogo accesible desde cero para una cobertura más profunda.

Debe quedar claro ahora mismo por qué rechacé a mi nativo. <dialog> elemento de mi biblioteca de componentes. Por supuesto, creo en trabajar en ello, pero mis necesidades actuales simplemente superan los costos. Por eso utilicé el diálogo a11y de Kitty como punto de partida.

Revisión de cuentas <dialog> accesibilidad

Antes de confiar en cualquier implementación de cuadro de diálogo en particular, vale la pena asegurarse de que cumpla con los requisitos en lo que respecta a sus requisitos. Debido a que mis requisitos dependen tanto de la accesibilidad, esto significó auditar el diálogo a11y.

Las auditorías de accesibilidad son una profesión aparte. E incluso si ese no es mi enfoque principal diario, sé que hay algunas cosas que vale la pena hacer, como:

• verificación manual de la funcionalidad mencionada anteriormente, por supuesto en diferentes navegadores,
• Utilizar herramientas de accesibilidad como faro, Herramienta para comprobar la disponibilidad de IBM Equal Access, AX y Dequey ONDA para ayudar a encontrar ideas y problemas,
• pruebas con lectores de pantalla reales como MANDÍBULAS, NVDAy Narracióny
• probar el componente en gente real.

Este es un gran trabajo, como puedes imaginar (o saber por experiencia). Es tentador tomar el camino con menos resistencia y tratar de automatizar las cosas, pero, en un estudio realizado por Deque Systemslas herramientas automatizadas pueden capturar solo alrededor del 57% de los problemas de accesibilidad. No hay sustituto para el buen trabajo duro de siempre.

El entorno de auditoría

El componente de diálogo se puede probar en muchos lugares, incluidos Un libro de cuentos, CódigoPen, CódigoSandboxo lo que sea Para esta prueba en particular, sin embargo, prefiero hacer una página esqueleto y probar localmente. Así me evito tener que validar los validadores, por así decirlo. Tengo que usar, digamos, Storybook: un complemento específico para probar todo es bueno si ya usa Storybook en sus propios componentes, pero agrega otra capa de complejidad al probar la disponibilidad de un componente externo.

Una página de esqueleto puede confirmar el cuadro de diálogo de verificación manual, las herramientas de a11y existentes y los lectores de pantalla. Si sigue, querrá ejecutar esta página a través de un servidor local. Hay Muchas maneras para hacer esto; una es usar una herramienta llamada serviry npm incluso proporciona una buena línea única npx serve <DIRECTORY> comando para encender cosas.

¡Hagamos una auditoría de muestra juntos!

Obviamente estoy configurado para a11y-dialog aquí, así que probemos y probemos usando algunos de los enfoques recomendados que hemos visto.

Nuevamente, todo lo que estoy haciendo aquí es comenzar con HTML. Puede usar el mismo que soy (completo con estilos y scripts horneados directamente).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>A11y Dialog Test</title>
    <style>
      .dialog-container {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 2;
      }
      
      .dialog-container[aria-hidden='true'] {
        display: none;
      }
      
      .dialog-overlay {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgb(43 46 56 / 0.9);
        animation: fade-in 200ms both;
      }
      
      .dialog-content {
        background-color: rgb(255, 255, 255);
        margin: auto;
        z-index: 2;
        position: relative;
        animation: fade-in 400ms 200ms both, slide-up 400ms 200ms both;
        padding: 1em;
        max-width: 90%;
        width: 600px;
        border-radius: 2px;
      }
      
      @media screen and (min-width: 700px) {
        .dialog-content {
          padding: 2em;
        }
      }
      
      @keyframes fade-in {
        from {
          opacity: 0;
        }
      }
      
      @keyframes slide-up {
        from {
          transform: translateY(10%);
        }
      }

      /* Note, for brevity we haven't implemented prefers-reduced-motion */
      
      .dialog h1 {
        margin: 0;
        font-size: 1.25em;
      }
      
      .dialog-close {
        position: absolute;
        top: 0.5em;
        right: 0.5em;
        border: 0;
        padding: 0;
        background-color: transparent;
        font-weight: bold;
        font-size: 1.25em;
        width: 1.2em;
        height: 1.2em;
        text-align: center;
        cursor: pointer;
        transition: 0.15s;
      }
      
      @media screen and (min-width: 700px) {
        .dialog-close {
          top: 1em;
          right: 1em;
        }
      }
      
      * {
        box-sizing: border-box;
      }
      
      body {
        font: 125% / 1.5 -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
        padding: 2em 0;
      }
      
      h1 {
        font-size: 1.6em;
        line-height: 1.1;
        font-family: 'ESPI Slab', sans-serif;
        margin-bottom: 0;
      }
      
      main {
        max-width: 700px;
        margin: 0 auto;
        padding: 0 1em;
      }
    </style>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/a11y-dialog.min.js"></script>
  </head>

  <body>
    <main>
      <div class="dialog-container" id="my-dialog" aria-hidden="true" aria-labelledby="my-dialog-title" role="dialog">
        <div class="dialog-overlay" data-a11y-dialog-hide></div>
        <div class="dialog-content" role="document">
          <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">
            ×
          </button>
          <a href="https://www.yahoo.com/" target="_blank">Rando Yahoo Link</a>
  
          <h1 id="my-dialog-title">My Title</h1>
          <p id="my-dialog-description">
            Some description of what's inside this dialog…
          </p>
        </div>
      </div>
      <button type="button" data-a11y-dialog-show="my-dialog">
        Open the dialog
      </button>
    </main>
    <script>
      // We need to ensure our deferred A11yDialog has
      // had a chance to do its thing 😉
      window.addEventListener('DOMContentLoaded', (event) => {
        const dialogEl = document.getElementById('my-dialog')
        const dialog = new A11yDialog(dialogEl)
      });
    </script>
  </body>

</html>

Sé que ignoramos un montón de mejores prácticas (qué, estilos en <head>?!) y combina todo HTML, CSS y JavaScript en un solo archivo. No entraré en los detalles del código, ya que el enfoque aquí es la prueba de accesibilidad, pero tenga en cuenta que esta prueba requiere una conexión a Internet mientras importamos a11y-diálogo de CDN.

En primer lugar, las comprobaciones manuales

Revisé este buscapersonas localmente y estos son los resultados de mi verificación manual:

Entonces usemos algunas herramientas de a11y

solía faro para probar el componente tanto en una computadora de escritorio como en un dispositivo móvil, en dos escenarios diferentes, en los que el cuadro de diálogo está abierto por defecto y cerrado por defecto.

Descubrí que a veces las herramientas no detectan los elementos DOM que se muestran dinámicamente o los elementos DOM ocultos, por lo que esta prueba garantiza que obtenga una cobertura completa de ambos escenarios.

Probé y con Comprobador de accesibilidad de IBM Equal Accessibility. En general, esta herramienta le dará un error rojo por una infracción si hay algo gravemente mal. También le pedirá que revise manualmente elementos específicos. Como puede ver aquí, hay algunos elementos para una revisión manual, pero no hay infracciones rojas.

Pasamos a los lectores de pantalla

entre el manual mis comprobaciones y comprobaciones de herramientas, ya me siento relativamente seguro al respecto a11y-dialog es una opción para mi selección de diálogo. Sin embargo, debemos hacer nuestra debida diligencia y consultar un lector de pantalla.

Narración es el lector de pantalla más conveniente para mí ya que actualmente trabajo en una Mac, pero MANDÍBULAS y NVDA son grandes nombres que también deberías considerar. Al igual que verificar la consistencia de la interfaz de usuario en los navegadores, probablemente sea una buena idea probar en más de un lector de pantalla si puede.

Así es como hice la parte con el lector de pantalla del auditor con VoiceOver. Básicamente, dibujé qué acciones necesitaban probarse y confirmé cada una de ellas como un guión:

Probando con personas

Si crees que estamos a punto de pasar a probar con personas reales, lamentablemente no pude encontrar a nadie. Sin embargo, si hubiera hecho esto, habría seguido un conjunto similar de pasos mientras observaba, tomaba notas y hacía algunas preguntas sobre la experiencia general.

Como puede ver, una auditoría satisfactoria implica mucho tiempo y reflexión.

Está bien, pero quiero usar el componente de diálogo del marco

¡Esto es genial! Muchos marcos tienen su propia solución para el componente de diálogo, por lo que hay mucho para elegir. No tengo una increíble auditoría de hoja de cálculo de todos los marcos y bibliotecas en la naturaleza y le ahorraré la molestia de evaluarlos todos.

En cambio, aquí hay algunos recursos que pueden ser buenos puntos de partida y consideraciones para usar un componente de diálogo en algunos de los marcos más utilizados.

Descargo de responsabilidad: No los he probado personalmente. Eso es todo lo que descubrí mientras investigaba.

Opciones de diálogo angular

en 2020 Deque publicó un artículo que audita las bibliotecas de Angular y TL; componentes DR fue este Material (y es Angular / CDK biblioteca) y ngx-bootstrap ambos parecen proporcionar un acceso decente al diálogo.

Opciones de diálogo de respuesta

Reakit ofrece una componente de diálogos que afirman que cumple Directrices para el diálogo WAI-ARIAy chakra-ui parece estar prestando atención de su accesibilidad. Por supuesto, El material también está disponible para Reactasí que esto también vale la pena verlo. He oído cosas buenas sobre alcanzar / dialogar y adobe @reaccionar-aria/diálogo.

Opciones de diálogo de Vue

soy un fan de Vuetensilscual es austin gilluna biblioteca con componentes desnudos (también conocidos como sin cabeza), lo que simplemente sucede tener un componente de diálogoTambién hay Vuetificarque es popular Material rendimiento con un diálogo propioTambién me he cruzado en el camino PrimeVuepero me sorprendió eso su componente de diálogo no se pudo devolver el foco al elemento original.

Excelentes opciones de diálogo.

Es posible que desee echar un vistazo delgado sin cabeza.El material tiene un puerto esbelto esto también vale la pena verlo. me parece muy relevante SvelteKit los usuarios prefieren crear sus propios conjuntos de componentes, ya que el lenguaje de empaquetado SvelteKit lo hace extremadamente fácil de hacer. Si este es su caso, definitivamente le recomendaría que piense en elegante-a11y-diálogo como una herramienta conveniente para construir diálogos personalizados, cajones, bajeras, etc.

También notaré que el mío Interfaz de usuario agnóstica la biblioteca envuelve React, Vue, Svelte y Angular a11y-dialog conversiones de adaptadores de las que hablamos anteriormente.

Bootstrap, por supuesto

Bootstrap sigue siendo algo que muchas personas buscan y no es sorprendente, ofrece un componente de diálogo.Esto requiere que sigue algunos pasos para hacer el modal accesible.

Si tiene otros diálogos basados ​​en bibliotecas inclusivos y accesibles que merecen atención, ¡me encantaría saber sobre ellos en los comentarios!

Pero estoy creando un sistema de diseño personalizado.

Si está creando un sistema de diseño o considerando otro enrollarse diálogos enfoque, puede ver cuántas cosas deben probarse y tenerse en cuenta ... ¡todo para un componente! Por supuesto, es posible desarrollar uno propio, pero diría que también es extremadamente propenso a errores. Puede preguntarse si el esfuerzo vale la pena cuando ya hay opciones probadas en batalla para elegir.

solo te dejo con algo Scott O´Hara - co - editor de ARIA en HTML y Especificaciones HTML AAM además de ser súper útil con todas las cosas asequibles: Señala:

Puede hacer un esfuerzo para agregar estas extensiones o puede usar un complemento robusto como a11y-diálogo y asegúrese de que sus diálogos tengan una experiencia bastante consistente en todos los navegadores.

De vuelta a mi objetivo...

Necesito este cuadro de diálogo para admitir implementaciones de React, Vue, Svelte y Angular.

Mencioné anteriormente que a11y-dialog ya tiene puertos para vista y ReaccionarPero el puerto Vue aún no se ha actualizado para Vue 3. Bueno, estaba muy feliz de pasar el tiempo que pasaría creando algo que probablemente sería un componente de diálogo movido manualmente con errores para ayuda a actualizar el puerto VueTambién agregué un Magnífico puerto y uno para angular Ambos son muy nuevos y los consideraría software beta experimental en el momento de escribir este artículo. ¡Los comentarios son bienvenidos, por supuesto!

¡Puede soportar otros componentes!

Creo que vale la pena señalar que el diálogo usa el mismo concepto básico de ocultar y mostrar que se puede usar como un componente de cajón (también conocido como fuera de la pantalla). Por ejemplo, si tomamos prestado el CSS que usamos en nuestra auditoría de accesibilidad de diálogo y agregamos algunas clases adicionales, entonces a11y-dialog se puede transformar en un componente funcional y eficiente del cajón:

.drawer-start { right: initial; }
.drawer-end { left: initial; }
.drawer-top { bottom: initial; }
.drawer-bottom { top: initial; }

.drawer-content {
  margin: initial;
  max-width: initial;
  width: 25rem;
  border-radius: initial;
}

.drawer-top .drawer-content,
.drawer-bottom .drawer-content {
  width: 100%;
}

Estas clases se utilizan de forma aditiva, esencialmente extendiendo el componente principal del cuadro de diálogo. Esto es exactamente lo que comencé a hacer al agregar mi propio componente de cajón a AgnosticUI. ¡Ahorre tiempo y reutilice el código FTW!

resumiendo

Espero haberte dado una buena idea del proceso de pensamiento involucrado en la creación y mantenimiento de una biblioteca de componentes. ¿Podría terminar mi propio componente de diálogo para la biblioteca? ¡Absolutamente! Pero dudo que hubiera dado mejores resultados que lo que hace un recurso como el diálogo a11y de Kitty, y el esfuerzo ha sido abrumador. Hay algo grandioso en encontrar su propia solución, y puede haber buenas situaciones en las que desee hacerlo, pero probablemente no a costa de sacrificar algo como la asequibilidad.

De todos modos, así es como llegué a mi decisión. Aprendí mucho sobre HTML nativo <dialog> y su accesibilidad en el camino y espero que mi viaje les haya dado algunas de estas piezas.