LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

add aria labels for tabs

Browse Source
This commit is contained in:
Matthew Russell 2022-03-01 14:33:28 -08:00
parent 54bbe421bc
commit 15c5a15a28
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/trading/pages/markets/[marketId].page.tsx
View File

@ -100,11 +100,12 @@ const GridTabs = ({ children, group }: GridTabsProps) => {
return ( return (
<div className="h-full grid grid-rows-[min-content_1fr]"> <div className="h-full grid grid-rows-[min-content_1fr]">
{/* the tabs */} {/* the tabs */}
<div className="flex gap-[2px] bg-[#ededed]"> <div className="flex gap-[2px] bg-[#ededed]" role="tablist">
{Children.map(children, (child) => { {Children.map(children, (child) => {
if (!isValidElement(child)) return null; if (!isValidElement(child)) return null;
const isActive = query[group] === child.props.name;
const buttonClass = classNames('p-8', { const buttonClass = classNames('p-8', {
'text-vega-pink': query[group] === child.props.name, 'text-vega-pink': isActive,
}); });
return ( return (
<button <button
@ -115,6 +116,10 @@ const GridTabs = ({ children, group }: GridTabsProps) => {
searchParams.set(group, child.props.name); searchParams.set(group, child.props.name);
replace(`${url}?${searchParams.toString()}`); replace(`${url}?${searchParams.toString()}`);
}} }}
role="tab"
aria-selected={isActive}
aria-controls={`tabpanel-${group}-${child.props.name}`}
id={`tab-${group}-${child.props.name}`}
> >
{child.props.name} {child.props.name}
</button> </button>
@ -125,7 +130,15 @@ const GridTabs = ({ children, group }: GridTabsProps) => {
<div className="h-full overflow-auto"> <div className="h-full overflow-auto">
{Children.map(children, (child) => { {Children.map(children, (child) => {
if (isValidElement(child) && query[group] === child.props.name) { if (isValidElement(child) && query[group] === child.props.name) {
return <div>{child.props.children}</div>; return (
<div
role="tabpanel"
id={`tabpanel-${group}-${child.props.name}`}
aria-labelledby={`tab-${group}-${child.props.name}`}
>
{child.props.children}
</div>
);
} }
return null; return null;
})} })}