why use data-testids instead of ARIA?

[wildeyes]

why use data-testids instead of ARIA?

[davidcalhoun]

@wildeyes

The purposes behind them are different:

• data-testid is intended to be hooks for tests
• Aria attributes such as aria-label are intended to give documents meaning for screen readers.

If you want to also use aria attributes for test hooks, this means that when you decide to simply change the verbiage for a UI element, you would need to update your tests, which seems unexpected to me.

Because they have these different intentions I'd personally keep them separate. If you work on a team it's also very explicit that one is for tests and one is for screen readers. It's probably not intuitive or obvious to first-time viewers of your code that things like aria-label are also hooks for tests.

However it's not a hard-and-fast rule - if you decide you want to instead use aria-label to have double-purpose for both testing and screen readers, that's fine and eslint-plugin-test-selectors supports this by allowing you to specify the attribute you want to enforce with the testAttribute configuration:

{
  "rules": {
    "test-selectors/onChange": [
      "warn",
      "always",
      { "testAttribute": "aria-label" }
    ]
  }
}