ProgressBarについて - React Ariaの実装読むぞ
こんにちは、フロントエンドエンジニアの mehm8128 です。
今日は ProgressBar について書いていきます。
使用例
ドキュメントからそのまま取ってきています。
function ProgressBar(props) {
let {
label,
showValueLabel = !!label,
value,
minValue = 0,
maxValue = 100,
} = props;
let { progressBarProps, labelProps } = useProgressBar(props);
// Calculate the width of the progress bar as a percentage
let percentage = (value - minValue) / (maxValue - minValue);
let barWidth = `${Math.round(percentage * 100)}%`;
return (
<div {...progressBarProps} style={{ width: 200 }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
{label && <span {...labelProps}>{label}</span>}
{showValueLabel && <span>{progressBarProps["aria-valuetext"]}</span>}
</div>
<div style={{ height: 10, background: "lightgray" }}>
<div
style={{
width: barWidth,
height: 10,
background: "orange",
}}
/>
</div>
</div>
);
}
本題
WAI-ARIA はこちらです。
aria-属性
React Aria の実装では 4 つのaria-属性がつけられています。
aria-valueminとaria-valuemaxは最小値と最大値、aria-valuenowは現在どこまで進んでいるかを表す値です。また、aria-valuetextはスクリーンリーダーに読み上げさせるテキストで、progressbarrole はこれが設定されていればaria-valuenowの代わりにこれが読み上げられます。今回の hook では i18n 対応も行われているようです。
ただし、現在の進捗状況が不明（indeterminate）なときにはisIndeterminateを渡すとaria-valuenowとaria-valuetextがundefinedになり、NVDA ではビジーインジケーターと読み上げられます。
aria-属性 2
useProgressBar自体にはついていないですが説明したいaria-属性がまだあります。
ProgressBar がページ内のどこかがローディング中であることを表している場合、そのローディング中の要素でaria-describedbyによって ProgressBar を参照し、さらにaria-busyをtrueにする必要があります。
aria-busy="true"は、要素の更新中に live region の通知が行われるのを防ぐためのものらしいです。
the global
aria-busystate indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
Cybozu Inside Out でも関連記事を見つけたので貼っておきます。
button のisPendingについて
progressbar は、実は 2 日目の記事でも登場していました。
まとめ
明日の担当は @mehm8128 さんで、Combobox についての記事です。お楽しみにー
Discussion