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

[crotru]

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]

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" test — read 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]

cool :)

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