如何为 toast 和 Messagebox 设置 ariaLabel

Question

我有一个 Ext.toast 和 Ext.Msg 要在单击按钮时显示。因此，在单击按钮时，应读取 toast 和消息框的内容。

我已经应用了 ariaLabel 但它仍然不可读，也尝试设置 focus 和 containsFocus 但仍然没有成功，当我在消息框上设置 defaultFocus:1 时它第一次工作只有时间。请任何提示。

 Ext.toast({
     html: 'Data Saved',
     title: 'My Title',
     width: 200,
     align: 't',
     ariaLabel: 'My Title Data Saved'
 });

Ext.Msg.show({
     title: 'Invalid search criteria',
     msg: 'check',
     ariaLabel:'Invalid search criteria check',
     icon: Ext.Msg.ERROR,
     buttons: Ext.Msg.OK
});

要使用的屏幕 reader - NVDA

Fiddle可以找到here

Answer 1

如果您查看 Ext.Msg.show 的文档，您将找不到任何 aria* config/param。此配置仅适用于 Ext.window.MessageBox class。我已经更改了你的 fiddle 示例以强制它工作，但不幸的是，这个 aria 功能看起来有问题。

Ext.application({
name: 'Fiddle',

launch: function () {

    Ext.create('Ext.Button', {
        text: 'toast',
        renderTo: Ext.getBody(),
        handler: function () {
            Ext.create('Ext.window.Toast', {
                html: 'Data Saved',
                title: 'My Title',
                width: 200,
                align: 't',
                containsFocus: true,
                closeAction: 'destroy',
                ariaLabel: 'ARIA_LABEL_VALUE',
                //ariaLabelledBy: 'ARIA_LABELLED_BY',
                ariaDescribedBy: "ARIA_DESCRIBED_BY",
                listeners: {
                    show: function () {
                        console.log(
                            this.el.dom.getAttribute('aria-label'),
                            this.el.dom.getAttribute('aria-labelledby'),
                            this.el.dom.getAttribute('aria-describedby')
                        );
                    }
                }
            }).show();

        }
    });

    Ext.create('Ext.Button', {
        text: 'msgbox',
        renderTo: Ext.getBody(),
        handler: function () {
            Ext.create('Ext.window.MessageBox', {
                closeAction: 'destroy',
                ariaLabel: 'ARIA_LABEL_VALUE',
                //ariaLabelledBy: 'ARIA_LABELLED_BY',
                ariaDescribedBy: "ARIA_DESCRIBED_BY",
                listeners: {
                    show: function () {
                        console.log(
                            this.el.dom.getAttribute('aria-label'),
                            this.el.dom.getAttribute('aria-labelledby'),
                            this.el.dom.getAttribute('aria-describedby')
                        );
                    }
                }
            }).show({
                title: 'Invalid search criteria',
                cls: 'error-message',
                msg: 'yooo',
                containsFocus: true,
                ariaLabel: 'msg yoo',
                modal: true,
                icon: Ext.Msg.ERROR,
                buttons: Ext.Msg.OK,

            });
        }
    });
}
});

fiddle

Answer 2

问题是属性 aria-labelledby 总是自动设置的。（并且具有更高的优先级 ariaLabelledBy）。我没有找到避免自动替换的方法，所以我创建了一个覆盖 window 个实例

Ext.define('Ext.window.WindowAriaOverride', {
    override: 'Ext.window.Window',
    afterShow: function () {
        this.el.dom.setAttribute('aria-labelledby', null)

        this.el.dom.setAttribute('aria-label', this.ariaLabel)
    }
});

Fiddle

如何为 toast 和 Messagebox 设置 ariaLabel

How to set ariaLabel for toast and Messagebox

javascript

accessibility

extjs

wai-aria

extjs6-classic