Could our tabs section in multifile editor be more accessible?

Contributors
1

I am trying to duplicate the current tabs in https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-5

image

But if I keep going and finish the PRs, I will create something like this:

<ul role='tablist' className={styles} {...props}>
    <li role='presentation'>
      <a
        className={classes}
        id={tabId}
        role='tab'
        aria-controls={ariaControls}
        aria-selected={isActive}
        {...props}
      >
        {eventKey}
      </a>
    </li>
  <li role='presentation'>
      <a
        className={classes}
        id={tabId}
        role='tab'
        aria-controls={ariaControls}
        aria-selected={isActive}
        {...props}
      >
        {eventKey}
      </a>
    </li>
{children}
</ul>

So, I am wondering if it’s better to have them as buttons? because they don’t act as links but button that open different tabs. Or maybe radio input :thinking: , that will display different tabs.

So I am wondering is it good to switch them to button elements? or is it fine to have them as list with links in them?

Here are the PRs:

feat(tools): add tabs component by Sboonny · Pull Request #49856 · freeCodeCamp/freeCodeCamp (github.com)
feat(tools): tab pane component by Sboonny · Pull Request #49786 · freeCodeCamp/freeCodeCamp (github.com)

2

I would assume changing those anchors to buttons would be fine.

The only difference I am aware of from an a11y perspective is buttons can be triggered using either Space or Enter, whereas anchor elements can only be triggered via Enter

3

~~True, but the way they interact is different from both, you don’t click buttons or links, you move your highlight to the right → or left ← , and it will open a tab without the need to click Space or Enter.

That is why I am confused, the way it looks as code, you should use enter to open and close stuff, but that isn’t the case, it interact as input radio :person_shrugging: .

Anyway, I will try to finish it, and this can come after it :+1:~~

Nvm, it was below my nose :rofl: Tabs Pattern | APG | WAI | W3C

1 Like