diff --git a/services/web/app/views/subscriptions/plans/_cards_controls_tables.pug b/services/web/app/views/subscriptions/plans/_cards_controls_tables.pug index 407e925f2d..9d58bec52e 100644 --- a/services/web/app/views/subscriptions/plans/_cards_controls_tables.pug +++ b/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') diff --git a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js index 6ef5f1d1d0..0d643bb9e8 100644 --- a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js +++ b/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() {