nolanlawson · March 10, 2022 00:05
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Test ARIA reflection</title>
 </head>
 <body>
 <h1>Test ARIA reflection</h1>
 <div id="foo"></div>
 <table>
    <thead>
        <tr>
            <th>Test</th>
            <th>Works?</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
 </table>
 <script type="module">
    const tbody = document.querySelector('tbody')

    const AriaPropertyNames = [
      'ariaActiveDescendant',
      'ariaAtomic',
      'ariaAutoComplete',
      'ariaBusy',
      'ariaChecked',
      'ariaColCount',
      'ariaColIndex',
      'ariaColSpan',
      'ariaControls',
      'ariaCurrent',
      'ariaDescribedBy',
      'ariaDetails',
      'ariaDisabled',
      'ariaErrorMessage',
      'ariaExpanded',
      'ariaFlowTo',
      'ariaHasPopup',
      'ariaHidden',
      'ariaInvalid',
      'ariaKeyShortcuts',
      'ariaLabel',
      'ariaLabelledBy',
      'ariaLevel',
      'ariaLive',
      'ariaModal',
      'ariaMultiLine',
      'ariaMultiSelectable',
      'ariaOrientation',
      'ariaOwns',
      'ariaPlaceholder',
      'ariaPosInSet',
      'ariaPressed',
      'ariaReadOnly',
      'ariaRelevant',
      'ariaRequired',
      'ariaRoleDescription',
      'ariaRowCount',
      'ariaRowIndex',
      'ariaRowSpan',
      'ariaSelected',
      'ariaSetSize',
      'ariaSort',
      'ariaValueMax',
      'ariaValueMin',
      'ariaValueNow',
      'ariaValueText',
      'role',
    ];

    const { AriaAttrNameToPropNameMap, AriaPropNameToAttrNameMap } = (() => {
      const AriaAttrNameToPropNameMap = Object.create(null);
      const AriaPropNameToAttrNameMap = Object.create(null);

      // Synthetic creation of all AOM property descriptors for Custom Elements
      Array.prototype.forEach.call(AriaPropertyNames, (propName) => {
        const attrName = String.prototype.toLowerCase.call(
          String.prototype.replace.call(propName, /^aria/, () => 'aria-')
        );
        AriaAttrNameToPropNameMap[attrName] = propName;
        AriaPropNameToAttrNameMap[propName] = attrName;
      });

      return { AriaAttrNameToPropNameMap, AriaPropNameToAttrNameMap };
    })();

    function log(test, works) {
      const tr = document.createElement('tr')
      tr.innerHTML = `
        <td>${test}</td>
        <td>${works ? '✅' : '❌'}</td>
      `
      tbody.appendChild(tr)
    }

    for (const [attr, prop] of Object.entries(AriaAttrNameToPropNameMap)) {
      const div = document.createElement('div')
      document.body.appendChild(div)
      div.setAttribute(attr, 'foo')
      const works = div[prop] === 'foo'
      document.body.removeChild(div)
      log(`${attr} -> ${prop}`, works)
    }

    for (const [prop, attr] of Object.entries(AriaPropNameToAttrNameMap)) {
      const div = document.createElement('div')
      document.body.appendChild(div)
      div[prop] = 'foo'
      const works = div.getAttribute(attr) === 'foo'
      document.body.removeChild(div)
      log(`${prop} -> ${attr}`, works)
    }

 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Test ARIA reflection</title>
	</head>
	<body>
	<h1>Test ARIA reflection</h1>
	<div id="foo"></div>
	<table>
	<thead>
	<tr>
	<th>Test</th>
	<th>Works?</th>
	</tr>
	</thead>
	<tbody>

	</tbody>
	</table>
	<script type="module">
	const tbody = document.querySelector('tbody')

	const AriaPropertyNames = [
	'ariaActiveDescendant',
	'ariaAtomic',
	'ariaAutoComplete',
	'ariaBusy',
	'ariaChecked',
	'ariaColCount',
	'ariaColIndex',
	'ariaColSpan',
	'ariaControls',
	'ariaCurrent',
	'ariaDescribedBy',
	'ariaDetails',
	'ariaDisabled',
	'ariaErrorMessage',
	'ariaExpanded',
	'ariaFlowTo',
	'ariaHasPopup',
	'ariaHidden',
	'ariaInvalid',
	'ariaKeyShortcuts',
	'ariaLabel',
	'ariaLabelledBy',
	'ariaLevel',
	'ariaLive',
	'ariaModal',
	'ariaMultiLine',
	'ariaMultiSelectable',
	'ariaOrientation',
	'ariaOwns',
	'ariaPlaceholder',
	'ariaPosInSet',
	'ariaPressed',
	'ariaReadOnly',
	'ariaRelevant',
	'ariaRequired',
	'ariaRoleDescription',
	'ariaRowCount',
	'ariaRowIndex',
	'ariaRowSpan',
	'ariaSelected',
	'ariaSetSize',
	'ariaSort',
	'ariaValueMax',
	'ariaValueMin',
	'ariaValueNow',
	'ariaValueText',
	'role',
	];

	const { AriaAttrNameToPropNameMap, AriaPropNameToAttrNameMap } = (() => {
	const AriaAttrNameToPropNameMap = Object.create(null);
	const AriaPropNameToAttrNameMap = Object.create(null);

	// Synthetic creation of all AOM property descriptors for Custom Elements
	Array.prototype.forEach.call(AriaPropertyNames, (propName) => {
	const attrName = String.prototype.toLowerCase.call(
	String.prototype.replace.call(propName, /^aria/, () => 'aria-')
	);
	AriaAttrNameToPropNameMap[attrName] = propName;
	AriaPropNameToAttrNameMap[propName] = attrName;
	});

	return { AriaAttrNameToPropNameMap, AriaPropNameToAttrNameMap };
	})();

	function log(test, works) {
	const tr = document.createElement('tr')
	tr.innerHTML = `
	<td>${test}</td>
	<td>${works ? '✅' : '❌'}</td>
	`
	tbody.appendChild(tr)
	}

	for (const [attr, prop] of Object.entries(AriaAttrNameToPropNameMap)) {
	const div = document.createElement('div')
	document.body.appendChild(div)
	div.setAttribute(attr, 'foo')
	const works = div[prop] === 'foo'
	document.body.removeChild(div)
	log(`${attr} -> ${prop}`, works)
	}

	for (const [prop, attr] of Object.entries(AriaPropNameToAttrNameMap)) {
	const div = document.createElement('div')
	document.body.appendChild(div)
	div[prop] = 'foo'
	const works = div.getAttribute(attr) === 'foo'
	document.body.removeChild(div)
	log(`${prop} -> ${attr}`, works)
	}

	</script>

	</body>
	</html>