From 15c5a15a28ec82f76bf66c6a3f00433412ddec50 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Tue, 1 Mar 2022 14:33:28 -0800
Subject: [PATCH] add aria labels for tabs

---
 .../trading/pages/markets/[marketId].page.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/trading/pages/markets/[marketId].page.tsx b/apps/trading/pages/markets/[marketId].page.tsx
index e502f4c5c..3d9899b05 100644
--- a/apps/trading/pages/markets/[marketId].page.tsx
+++ b/apps/trading/pages/markets/[marketId].page.tsx
@@ -100,11 +100,12 @@ const GridTabs = ({ children, group }: GridTabsProps) => {
   return (
     <div className="h-full grid grid-rows-[min-content_1fr]">
       {/* the tabs */}
-      <div className="flex gap-[2px] bg-[#ededed]">
+      <div className="flex gap-[2px] bg-[#ededed]" role="tablist">
         {Children.map(children, (child) => {
           if (!isValidElement(child)) return null;
+          const isActive = query[group] === child.props.name;
           const buttonClass = classNames('p-8', {
-            'text-vega-pink': query[group] === child.props.name,
+            'text-vega-pink': isActive,
           });
           return (
             <button
@@ -115,6 +116,10 @@ const GridTabs = ({ children, group }: GridTabsProps) => {
                 searchParams.set(group, child.props.name);
                 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}
             </button>
@@ -125,7 +130,15 @@ const GridTabs = ({ children, group }: GridTabsProps) => {
       <div className="h-full overflow-auto">
         {Children.map(children, (child) => {
           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;
         })}