Use .dataset instead of .getAttribute('data-FOO')

Context: !18305 (comment 232553467)

Currently, we use both .dataset and .getAttribute('data-*') when referencing HTML element data attributes. In the frontend call we agreed to use .dataset exclusively.

Example

Given <div data-foo="some value">Test</div> both div.dataset.foo and div.getAttribute('data-foo') equal the same thing.

Todos

• Add linting rule to enforce .dataset over .getAttribute
• Update references of .getAttribute to .dataset
• [-] Update frontend development guide (ignored, see #34689 (comment 935165095))

Notes

We use .getAttribute('data-*') 87 times in 48 files (including tests). We should probably update these in multiple small MRs instead of one giant one.

For the lint rule, use warning level until all files have been updated, then switch to error.