Skip to content

Instantly share code, notes, and snippets.

@adomasven

adomasven/testTree.html

Created August 9, 2022 10:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adomasven/502ef85597cb788e21cb0114399380f8 to your computer and use it in GitHub Desktop.
Save adomasven/502ef85597cb788e21cb0114399380f8 to your computer and use it in GitHub Desktop.
Download ZIP
Wooshy Inaccessible Tree in Firefox
Raw
testTree.html
<html>
<body>
<div role="tree"
aria-label="Collections" aria-activedescendant="collection-tree-row-0" style="position: relative;">
<div class="row"
style="padding-inline-start: 0px; height: 20px; line-height: 20px; top: 0px; position: absolute;"
aria-level="1" aria-setsize="20" aria-posinset="1" aria-expanded="true" role="treeitem" draggable="true"
data-event-handlers-attached="true" id="collection-tree-row-0" aria-selected="true"><span
class="cell label primary"><span class="icon icon-twisty twisty open" style="pointer-events: auto;"><svg
width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><polyline
points="3 4 12 4 7.5 12"/></svg></span><span
class="icon icon-treesourcelibrary icon-bg cell-icon"></span><span
class="cell-text">My Library</span></span></div>
<div class="row"
style="padding-inline-start: 15px; height: 20px; line-height: 20px; top: 20px; position: absolute;"
aria-level="2" role="treeitem" draggable="true" data-event-handlers-attached="true"
id="collection-tree-row-1"><span class="cell label primary"><span class="spacer-twisty"></span><span
class="icon icon-treesourcecollection icon-bg cell-icon"></span><span class="cell-text">0test</span></span>
</div>
<div class="row"
style="padding-inline-start: 15px; height: 20px; line-height: 20px; top: 40px; position: absolute;"
aria-level="2" aria-expanded="true" role="treeitem" draggable="true"
data-event-handlers-attached="true" id="collection-tree-row-2"><span class="cell label primary"><span
class="icon icon-twisty twisty open" style="pointer-events: auto;"><svg width="16" height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"><polyline
points="3 4 12 4 7.5 12"/></svg></span><span
class="icon icon-treesourcecollection icon-bg cell-icon"></span><span
class="cell-text">Collection</span></span></div>
<div class="row"
style="padding-inline-start: 30px; height: 20px; line-height: 20px; top: 60px; position: absolute;"
aria-level="3" aria-expanded="false" role="treeitem" draggable="true"
data-event-handlers-attached="true" id="collection-tree-row-3"><span class="cell label primary"><span
class="icon icon-twisty twisty" style="pointer-events: auto;"><svg width="16" height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"><polyline
points="3 4 12 4 7.5 12"/></svg></span><span
class="icon icon-treesourcecollection icon-bg cell-icon"></span><span class="cell-text">SubCollection</span></span>
</div>
<div class="row"
style="padding-inline-start: 15px; height: 20px; line-height: 20px; top: 80px; position: absolute;"
aria-level="2" role="treeitem" draggable="true" data-event-handlers-attached="true"
id="collection-tree-row-4"><span class="cell label primary"><span class="spacer-twisty"></span><span
class="icon icon-treesourcecollection icon-bg cell-icon"></span><span
class="cell-text">Heading 1</span></span></div>
<div class="row"
style="padding-inline-start: 15px; height: 20px; line-height: 20px; top: 100px; position: absolute;"
aria-level="2" aria-expanded="false" role="treeitem" draggable="true"
data-event-handlers-attached="true" id="collection-tree-row-5"><span class="cell label primary"><span
class="icon icon-twisty twisty" style="pointer-events: auto;"><svg width="16" height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"><polyline
points="3 4 12 4 7.5 12"/></svg></span><span
class="icon icon-treesourcecollection icon-bg cell-icon"></span><span
class="cell-text">Random</span></span></div>
<div class="row"
style="padding-inline-start: 15px; height: 20px; line-height: 20px; top: 120px; position: absolute;"
aria-level="2" role="treeitem" draggable="true" data-event-handlers-attached="true"
id="collection-tree-row-6"><span class="cell label primary"><span class="spacer-twisty"></span><span
class="icon icon-treesourcecollection icon-bg cell-icon"></span><span class="cell-text">test</span></span>
</div>
<div class="row"
style="padding-inline-start: 15px; height: 20px; line-height: 20px; top: 140px; position: absolute;"
aria-level="2" role="treeitem" draggable="true" data-event-handlers-attached="true"
id="collection-tree-row-7"><span class="cell label primary"><span class="spacer-twisty"></span><span
class="icon icon-treesourcesearch icon-bg cell-icon"></span><span
class="cell-text">Test</span></span></div>
<div class="row"
style="padding-inline-start: 15px; height: 20px; line-height: 20px; top: 160px; position: absolute;"
aria-level="2" role="treeitem" draggable="true" data-event-handlers-attached="true"
id="collection-tree-row-8"><span class="cell label primary"><span class="spacer-twisty"></span><span
class="icon icon-treeitemjournalarticle icon-bg cell-icon"></span><span
class="cell-text">My Publications</span></span>
</div>
<div class="row"
style="padding-inline-start: 15px; height: 20px; line-height: 20px; top: 180px; position: absolute;"
aria-level="2" role="treeitem" draggable="true" data-event-handlers-attached="true"
id="collection-tree-row-9"><span class="cell label primary"><span class="spacer-twisty"></span><span
class="icon icon-treesourceduplicates icon-bg cell-icon"></span><span
class="cell-text">Duplicate Items</span></span>
</div>
<div class="row"
style="padding-inline-start: 15px; height: 20px; line-height: 20px; top: 200px; position: absolute;"
aria-level="2" role="treeitem" draggable="true" data-event-handlers-attached="true"
id="collection-tree-row-10"><span class="cell label primary"><span class="spacer-twisty"></span><span
class="icon icon-treesourceunfiled icon-bg cell-icon"></span><span
class="cell-text">Unfiled Items</span></span></div>
<div class="row"
style="padding-inline-start: 15px; height: 20px; line-height: 20px; top: 220px; position: absolute;"
aria-level="2" role="treeitem" draggable="true" data-event-handlers-attached="true"
id="collection-tree-row-11"><span class="cell label primary"><span class="spacer-twisty"></span><span
class="icon icon-treesourcetrash icon-bg cell-icon"></span><span
class="cell-text">Trash</span></span></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment