Separator

飾りが既定です

多くの区切りは見た目のためだけにあります。 読み上げに出すと「区切り 区切り」と数えられるだけで、意味が増えません。

意味のある区切り（話題が変わる、群が変わる）のときだけ decorative={false} にしてください。

<Separator />                    {/* 飾り。読み上げに出ません */}
<Separator decorative={false} /> {/* 意味のある区切り */}

見た目は変わりません。 変わるのは読み上げに出るかどうかだけです。

縦向きは親の高さに広がります

親が高さを持たないと見えません。 横並びの中で使うときは、 親に高さがあるか align-items: stretch になっているか確かめてください。

<div style={{ display: 'flex', height: 40 }}>
  <span>左</span>
  <Separator orientation="vertical" />
  <span>右</span>
</div>

hr ではありません

縦の区切りに hr は意味が合いません。向きで要素が変わる形にしていません。 読み上げへの意味は role で与えています。

太さは1段だけです

罫線の太さは1つしか持っていません。強い区切りは線では表せません。

区切りの強さは間隔で表してください。 線を太くすると、区切りではなく 枠として読まれます。

要素は差し替えられません

線はこの要素自身の境界で描いています。子へ移すと、子が持つ境界の既定と重なります （hr は上辺に 1px を持ちます）。

メニューの区切りのように li にしたいときは、外側で包んでください。