原文链接: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键约束: