Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warn for aria-hidden and presentation role statements on focusable elements #415

Open
crotru opened this issue Jan 21, 2021 · 2 comments
Open

Comments

@crotru
Copy link

crotru commented Jan 21, 2021

Fourth Rule of ARIA Use
states that we cant use role="presentation" nor aria-hidden="true" on focusable dom elements nor on dom elements that contain focusable dom elements

Thus for exemple, these are wrong : ...

<button aria-hidden="true">button</button>
<div role="presentation">
  <button>button</button>
</div>

...while these are right :

<button aria-hidden="true" disabled>button</button>
<div role="presentation">
  <button tabindex="-1">button</button>
</div>

So this could be something to warn about


If relevant 🙂
Can we imagine implementing this with a default error on "flat" focus elements,
and then overriding it for those disabled state exceptions ?

$selectors: "a, button, input, select, textarea";
$hidden-as-selectors: "[aria-hidden=true], [role='presentation']";
$hidden-as-state: "&[aria-hidden=true], &[role='presentation']";
$disablers: "&:disabled, &[tabindex='-1']";

@mixin ko() {
  color: red;
}
@mixin ok() {
  color: green;
}

// hidden focusable elements
#{$selectors} {
  #{$hidden-as-state} {
    @include ko;

    #{$disablers} {
      @include ok;
    }
  }
}

// focusable elements inside hidden elements
#{$hidden-as-selectors} {
  #{$selectors} {
    @include ko;

    #{$disablers} {
      @include ok;
    }
  }
}
@ffoodd
Copy link
Owner

ffoodd commented Jan 22, 2021

Hi, thanks for sharing!

This is really interesting indeed. I think the implementation could be simpler, mostly thanks to the existing %a11y-reset placeholder. Moreover we already have a list of interactive DOM elements as $interactive variable. What we're currently missing are disabled and hidden states.

It could work pretty much the same than "Nested interactive elements" testread the source. The said test might be improved, by the way.

Need to think a bit more, but the suggested test is a really good idea, thanks :)

@crotru
Copy link
Author

crotru commented Jan 22, 2021

cool :)

Actually I realise same check should also apply to any element having a non-negative tabindex
( [tabindex]:not([tabindex^="-"]) )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: To do
Development

No branches or pull requests

2 participants