dfkaye/html-details-disclosure-element-fallback.html

## html-details-disclosure-element-fallback.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy" content="
    style-src 'nonce-Saik14t9sjq24' https:;
    script-src 'unsafe-inline' https: 'nonce-Saik14t9sjq24' 'strict-dynamic';">
  <title>HTML details disclosure element fallback</title>
  <style nonce="Saik14t9sjq24">
    * {
      box-sizing: border-box;
    }

    section {
      margin: 1em 0;
    }

    /* https://github.com/javan/details-element-polyfill/blob/master/src/styles.js */

    [data-tagname="details"] /* details */,
    summary {
      display: block;
      outline: 1px solid;
    }

    summary {
      outline-color: goldenrod;
      padding: 1em;
      margin-left: -1em;
      cursor: default;
    }

    summary:focus [aria-label] {
      outline: 1px dashed black;
    }

    [data-tagname="details"] /* details */ {
      outline-color: goldenrod;
      margin: 0;
      padding: 0 0 0 1em;
      }

    [data-tagname="details"][aria-expanded="true"] > summary {
      background: goldenrod;
    }

    [data-tagname="details"]:not([aria-expanded="true"]) {
      background: aqua;
      overflow: hidden;
      /* height: 3.15em; */
    }

    [data-tagname="details"]:not([aria-expanded="true"]) > *:not(summary)
    /* details:not([open]) > *:not(summary) */ {
      display: none;
    }

    summary::before {
      /* content: "►"; */
      content: "\23F5";
      margin-right: 0.25em;
      /* font-size: 0.6rem; */
      /* cursor: default; */
    }

    [data-tagname="details"][aria-expanded="true"] > summary::before
    /* details[open] > summary::before */ {
      /* content: "▼"; */
      content: "\23F7";
    }
  </style>
  <script nonce="Saik14t9sjq24">
  document.addEventListener('DOMContentLoaded', function() {

    function updateDetails(details, summary, expanded) {
      // Use clientHeight pixels to support IE correctly.
      // getComputedStyle() and element.currentStyle don't quite work for IE.
      details.style.height = /true/.test(expanded)
        ? 'auto' : summary.clientHeight + 'px';
    }

    function handleUpdates(details, summary) {
      var attribute = details.getAttribute('aria-expanded');
      var expanded = !/true/.test(attribute);

      details.setAttribute('aria-expanded', expanded);
      synchronize(details, summary);
    }

    function updateSummary(summary, expanded) {
      summary.querySelector('[aria-label]').textContent = /true/.test(expanded)
        ? 'expanded' : 'collapsed';
    }

    function synchronize(details, summary) {
      // synchronize height and text
      var expanded = details.getAttribute('aria-expanded');

      updateSummary(summary, expanded);
      updateDetails(details, summary, expanded);
    }

    function supports(type) {
      return !({}).toString
        .call(document.createElement(type))
        .match(/HTMLUnknownElement/i);
    }

    console.info('supports details element?', supports('details'));

    [].slice.call(document.querySelectorAll('[data-tagname="details"]')).forEach(function(details) {
      [].slice.call(details.querySelectorAll('summary')).forEach(function(summary) {
        synchronize(details, summary);

        summary.addEventListener('click', function() {
          handleUpdates(details, summary)
        });

        summary.addEventListener('keydown', function(e) {
          /^(13|32)$/.test(e.keyCode) && (handleUpdates(details, summary));
        });
      });
    });
  });
  </script>
