Trabajando en la actualización de un proyecto basado en la web que se ejecutó en IE para que se ejecute en navegadores modernos como Chrome, Edge y Firefox. Se utiliza el kit de herramientas de Dojo (v1.x).
Una molestia encontrada es la falla para que el primer widget enfocable se resalte cuando se genera por primera vez un dijit.Dialog. Tome la siguiente página de prueba de ejemplo:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.13.0/dijit/themes/claro/claro.css"> <script>dojoConfig = {parseOnLoad: true}</script> <script src='https://ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js'></script> <script> require(["dojo/parser", "dijit/Dialog", "dijit/form/Button"]); </script> </head> <body class="claro"> <div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog" execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));"> <div class="dijitDialogPaneContentArea"> <p>This is a test.</p> </div> <div class="dijitDialogPaneActionBar"> <button data-dojo-type="dijit/form/Button" type="submit" onClick="return myFormDialog.isValid();">OK</button> <button data-dojo-type="dijit/form/Button" type="button" onClick="myFormDialog.hide()">Cancel</button> </div> </div> <button id="buttonThree" data-dojo-type="dijit/form/Button" type="button" onClick="myFormDialog.show();">Show me! </button> </body> </html>Cuando se abre el cuadro de diálogo por primera vez, el botón "Aceptar" no muestra un contorno para indicar que tiene el foco, aunque sí lo tiene. Si se presiona la tecla Shift (o cualquier otra) en el teclado físico, se muestra el contorno.
Intenté simular una pulsación de tecla usando una variedad de métodos con la esperanza de que activara el esquema de enfoque, pero no tuve éxito. Intenté usar el método Dijit focus () en los botones, pero no se muestra el contorno, aunque el enfoque del teclado cambia al botón enfocado.
En IE11, el contorno del foco se muestra como se desea, pero en los principales navegadores modernos, Chrome, Edge (Chromium) y Firefox, el contorno del foco se muestra en el cuadro de diálogo inicial. ¿Es este un problema conocido con Dojo 1.x? El problema existe en v1.17.0 y al menos en las versiones anteriores a la 1.10.
Después de experimentar un poco más, parece que si configuro explícitamente la propiedad de contorno CSS, desactivando la clase dijitButtonFocused, puedo resaltar el botón de enfoque inicial. También se puede usar el borde CSS, pero podría alterar el diseño representado, ya que afecta el tamaño general del objeto, mientras que el contorno no.
El siguiente es un ejemplo de CSS que intenta replicar el resaltado de enfoque para navegadores basados en Chrome y Firefox:
.dj_chrome .nihilo .dijitButtonFocused .dijitButtonNode .dijitButtonContents { outline: 2px solid black; /* Chrome appears to honor border-radius when generating outline, but do wonder if setting this can have unintended side-effects */ border-radius: 4px; } .dj_gecko .nihilo .dijitButtonFocused .dijitButtonNode .dijitButtonContents { outline: 1px dotted black; }Firefox no parece usar esquinas redondeadas en su resaltado, por lo que no se intenta hacerlo. Firefox tiene una propiedad CSS personalizada para admitir esquinas redondeadas para los contornos si lo desea, pero mi intención es recrear el estilo de resaltado nativo del navegador.
Es probable que no sea necesario tener el selector .nihilo, pero lo uso ya que el proyecto personaliza el tema .nihilo, por lo que se incluye con fines específicos.