Commit 9282934e authored by Robert Knight's avatar Robert Knight

Fix tabs being shifted down by sr-only element

Move the screen-reader only summary element outside of the container with
spacing between elements, as this caused the tab titles to shift down.
parent 2f6b57bc
...@@ -146,15 +146,16 @@ function SelectionTabs({ ...@@ -146,15 +146,16 @@ function SelectionTabs({
const tabCountsSummary = tabCountsSummaryPieces.join(', '); const tabCountsSummary = tabCountsSummaryPieces.join(', ');
return ( return (
<>
<div aria-live="polite" role="status" className="sr-only">
{tabCountsSummary}
</div>
<div <div
className={classnames( className={classnames(
// 9px balances out the space above the tabs // 9px balances out the space above the tabs
'space-y-3 pb-[9px]', 'space-y-3 pb-[9px]',
)} )}
> >
<div aria-live="polite" role="status" className="sr-only">
{tabCountsSummary}
</div>
<div className="flex gap-x-6 theme-clean:ml-[15px]" role="tablist"> <div className="flex gap-x-6 theme-clean:ml-[15px]" role="tablist">
<Tab <Tab
count={annotationCount} count={annotationCount}
...@@ -226,6 +227,7 @@ function SelectionTabs({ ...@@ -226,6 +227,7 @@ function SelectionTabs({
</Card> </Card>
)} )}
</div> </div>
</>
); );
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment