a11y-dialog, 一个非常轻量和灵活的可以访问模式对话框

分享于 

11分钟阅读

GitHub

  繁體 雙語
A very lightweight and flexible accessible modal dialog.
  • 源代码名称:a11y-dialog
  • 源代码网址:http://www.github.com/edenspiekermann/a11y-dialog
  • a11y-dialog源代码文档
  • a11y-dialog源代码下载
  • Git URL:
    git://www.github.com/edenspiekermann/a11y-dialog.git
    Git Clone代码到本地:
    git clone http://www.github.com/edenspiekermann/a11y-dialog
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/edenspiekermann/a11y-dialog
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    A11y对话框

    是一个轻量级的但灵活的脚本,可以创建可以访问的对话框。








    你可以尝试使用演示 ↗。

    安装

    
    npm install a11y-dialog --save
    
    
    
    

    用法

    你将在这个库的示例文件夹中找到一个具体演示,但基本上是以下要点:

    需要DOM结构

    下面是可以增强的基本标记。 请注意评论。

    <!-- Main container related notes: - It can have a different id than `main`, however you will have to pass it as a second argument to the A11yDialog instance. See further down.--><divid="main">
     <!-- Here lives the main content of the page.--></div><!-- Dialog container related notes: - It is not the actual dialog window, just the container with which the script interacts. - It can have a different id than `my-accessible-dialog`, but it needs an `id` anyway.--><divid="my-accessible-dialog">
     <!-- Overlay related notes: - It has to have the `tabindex="-1"` attribute. - It doesn't have to have the `data-a11y-dialog-hide` attribute, however this is recommended. It hides the dialog when clicking outside of it.--> <divtabindex="-1"data-a11y-dialog-hide></div>
     <!-- Dialog window content related notes: - It is the actual visual dialog element. - It has to be a `<dialog>` element. - It doesn't have to have the `aria-labelledby` attribute however this is recommended. It should match the `id` of the dialog title.--> <dialogaria-labelledby="dialog-title">
     <!-- Closing button related notes: - It does have to have the `type="button"` attribute. - It does have to have the `data-a11y-dialog-hide` attribute. - It does have to have an aria-label attribute if you use an icon as content.--> <buttontype="button"data-a11y-dialog-hidearia-label="Close this dialog window">
     &times; </button>
     <!-- Dialog title related notes: - It should have a different content than `Dialog Title`. - It can have a different id than `dialog-title`.--> <h1id="dialog-title">Dialog Title</h1>
     <!-- Here lives the main content of the dialog.--> </dialog>
    </div>

    样式图层

    脚本本身不处理任何样式,甚至 display 属性也不处理。 它基本上主要切换对话框本身及其对应容器的aria-hidden 属性。

    在支持 <dialog> 元素的浏览器中,它的可见性将由 USER-AGENT 本身来处理。 直到支持变得更好,样式层由实现者的( 你) 决定。

    建议至少使用以下样式使所有的工作都在支持和不支持的用户代理上工作:

    /** * When the native `<dialog>` element is supported, the overlay is implied and * can be styled with `::backdrop`, which means the DOM one should be removed. * * The `data-a11y-dialog-native` attribute is set by the script when the * `<dialog>` element is properly supported. * * Feel free to replace `:first-child` with the overlay selector you prefer.*/[data-a11y-dialog-native] >:first-child {
     display: none;
    }/** * When the `<dialog>` element is not supported, its default display is `inline` * which can cause layout issues. This makes sure the dialog is correctly * displayed when open.*/dialog[open] {
     display: block;
    }/** * When the native `<dialog>` element is not supported, the script toggles the * `aria-hidden` attribute on the container. If `aria-hidden` is set to `true`, * the container should be hidden entirely. * * Feel free to replace `.dialog-container` with the container selector you * prefer.*/.dialog-container[aria-hidden='true'] {
     display: none;
    }

    JavaScript实例化

    // Get the dialog element (with the accessor method you want)constel=document.getElementById('my-accessible-dialog');// Instantiate a new A11yDialog moduleconstdialog=newA11yDialog(el);

    就像建议在本文档的,对话框元素应该与内容 container(s) 位于相同级别。 因此,脚本会将对话框元素的兄弟元素的aria-hidden 属性切换为默认值。 通过将 NodeListElement 或者选择器作为 A11yDialog 构造函数的第二个参数传递,可以更改这里行为:

    constdialog=newA11yDialog(el, containers);

    DOM API

    DOM API依赖于 data-* 属性。 它们都在 data-a11y-dialog-* 名称空间下保持一致性。清晰性。 可以识别两个属性:

    • data-a11y-dialog-show: 对话框元素的id 应作为值
    • data-a11y-dialog-hide: 对话框元素的id 应该作为值;如果省略,最接近的父对话框元素( 如果有的话) 将作为一个值。

    下面的按钮将在与 my-accessible-dialog id交互时打开该对话框。

    <buttontype="button"data-a11y-dialog-show="my-accessible-dialog">Open the dialog</button>

    下面的按钮将关闭与之交互的对话框。

    <buttontype="button"data-a11y-dialog-hidearia-label="Close the dialog">&times;</button>

    下面的按钮将在与 my-accessible-dialog id交互时关闭该对话框。 如果对话框打开的唯一可以焦的元素是对话框本身的焦点,那么看起来很不可以能。

    <buttontype="button"data-a11y-dialog-hide="my-accessible-dialog"aria-label="Close the dialog">&times;</button>

    另外,当 <dialog> 元素被本地支持时,库会添加一个 data-a11y-dialog-native 属性( 没有价值)。 这个属性基本上是用来定制基于 USER-AGENT 支持( 或者缺少它)的样式层。

    JS API

    对于 JS,它只在对话框实例上包含 show()hide() 方法。

    // Show the dialogdialog.show();// Hide the dialogdialog.hide();

    <dialog> 元素是本地支持时,参数传递给 show()hide(),并将它的传递给 showModal()close() 如有必要,可以使用 dialog.dialog.returnValue 读取 returnValue

    对于高级用法,有 create()destroy() 方法。 这些命令负责将单击事件侦听器附加到对话框打开器和取消。 注意,在实例化上自动调用 create() 方法,因此不必直接调用它。

    // Unbind click listeners from dialog openers and closers and remove all bound// custom event listeners registered with `.on()`dialog.destroy();// Bind click listeners to dialog openers and closersdialog.create();

    如果有必要,create() 方法也接受与构造函数中第二个参数相同的targets 容器( 与对话框元素一起切换的那个)。 如果省略,将使用给构造函数( 或者默认)的那个。

    事件

    当显示。隐藏和销毁时,实例将发出某些事件。 使用 on() 方法订阅这些文件可能会收到对话框DOM元素和事件对象( )。

    事件对象可以用于知道在 show 或者 hide 事件中使用哪个触发器( 开启/关闭)。

    dialog.on('show', function (dialogEl, event) {
     // Do something when dialog gets shown// Note: opener is `event.currentTarget`});dialog.on('hide', function (dialogEl, event) {
     // Do something when dialog gets hidden// Note: closer is `event.currentTarget`});dialog.on('destroy', function (dialogEl) {
     // Do something when dialog gets destroyed});dialog.on('create', function (dialogEl) {
     // Do something when dialog gets created// Note: because the initial `create()` call is made from the constructor, it// is not possible to react to this particular one (as registering will be// done after instantiation)});

    你可以使用 off() 方法取消注册这些处理程序。

    dialog.on('show', doSomething);//.. .dialog.off('show', doSomething);

    嵌套对话框

    嵌套对话框是一个questionable的设计 Pattern,它在 HTML 5.2对话框规范的任何地方没有被引用。 因此,库默认不鼓励它,也不支持它。

    免责声明 &

    最初,这个存储库是来自 accessible-modal-dialog ↗的fork,由 Greg Kraus。 它已经经历了各个阶段,因为初始实现和两个软件包不再相似的工作方式。


    acc  Light  FLEX  DIA  对话框  modal  
    相关文章