Call page tablist does not implement ARIA tablist role on small screens

[henrycatalinismith]

Steps to reproduce

1. Open the call page on a viewport with a width of 599px or less.
2. Press ⌘ + F5 to start VoiceOver.
3. Focus the tablist.

Expected outcome

When focused, each tab in the tablist should be announced as a tab and its current state should be clear too. The MDN docs for the tab role contains an example which you can try with VoiceOver enabled to get a feel for how this UX works in a screen reader. The following screen recording shows the VoiceOver announcements for each tab.

This falls under WCAG success criterion 4.1.2. When building custom implementations of common UI patterns such as tablists, following the ARIA recommendations enables assistive technology to provide the same sense of familiarity that is otherwise only available visually.

Actual outcome

The ARIA recommendations aren't followed so the UI isn't announced as a tablist when it receives focus. Further, none of the UI is rendered using semantically interactive elements, so the inactive tabs are impossible to focus, and therefore cannot be accessed at all.

Severity

The success criterion covering this issue is WCAG level A – the minimum level. Most organizations aim for a conformance level of AA, which includes all level A criteria. If the UI components here were otherwise operable despite not following the ARIA recommendations the severity here would only be moderate, but as they're inoperable without pointer input events the severity is high.

Recommendation

Make this UI follow all the ARIA recommendations for the tablist role.