Add Aria IDL Interface support

Open ashleyryan opened this issue 3 years ago • 0 comments

Basic info:

jsdom does not support the Aria IDL interface for setting aria attributes and roles via properties instead of setAttribute.

https://wicg.github.io/aom/aria-reflection-explainer.html https://www.w3.org/TR/wai-aria-1.2/#idl-interface https://developer.mozilla.org/en-US/docs/Web/API/Element#properties_included_from_aria

Node.js version: 14.6.0
jsdom version: 19.0.0

Minimal reproduction case

https://stackblitz.com/edit/node-c6cnee?file=index.js

const { window } = new JSDOM(
  `
<!DOCTYPE html>
<html>
<head></head>
<body id="body">
  <span id="test">hello test</span>
  <script>
    document.getElementById('test').setAttribute('aria-label', 'My Aria Label');
    document.getElementById('test').ariaLabel='My Aria Label using a property';


    document.getElementById('test').setAttribute('role', 'button');
    document.getElementById('test').role='checkbox';
  </script>
</body>
</html>
`,
  { runScripts: 'dangerously' }
);

console.log(window.document.getElementById('test').outerHTML);

How does similar code behave in browsers?

In the latest Chrome and Safari, the ariaLabel and role are updated using the property.

https://stackblitz.com/edit/web-platform-bube3q

Jan 21 '22 17:01 ashleyryan