Skip to content

Suggestion: use Tailwind's focus variant instead of a .focusable class #2

@missmatsuko

Description

@missmatsuko
<!-- Instead of this... -->
<p class="visuallyhidden focusable">I'm visible on focus!</p>

<!-- Maybe this? -->
<p class="visuallyhidden focus:not-visuallyhidden">I'm visible on focus!</p>

Couple reasons:

  • More consistent with Tailwind's built-in utilities
  • Some projects might not need any visuallyhidden elements to become visible on focus
  • Responsive variants could switch between visuallyhidden and not-visuallyhidden:
<p class="visuallyhidden lg:not-visuallyhidden">
On mobile, I'm visually hidden. On larger screens, I'm visible.
</p>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions