如何为烤面包和消息框设置ariaLabel

Question

我有一个Ext.toast和Ext.Msg，将在单击按钮时显示。因此，在单击按钮时，应该阅读烤面包和消息框的内容。

我已经应用了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
});

要使用的屏幕阅读器-NVDA

小提琴可以找到here

Answer 1

如果您查看Ext.Msg.show的文档，则不会找到任何aria * config / param。此配置仅对Ext.window.MessageBox类可用。我已更改了您的小提琴示例，以使其正常工作，但不幸的是，该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