dynamically change button text aria-label not working-CodePudding

When I dynamically change button text which is a inline div, the screen reader cannot read aria-label which I add to button. How should I do to make screen reader read aria-label context.
My code is blew,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
    <title>
        Create custom shape button
    </title>
</head>
<body>  
    <p>
        <input name="name"  id="b_input" value="butterfly"></input>
        <button  onclick="Func()" width="100px" aria-label="Search for butterfly">click me</button>
    </p>
    <button >
        <div >@("show me more information")</div>
    </button>
    <script>
        function Func() {
            let dir="ltr";
            let inputB = document.getElementById("b_input");
            let inputText = inputB.value;
            let searchDescription = "Search for "   inputText;

            var sideBarLabelNodes = document.getElementsByClassName("b_button_label");
            if (sideBarLabelNodes.length == 1) {
                sideBarLabelNodes[0].textContent = searchDescription;
            }

            let el = document.getElementsByClassName('b_button');
            if(el.length == 1) {
                if(!!searchDescription) {
                    el[0].setAttribute("aria-label", text);
                }
            }
        }
    </script>
</body>

</html>

Thank you for your help.

CodePudding user response：