Merge pull request #14799 from overleaf/rd-report-tablist-plan

Accessibility - help the user to navigate through the tabs on the plans page

GitOrigin-RevId: 93822277edd3a44eaf8e1219a4902e28d31e198a

services/web/app/views/subscriptions/plans/_cards_controls_tables.pug

@@ -7,24 +7,29 @@ else if annualTrialsAssignment == 'default'
 
 .row.plans-v2-top-switch
 	.col-xs-12
-		ul.nav.plans-v2-nav
+		ul.nav.plans-v2-nav(role="tablist")
 			li.active.plans-v2-top-switch-individual(
 				data-ol-plans-v2-view-tab='individual'
 				event-tracking="plans-page-toggle-plan"
 				event-tracking-mb="true"
 				event-tracking-trigger="click"
 				event-segmentation='{"button": "individual"}'
+				role="presentation"
 			)
-				button.btn.btn-default-outline #{translate("indvidual_plans")}
+				button.btn.btn-default-outline(role="tab" aria-controls="panel-individual" aria-selected="true") #{translate("indvidual_plans")}
 			li.plans-v2-top-switch-group(
 				data-ol-plans-v2-view-tab='group'
 				event-tracking="plans-page-toggle-plan"
 				event-tracking-mb="true"
 				event-tracking-trigger="click"
 				event-segmentation='{"button": "group"}'
+				role="presentation"
 			)
 				button.btn.btn-default-outline(
+					aria-controls="panel-group"
 					href="#"
+					role="tab"
+					aria-selected="false"
 				)
 					span #{translate("group_plans")} 
 					span (#{translate("save_30_percent_or_more")})
@@ -34,9 +39,13 @@ else if annualTrialsAssignment == 'default'
 				event-tracking-mb="true"
 				event-tracking-trigger="click"
 				event-segmentation='{"button": "student"}'
+				role="presentation"
 			)
 				button.btn.btn-default-outline(
+					aria-controls="panel-student"
 					href="#"
+					role="tab"
+					aria-selected="false"					
 				) #{translate("student_plans")}
 
 +monthly_annual_switch("annual", "plans-page-toggle-period")
@@ -48,21 +57,21 @@ else if annualTrialsAssignment == 'default'
 +table_sticky_header_all(plansConfig)
 
 .row.plans-v2-table-container(hidden data-ol-plans-v2-period='monthly')
-	.col-sm-12(data-ol-plans-v2-view='individual')
+	.col-sm-12(data-ol-plans-v2-view='individual' role="tabpanel")
 		.row
 			+table_individual('monthly')
-	.col-sm-12(hidden data-ol-plans-v2-view='student')
+	.col-sm-12(hidden data-ol-plans-v2-view='student' role="tabpanel")
 		.row
 			+table_student('monthly')
 
 .row.plans-v2-table-container(data-ol-plans-v2-period='annual')
-	.col-sm-12(data-ol-plans-v2-view='individual')
+	.col-sm-12(data-ol-plans-v2-view='individual' id="panel-individual" role="tabpanel")
 		.row
 			+table_individual('annual')
-	.col-sm-12(hidden data-ol-plans-v2-view='group')
+	.col-sm-12(hidden data-ol-plans-v2-view='group' id="panel-group" role="tabpanel")
 		.row
 			+table_group('annual')
-	.col-sm-12(hidden data-ol-plans-v2-view='student')
+	.col-sm-12(hidden data-ol-plans-v2-view='student' id="panel-student" role="tabpanel")
 		.row
 			+table_student('annual')
 

services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js

@@ -102,10 +102,13 @@ let currentMonthlyAnnualSwitchValue = 'annual'
 
 function selectTab(viewTab) {
   document.querySelectorAll('[data-ol-plans-v2-view-tab]').forEach(el => {
-    el.classList.toggle(
-      'active',
-      el.getAttribute('data-ol-plans-v2-view-tab') === viewTab
-    )
+    const tab = el.querySelector('[data-ol-plans-v2-view-tab] button')
+    if (tab) {
+      const isActive =
+        tab.parentElement.getAttribute('data-ol-plans-v2-view-tab') === viewTab
+      tab.parentElement.classList.toggle('active', isActive)
+      tab.setAttribute('aria-selected', isActive)
+    }
   })
 
   document.querySelectorAll('[data-ol-plans-v2-view]').forEach(el => {
@@ -147,6 +150,24 @@ function setUpTabSwitching() {
       selectTab(viewTab)
     })
   })
+
+  const tabs = document.querySelectorAll(
+    '[data-ol-plans-v2-view-tab] [role="tab"]'
+  )
+
+  if (tabs) {
+    tabs.forEach(tab => {
+      tab.addEventListener('keydown', event => {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+          const currentIndex = Array.from(tabs).indexOf(tab)
+          const nextIndex =
+            event.key === 'ArrowLeft' ? currentIndex - 1 : currentIndex + 1
+          const newIndex = (nextIndex + tabs.length) % tabs.length
+          tabs[newIndex].focus()
+        }
+      })
+    })
+  }
 }
 
 function setUpGroupPlanPricingChange() {