Dojo 对话框在首次显示时未突出显示第一个焦点元素

发布于 2025-01-09 19:50:51 字数 1962 浏览 1 评论 0原文

致力于更新在 IE 下运行的基于 Web 的项目，以在 Chrome、Edge 和 Firefox 等现代浏览器下运行。使用 Dojo Toolkit (v1.x)。

遇到的一个烦恼是当第一次引发 dijit.Dialog 时，第一个可聚焦的小部件无法突出显示。以下面的测试页面为例：

  <!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>

当对话框第一次出现时，“确定”按钮没有显示轮廓来表明它具有焦点，尽管它确实具有焦点。如果按下物理键盘上的 Shift（或任何其他）键，则会显示轮廓。

我尝试使用各种方法模拟按键，希望它能触发焦点轮廓，但没有成功。我尝试在按钮上使用 Dijit focus() 方法，但没有显示轮廓，即使键盘焦点确实更改为按钮焦点。

在 IE11 中，焦点轮廓确实会根据需要呈现，但在主要的现代浏览器 Chrome、Edge (Chromium) 和 Firefox 中，焦点轮廓确实会在初始对话框显示时呈现。这是 Dojo 1.x 的已知问题吗？ v1.17.0 以及至少 1.10 之前的版本中都存在问题。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

§普罗旺斯的薰衣草 2025-01-16 19:50:51

经过更多实验后，如果我显式设置 CSS Outline 属性，关闭 dijitButtonFocused 类，我就可以突出显示初始焦点按钮。也可以使用 CSS 边框，但它可能会改变渲染的布局，因为它会影响对象的整体大小，而轮廓则不会。

以下是尝试为基于 Chrome 的浏览器和 Firefox 复制焦点突出显示的 CSS 示例：

.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 似乎没有在突出显示中使用圆角，因此也没有尝试这样做。 Firefox 确实有一个自定义 CSS 属性，可以根据需要支持轮廓的圆角，但我的目的是重新创建浏览器的本机突出显示样式。

可能不需要 .nihilo 选择器，但我使用它是因为该项目自定义了 .nihilo 主题，因此包含它是出于特殊目的。

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.

回复收藏 0 原文

~没有更多了~