你在这里

Drupal 8中JavaScript的辅助工具

原文链接:https://www.drupal.org/node/1973218

JavaScript的辅助工具

这些工具在Drupal 8里正积极发展着,本文档内容可能过时。

听觉上更新发布页面

许多页面的更新通过颜色变化和动画等视觉方式来体现。为了使页面的更新在非可视化方式上变得明显,Drupal 提供了一种Drupal.announce 的Javascript方法。这种方法在页面上创建了一种名为aria-live的元素。屏幕阅读用户代理会读取附加到该节点后的文本内容。

Drupal接收由音频UA读取的字符串,你还可以设置第二个参数:优先级。下面是几个例子:

Drupal.announce('Entering edit mode');
Drupal.announce('Please fill in your user name', 'assertive');
Drupal.announce('You look beautiful today.');

两个公认的优先级值是’polite’和’assertive’,’assertive’是默认值。

‘assertive’状态会中断当前的任何话语,而’polite’状态不会中断用户代理。当页面上的许多内容立刻改变的时候,它们可以不被读取。该公布功能会自行连接多个调用并一次性读取多个字符串,以确保多个同步的更新版本可以面向终端用户。

约束Tab键

对于一些交互功能,你可能想要向不可见用户指引页面上的凸显元素。例如,当启用全局编辑模块时,语境模块会限制连接上下文的Tab键。

这些模块通过Drupal.TabbingManager的Javascript功能来实现Tab键的约束。要想在页面上约束Tab键,应调用Tab键的管理功能,调用方法如下所示:

var tabbingContext = Drupal.TabbingManager.constrain($('.contextual-toolbar-tab, .contextual'));

有一组元素被传递给constrain方法,按下Tab键,光标只能在这组元素中有tab功能的元素中移动。

要想删除tab键约束,tabbingContext对象必须调用若、release方法。如下所示:

tabbingContext.release();

Overlay模块使用两个function函数来实现Tab键的初始化和释放,如下所示:

/**
* 使overlay之外的元素不可通过tab键到达
*/
Drupal.overlay.constrainTabbing = function ($tabbables) {
  // If a tabset is already active, return without creating a new one.
  if (this.tabset && !this.tabset.isReleased()) {
    return;
  }
  // 保留仅在overlay和工具栏之间的链接
  this.tabset = Drupal.TabbingManager.constrain($tabbables);
  var self = this;
  $(document).on('drupalOverlayClose.tabbing', function () {
    self.tabset.release();
    $(document).off('drupalOverlayClose.tabbing');
  });
};
/**
*
*/
Drupal.overlay.releaseTabbing = function () {
  if (this.tabset) {
    this.tabset.release();
    delete this.tabset;
  }
};

一次只能激活一个Tab键约束,当一个Tab键约束正在运行却调用另一个Tab键约束,此时之前运行的Tab键约束会被禁用继而运行新的Tab键约束。你只需关注你的模块所控制的Tab键约束即可。如果另一个模块覆盖了你的Tab键约束然后释放了它,你原来模块的Tab键约束会被重新运用。如果你的模块释放正在被禁用的Tab键约束(这意味着其他模块拥有活跃的Tab键约束),那么结果你可以想象,它将无法重新运行。

Devel的可访问性

Devel的访问(devel_a11y)模块的创建,是为了帮助访问之外的实施、理解和测试功能。

它为浏览器提供了公告的控制台日志记录和Tab键约束的可视化。

例如,下图就展示了如何帮助可视化Tab键约束:

tabbingmanager.visualize.png