diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 8fa96a8..b62dd29 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -3367,5 +3367,59 @@ $(document).ready(function () { // ORBITFRONT.member.equalHeight('.i-member-item-inner'); // } // }); + function fixVoicePlayerA11y() { + $('div.voice-player').each(function () { + var $wrapper = $(this); + var $a = $wrapper.find('a.voice-player'); + if (!$a.length) return; + + var voiceTitle = $wrapper.find('.voice-title').text().trim(); + var baseLabel = voiceTitle || ''; + + // 根據目前狀態決定標籤 + function getLabel(isPlaying) { + if (baseLabel) { + return isPlaying ? ('暫停音訊:' + baseLabel) : ('播放音訊:' + baseLabel); + } + return isPlaying ? '暫停音訊' : '播放音訊'; + } + + // 更新 a 的無障礙屬性 + function updateA11y($btn) { + var isPlaying = $btn.attr('status') === 'playing'; + var label = getLabel(isPlaying); + + $btn.attr('title', label); + + // 圖示 aria-hidden + $btn.find('i, svg').attr('aria-hidden', 'true'); + + // 更新 sr-only span + var $span = $btn.find('span.sr-only'); + if ($span.length) { + $span.text(label); + } else { + // 移除舊的 display:none span,補 sr-only + $btn.find('span').removeAttr('style').addClass('sr-only').text(label); + } + } + + // 初始化 + updateA11y($a); + + // 監聽點擊,切換後更新 + $a.off('click.voiceA11y').on('click.voiceA11y', function () { + var $btn = $(this); + // 用 setTimeout 等狀態切換完畢再更新 + setTimeout(function () { + updateA11y($btn); + }, 50); + }); + }); +} + +$(document).ready(function () { + setTimeout(fixVoicePlayerA11y, 500); +}); }(jQuery, window));