How to create a accessibility error popup upon response from API

[Community Alums]

I am working on a Portal where I would like to create a popup when error is returned from API. I was able to achieve this multiple ways like spModal and modal-dialogue but non of them are focused by accessibility tools like JAWS and NVDA.

I found a way to create a popup which is focused and read by these tools but it only works when button is clicked from HTML and not based on condition or function call. I am pasting code below for this. If anyone knows how to call this function without button click that would be great. Thanks.

HTML:

<button ng-click="confirm()">TEST</button>

Client Script:

$scope.confirm = function confirm(){
spModal.open({
title: 'An unexpected error occurred. Please try again later.' ,
message: 'Click “YES” to Continue',
buttons: [
{label:'${OK}', primary: true, focus:true}
]
})

[Its_Azar]

Hi there @Community Alums 

you can trigger the popup based on a condition or function call in your client script.

function triggerErrorPopup() {
    spModal.open({
        title: 'An unexpected error occurred. Please try again later.',
        message: 'Click “OK” to Continue',
        buttons: [{ label: '${OK}', primary: true, focus: true }]
    });
}


function handleAPIResponse(response) {
    if (response.error) {
       
        triggerErrorPopup();
    } else {
      
    }
}

If this helps kindly accept the answer thanks much.

[Community Alums]

HI Azar, 

Thanks for reply, i tried this earlier but the modal is opening as an alert and not the popup with details. Also how we are suppose to call handleAPIResponse() function from server side script upon API response?

Thanks,

Vishal