Skip to content

Accessibility & consistency polish for Tabs demos #17

Description

@Jettonn

Follow-up to #14 (merged). CodeRabbit raised several non-blocking suggestions on the Tabs demo components. Capturing them here so they aren't lost:

Accessibility

  • Tab15.vue — icon-only TabsTriggers have an aria-hidden icon and no visible text, so screen readers get no accessible name. Add aria-label to each.
  • Tab14.vue — add aria-label to icon/badge triggers for clarity.
  • Tab11.vueoverflow-hidden on the active trigger can clip the focus-visible ring; remove it or add an inner focus ring.

Consistency / style

  • Tab01.vue uses default-value (kebab) while others use defaultValue (camel). Normalize across all demos.
  • Tab05.vue (and similar) repeat long identical class strings on each trigger; optionally extract to a constant.

Verified non-issues (no action):

  • Tab12.vue icon imports (HouseIcon, ChartLine, …) — CodeRabbit flagged these as non-existent, but vue-tsc type-check passes, confirming they are valid exports in lucide-vue-next 0.454. No change needed.
  • src/views/Tabs.vue 'React' → 'Vue' description — already fixed in feat: add tabs components #14.

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

    Issue actions