关于#Webaccessibility#的问题，如何解决？(标签-aria-label)

Question

我的原始需求是这样的：
当我在键盘上按下up或者down键的时候，屏幕阅读器应该顺序的读出 “search for butterfly button”(这个文字是我设置给button的aria-label), “search for butterfly”（这个文字是我设置给div的值）
网页最初的状态是这样的

当我点击“click me”按钮的时候，改变下面这个button包含的div的内容以及设置button的aria-label（关于aria-label，是网页的无障碍访问协议中，提供给盲人或者其他残疾人阅读屏幕时，让屏幕阅读器读出内容的属性）

我发现一个问题，当我给searchDescription中的模板字符串加上双引号或者单引号的时候，屏幕阅读器可以读出我给button设置的aria-label的值
let searchDescription= Search for "${inputText}";
但是如果保持原来的字符串拼接格式，屏幕阅读器没法读出我给button设置的aria-label的值，
let searchDescription= Search for ${inputText};

所以我请教一下，这两种有什么区别吗？还是其实主要原因并不是这个，而是我碰巧修改的这个起了作用。麻烦帮我看看我怎样修改才能达到我的需求。
非常感谢！

Answer 1

同樣的問題我在 stackoverflow 的回答：

https://stackoverflow.com/questions/71078411/screen-reader-cannot-read-text-which-dynamically-add-to-button/71089581#71089581

Using single / double quotes will be string. backtick will be eval() / Template literals

嘗試翻譯：
使用 單' / 雙" 引號是字串。反引號 ` 是 eval() 模板文字。

sample code :

        function test() {
            let t = 'text1';
            let n = 1;
            console.log( "#1", t );
            console.log( "#2", "${t}" );
            console.log( "#3", '${t}' );
            console.log( "#4", `${t}` );
            console.log( "#5", eval( {t} ) );
            console.log( "#6", eval( "{t}" ) );
            console.log( "#7", eval( "{n+1}" ) );
            console.log( "#8", eval( "console.log(98)" ) );
            console.log( "#9", `${console.log(99)}` );
        }
        test();

        /*
            #1 text1
            #2 ${t}
            #3 ${t}
            #4 text1
            #5 
                Object { t: "text1" }
            #6 text1
            #7 2
            99 --> result by console.log(98)
            #8 undefined 
            99 --> result by console.log(99)
            #9 undefined
        */