Working on updating a web-based project that that ran under IE to run under modern browsers like Chrome, Edge, and Firefox. The Dojo Toolkit (v1.x) is used.
One annoyance encountered is the failure for the first focusable widget to be highlighted when a dijit.Dialog is first raised. Take the following example test page:
<!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>When the dialog is first raised, the "Ok" button is not showing an outline to indicate it has focus, even though it does. If the Shift (or any other) key is pressed on the physical keyboard, then the outline shows.
I have tried to simulate a keypress using a variety of methods with the hope it would trigger the focus outline, but no success. I tried using Dijit focus() method on the buttons, but no outline shows, even though the keyboard focus does change to button focused.
In IE11, the focus outline does render as desired, but in the major modern browsers, Chrome, Edge (Chromium), and Firefox, the focus outline does render on initial dialog show. Is this a known problem with Dojo 1.x? Problem exists in v1.17.0 and at least to versions back to 1.10.
After some more experimenting, it appears if I explicitly set the CSS outline property, keying off of dijitButtonFocused class, I can get the initial focus button highlighted. CSS border can also be used, but it could alter the rendered layout since it affects the overall size of the object while outline does not.
The following is example CSS that tries to replicate focus highlighting for chrome-based browsers and 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 does not appear to use rounded corners in its highlighting, so no attempt is made to do so. Firefox does have a custom CSS property to support rounded corners for outlines if desired, but my intent is to recreate the native highlighting style of the browser.
Having the .nihilo selector is likely not needed, but I use it since the project customizes the .nihilo theme, so included for specificity purposes.