<h1>Disability:IN Agenda Bookmarklet</h1>

<p>
  I had some issues using the <a href="https://disabilityin.org/2024conference/2024-conference-agenda/" target="_top">Disability:IN 2024 Conference Agenda</a> so I made a bookmarklet:
</p>

<p>
🔗 <strong><a href="javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('h3 > a{display:none !important}',0);b.insertRule('@keyframes Target{from{outline-offset:-.25em;outline-color:#00f;outline-width:0.1em}to{outline-offset:2em;outline-color:transparent;outline-width:1em}}',0);b.insertRule(':target{outline-width:0.2em;outline-style:solid;outline-color:#00f}',0);b.insertRule('@media screen and (prefers-reduced-motion: no-preference){:target{outline-width:0;animation:Target 1s ease-out 3}}',0);b.insertRule('.fusion-is-sticky .fusion-header-v1 .fusion-header{position:unset}',0);b.insertRule('div[id^=panel].fusion-panel.panel-default::before{content:\'#\' attr(id);display:inline-block;margin-top:2em}',0);b.insertRule('a[aria-expanded]{line-height:1.25 !important}',0);const h3=document.querySelectorAll('.sticky>h3');h3.forEach(h=>{const h2=document.createElement('h2');h2.innerHTML=h.innerText;h.replaceWith(h2)});})()">Fix Disability:IN Agenda</a></strong>
</p>

<p>
  I made this into a post on my site so I could embed videos and images showing the effect of the changes: <a href="https://adrianroselli.com/2024/06/disabilityin-2024-agenda-bookmarklet.html" target="_top"><cite>Disability:IN 2024 Agenda Bookmarklet</cite></a>
</p>

<h2>Fixes</h2>

<ol>
  <li>Removes empty trigger link before each session, which cuts tab-stops in half and undoes a 4.1.2 violation for a disclosure trigger with no accName.</li>
  <li>Makes the sticky header unsticky, reducing some hassle for my zoomed viewport with panels open.</li>
  <li>Loosens up the leading a tiny bit in the session names / headings and adds a bit of space above each.</li>
  <li>Because each session has an <code>id</code> and I want to link to specific sessions, I added a <code>:target</code> style to make it more obvious which one I linked. The page uses some scroll-linked animations, so this will be hit-and/or-miss.</li>
  <li>For those who also link to session anchors, I add the <code>id</code> value above each session. Sadly, it is not selectable since it uses CSS generated content. I opted not to add links since this page is a tab-stop forest.</li>
  <li>Converts all the date headings from <code>&lt;h3&gt;</code> to <code>&lt;h2&gt;</code> for a more reasonable heading structure (and easier navigation for SR users).</li>
</ol>

<p>
  The disclosure triggers as links bother me, but probably not worth converting to buttons. While that would make it more appealing to then add anchor links, keyboard users would be back up to too many tab-stops even if screen reader users could navigate by buttons alone.
</p>

<h2>Code</h2>

<p>
  Script to change date <code>&lt;h3&gt;</code>s to <code>&lt;h2&gt;</code>:
</p>

<pre><code>const h3 = document.querySelectorAll(".sticky&gt;h3");
h3.forEach(h =&gt; {
	const h2 = document.createElement("h2");
	h2.innerHTML = h.innerText;
	h.replaceWith(h2)
})</code></pre>

<p>
  These are the style changes it makes:
</p>

<pre><code>/* Removes unnamed tab-stop / redundant disclosure trigger */
h3 &gt; a {
	display: none !important;
}

/* Style an anchor when it has been navigated */
@keyframes Target {	
	from { outline-offset: -.25em; outline-color: #00f; outline-width: .1em; }
	to { outline-offset: 2em; outline-color: transparent; outline-width: 1em; }
}
:target {
	outline-width: .2em;
	outline-style: solid;
	outline-color: #00f;
}
@media screen and (prefers-reduced-motion: no-preference) {
	:target {
		outline-width: 0;
		animation: Target 1s ease-out 3;
	}
}

/* Get the sticky header out of the way */
.fusion-is-sticky .fusion-header-v1 .fusion-header {
	position: unset;
}

/* Make an anchor option visible, but sadly not copyable */
div[id^=panel].fusion-panel.panel-default::before {
	content: '#' attr(id);
	display: inline-block;
	margin-top: 2em;
}

/* Loosen up the leading for easier reading */
a[aria-expanded] {
	line-height: 1.25 !important;;
}</code></pre>