</head>
<body>
  <main>
    <section>
      <h1>&lt;details&gt; disclosure element fallback</h1>
      <p>&lt;div&gt; to emulate details in non-supporting browsers</p>
      <p>
        handle click and keydown events on summary elements, toggle the
        `aria-expanded` attribute on parent
      </p>
      <p>
        set overflow:hidden on collapsed details; set height to summary's
        clientHeight
      </p>
      <cite>
        https://www.scottohara.me/blog/2018/09/03/details-and-summary.html
      </cite>

      <section>
        <h2>open|close on click, or Enter or Space keydown events.</h2>

        <div aria-expanded="false" data-tagname="details">
          <summary tabindex="0" role="button">
            <span aria-label>collapsed</span>
          </summary>
          <ul>
            <li>list-item content</li>
          </ul>
          text node content
        </div>

        <div aria-expanded="true" data-tagname="details">
          <summary tabindex="0" role="button">
            <span aria-label>expanded</span>
          </summary>
          <ul>
            <li>list-item content</li>
          </ul>
          text node content
        </div>
      </section>
    </section>

  </main>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Security-Policy" content="
	style-src 'nonce-Saik14t9sjq24' https:;
	script-src 'unsafe-inline' https: 'nonce-Saik14t9sjq24' 'strict-dynamic';">
	<title>HTML details disclosure element fallback</title>
	<style nonce="Saik14t9sjq24">
	* {
	box-sizing: border-box;
	}

	section {
	margin: 1em 0;
	}

	/* https://github.com/javan/details-element-polyfill/blob/master/src/styles.js */

	[data-tagname="details"] /* details */,
	summary {
	display: block;
	outline: 1px solid;
	}

	summary {
	outline-color: goldenrod;
	padding: 1em;
	margin-left: -1em;
	cursor: default;
	}

	summary:focus [aria-label] {
	outline: 1px dashed black;
	}

	[data-tagname="details"] /* details */ {
	outline-color: goldenrod;
	margin: 0;
	padding: 0 0 0 1em;
	}

	[data-tagname="details"][aria-expanded="true"] > summary {
	background: goldenrod;
	}

	[data-tagname="details"]:not([aria-expanded="true"]) {
	background: aqua;
	overflow: hidden;
	/* height: 3.15em; */
	}

	[data-tagname="details"]:not([aria-expanded="true"]) > *:not(summary)
	/* details:not([open]) > :not(summary) / {
	display: none;
	}

	summary::before {
	/* content: "►"; */
	content: "\23F5";
	margin-right: 0.25em;
	/* font-size: 0.6rem; */
	/* cursor: default; */
	}

	[data-tagname="details"][aria-expanded="true"] > summary::before
	/* details[open] > summary::before */ {
	/* content: "▼"; */
	content: "\23F7";
	}
	</style>
	<script nonce="Saik14t9sjq24">
	document.addEventListener('DOMContentLoaded', function() {

	function updateDetails(details, summary, expanded) {
	// Use clientHeight pixels to support IE correctly.
	// getComputedStyle() and element.currentStyle don't quite work for IE.
	details.style.height = /true/.test(expanded)
	? 'auto' : summary.clientHeight + 'px';
	}

	function handleUpdates(details, summary) {
	var attribute = details.getAttribute('aria-expanded');
	var expanded = !/true/.test(attribute);

	details.setAttribute('aria-expanded', expanded);
	synchronize(details, summary);
	}

	function updateSummary(summary, expanded) {
	summary.querySelector('[aria-label]').textContent = /true/.test(expanded)
	? 'expanded' : 'collapsed';
	}

	function synchronize(details, summary) {
	// synchronize height and text
	var expanded = details.getAttribute('aria-expanded');

	updateSummary(summary, expanded);
	updateDetails(details, summary, expanded);
	}

	function supports(type) {
	return !({}).toString
	.call(document.createElement(type))
	.match(/HTMLUnknownElement/i);
	}

	console.info('supports details element?', supports('details'));

	[].slice.call(document.querySelectorAll('[data-tagname="details"]')).forEach(function(details) {
	[].slice.call(details.querySelectorAll('summary')).forEach(function(summary) {
	synchronize(details, summary);

	summary.addEventListener('click', function() {
	handleUpdates(details, summary)
	});

	summary.addEventListener('keydown', function(e) {
	/^(13\|32)$/.test(e.keyCode) && (handleUpdates(details, summary));
	});
	});
	});
	});
	</script>
	</head>
	<body>
	<main>
	<section>
	<h1><details> disclosure element fallback</h1>
	<p><div> to emulate details in non-supporting browsers</p>
	<p>
	handle click and keydown events on summary elements, toggle the
	`aria-expanded` attribute on parent
	</p>
	<p>
	set overflow:hidden on collapsed details; set height to summary's
	clientHeight
	</p>
	<cite>
	https://www.scottohara.me/blog/2018/09/03/details-and-summary.html
	</cite>

	<section>
	<h2>open\|close on click, or Enter or Space keydown events.</h2>

	<div aria-expanded="false" data-tagname="details">
	<summary tabindex="0" role="button">
	<span aria-label>collapsed</span>
	</summary>
	<ul>
	<li>list-item content</li>
	</ul>
	text node content
	</div>

	<div aria-expanded="true" data-tagname="details">
	<summary tabindex="0" role="button">
	<span aria-label>expanded</span>
	</summary>
	<ul>
	<li>list-item content</li>
	</ul>
	text node content
	</div>
	</section>
	</section>

	</main>
	</body>
	</html>