Skip to content

This is not accessible #3

Open
Open
@maxshuty

Description

@maxshuty

First off thank you, I like the way you approached creating tabs, however there are a couple issues.

This tabs component is not accessible at all. Here is a fiddle from W3 which can help you to make this accessible. If you're open to me submitting a PR addressing these issues I would be happy to do that too, however, this guide on LearnVue.co also needs to be updated.

Additionally in your example on LearnVue you are missing a comma in this code snippet that prevents it from compiling (this is in a few sections on the tutorial):

<script>
  export default {
    data () {
      return {
        selectedIndex: 0 // <-- missing comma
        tabs: [],        // all of the tabs
      }
    }
  }
</script>

Another issue is difficult to notice on the surface, however, in the Tab.vue you have the title prop as not required with a default title of 'Tab' and then in the Tabs.vue you have a v-for with the key set to the title like this: :key='tab.title'. Obviously the tab title is not guaranteed to be unique. An easy fix is to make it a required prop, but even then it's still not guaranteed, though I'm struggling to think of a real life scenario where you would have two or more identically named tabs. You could also just use something like :key="`tab-${index}`".

Finally you may want to consider scoping your CSS and talking about the benefits of doing that. In this scenario if someone has an existing <ul><li class="tab"></li></ul> in their code then it will have conflicts, but this isn't necessary as it's more of an opinion based thing.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @maxshuty

        Issue actions

          This is not accessible · Issue #3 · mattmaribojoc/learn-vue-tab