How to set ariaLabel for toast and Messagebox

Question

I have a Ext.toast and Ext.Msg to be displayed on button click. So on click of button the content of toast and messagebox should be read.

I have applied ariaLabel but its still not readable, tried setting focus and containsFocus as well but still no luck, when I set defaultFocus:1 on messagebox it works for the first time only. Any hints please.

 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
});

Screen reader to be used - NVDA

Fiddle can be found here

Answer 1

The problem is that attribute aria-labelledby is always set automatically. (and has the higher precedence ariaLabelledBy). I did not find a way to avoid automatic substitution, so I created an override that does this for window instances

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