A11Y: make th keyboard accessible + aria attribs (PR #11895)

  • Make sortable th keyboard accessible with tabindex
  • Allow sortable th to be triggered by space/enter
  • Add scope, aria-role, aria-sort, aria-pressed to sortable th

GitHub

we font allow this pattern anymore. use => to keep upper scope.

can we use native js here ? Element.closest() - Référence Web API | MDN

you don’t need this anymore with fat arrow

slightly outside the scope of this PR, but I think we should stop using keyCode and use code. So not sure we should keep introducing this kind of code.

See:

why do we need an array here ?

same here why an array? Im missing something I guess.

should we support “none” when !this.isSorting ?

nah you’re not missing anything, I copied some similar code and didn’t think about it enough.

sure, added it

I tried using e.target.closest(sel) here instead and it didn’t end up working… I must be missing something?

it’s possible behavior is slightly different

I think you just use computed property and:

ariaPressed: and("sortable", "iSorting")

https://api.emberjs.com/ember/release/functions/@ember%2Fobject%2Fcomputed/and

I’m probably missing something but that didn’t work for me

figured it out

This pull request introduces 1 alert when merging 1da70676fe0330e96411e6427e9ba70b2ee0d044 into c478ffc6620cdc83c2a7e830b05b7cb7354663f3 - view on LGTM.com

new alerts:

  • 1 for Overwritten property