github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

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

GitOrigin-RevId: 93822277edd3a44eaf8e1219a4902e28d31e198a
This commit is contained in:
Rebeka Dekany 2024-01-25 13:57:26 +01:00 committed by Copybot
parent e264b1ac8b
commit 140b312eca
2 changed files with 41 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
services/web/app/views/subscriptions/plans/_cards_controls_tables.pug
View file

@ -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')

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

@ -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() {