Screen reader i.e. JAWS doesn't read text of a button when text is changed on click of that button?

Question

I am facing one minor difficulty while making my software ARIA accessibility enabled. Any kind of help would be appreciated!

I have a div which works as a 'Edit' button with click event using jQuery. I am changing text of that button 'Save' on click event. Screen reader like JAWS reads "Edit button" when the focus comes to that button for the first time.

But I want JAWS to recognise the change happened after click event i.e. After click JAWS should read "Save button". Any help? (Note that even after click, focus stays on the same button)

HTML code for that div/button:

<div role="button" class="js-btn" aria-label="Edit">Edit</div>

jQuery code to handle click event:

$(document).on("click",".js-btn",function(e){
    $(this).innerHTML("Save");
    $(this).attr("aria-label","Save");
});

Answer 1

(Note that even after click, focus stays on the same button)

If it's your expected behaviour, this is the answer to your question : as long as the focus stays on the element the screenreader won't re-read its data.

Use two buttons, show the "Save" button after clicking on "Edit" and hide the "edit" button.

<button id="edit">Edit</div>
<button id="save" class="hidden">Save</div>

$("#edit").on("click", function() {
    $(this).hide();
    $("#save").removeClass("hidden").focus();
});