JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Undefined aria attribute tests</h1>

<p>Each example programmatically queries the IDL attribute for the relevant <code>aria-*</code> attribute, and spits out both the value and the type of the value in parentheses (e.g. string, number, object).</p>

<h2>String "undefined" values</h2>

<button aria-expanded="undefined" aria-pressed="undefined" data-results="results1" data-attrs="Expanded,Pressed">Undefined pressed and expanded</button>
<div id="results1" class="results">
  <h3>Mapped values</h3>
</div>

<div role="listbox">
  <button role="option" aria-selected="undefined" data-results="results2" data-attrs="Selected">Undefined selected in single-select listbox</button>
</div>
<div id="results2" class="results">
  <h3>Mapped values</h3>
</div>

<div role="listbox" aria-multiselectable="true">
  <button role="option" aria-selected="undefined" aria-checked="true" data-results="results3" data-attrs="Selected">Undefined selected in multiselect listbox with checked</button>
</div>
<div id="results3" class="results">
  <h3>Mapped values</h3>
</div>

<p aria-hidden="undefined" data-results="results4" data-attrs="Hidden">Undefined aria-hidden</p>
<div id="results4" class="results">
  <h3>Mapped values</h3>
</div>

<h2>Not-defined values</h2>

<button data-results="results5" data-attrs="Expanded,Pressed">Undefined pressed and expanded</button>
<div id="results5" class="results">
  <h3>Mapped values</h3>
</div>

<div role="listbox">
  <button role="option" data-results="results6" data-attrs="Selected">Undefined selected in single-select listbox</button>
</div>
<div id="results6" class="results">
  <h3>Mapped values</h3>
</div>

<div role="listbox" aria-multiselectable="true">
  <button role="option" aria-checked="true" data-results="results7" data-attrs="Selected">Undefined selected in multiselect listbox with checked</button>
</div>
<div id="results7" class="results">
  <h3>Mapped values</h3>
</div>

<p data-results="results8" data-attrs="Hidden">Undefined...

CSS

.results {
  padding: 1em;
  background: #eee;
  margin: 0.5em 0 2em;
}

.results h3 {
  margin: 0 0 0.5em;
}

.results ul {
  margin: 0;
}

JavaScript

const els = document.querySelectorAll('[data-results]');

// set programmatically set attrs
const programmaticallySetEls = document.querySelectorAll('.programmatic');
programmaticallySetEls.forEach((el) => {
	const attributes = el.dataset.attrs.split(',').map((attr) => `aria${attr}`);
  for (const attr of attributes) {
  	el[attr] = undefined;
  }
});

function getAttributeIdlValues(el) {
	const values = [];
	const attributes = el.dataset.attrs.split(',').map((attr) => `aria${attr}`);
  
  for (let attr of attributes) {
  	values.push({ key: attr, value: el[attr]});
  }
  
  return values;
}

function renderAttributeValues(attributeValues) {
	const result = document.createElement('ul');
	for (const attribute of attributeValues) {
  	const listItem = document.createElement('li');
    listItem.innerText = `${attribute.key}: ${attribute.value} (${typeof attribute.value})`;
    result.appendChild(listItem);
  }
  
  return result;
}

els.forEach((el) => {
	const attributeValues = getAttributeIdlValues(el);
  console.log('attributeValues:', attributeValues);
  const result = renderAttributeValues(attributeValues);
  
  const resultsId = el.dataset.results;
  const resultContainer = resultsId && document.getElementById(resultsId);
  if (resultContainer) {
  	resultContainer.appendChild(result);
  }
});