Accessible modals (#560)

Improve the accessibility of our modals (the color picker and the export dialog)

Implement a focus trap so that tapping through the controls inside them don't escape to outer elements, it also allows to close the modals with the "Escape" key.
This commit is contained in:
Guillermo Peralta Scura
2020-01-25 19:37:58 -03:00
committed by GitHub
parent ba13f88924
commit e4ff408f23
13 changed files with 207 additions and 58 deletions

View File

@ -92,7 +92,11 @@
viewBox="0 0 250 250"
style="position: absolute; top: 0; right: 0"
>
<a href="https://github.com/excalidraw/excalidraw" target="_blank">
<a
href="https://github.com/excalidraw/excalidraw"
target="_blank"
aria-label="GitHub repository"
>
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#6c6c6c" />
<path
class="octo-arm"

View File

@ -35,7 +35,10 @@
"extraBold": "Extra Bold",
"architect": "Architect",
"artist": "Artist",
"cartoonist": "Cartoonist"
"cartoonist": "Cartoonist",
"fileTitle": "File title",
"colorPicker": "Color picker",
"canvasBackground": "Canvas background"
},
"buttons": {
"clearReset": "Clear the canvas & reset background color",
@ -44,7 +47,8 @@
"copyToClipboard": "Copy to clipboard",
"save": "Save",
"load": "Load",
"getShareableLink": "Get shareable link"
"getShareableLink": "Get shareable link",
"close": "Close"
},
"alerts": {
"clearReset": "This will clear the whole canvas. Are you sure?",

View File

@ -35,7 +35,10 @@
"extraBold": "Extra Grueso",
"architect": "Arquitecto",
"artist": "Artista",
"cartoonist": "Caricatura"
"cartoonist": "Caricatura",
"fileTitle": "Título del archivo",
"colorPicker": "Selector de color",
"canvasBackground": "Fondo del lienzo"
},
"buttons": {
"clearReset": "Limpiar lienzo y reiniciar el color de fondo",
@ -44,7 +47,9 @@
"copyToClipboard": "Copiar al portapapeles",
"save": "Guardar",
"load": "Cargar",
"getShareableLink": "Obtener enlace para compartir"
"getShareableLink": "Obtener enlace para compartir",
"showExportDialog": "Mostrar diálogo para exportar",
"close": "Cerrar"
},
"alerts": {
"clearReset": "Esto limpiará todo el lienzo. Estás seguro?",