Databases
StackOverflow2013
Postsdbo
POadd aria-expanded and tabindex values to parent based on current URL
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POadd aria-expanded and tabindex values to parent based on current URL
    primarykey
    data
    text
    <p>I'm creating a jQuery-powered, WAI-ARIA tree menu for a site that doesn't have any server-side capabilities. Because of this, my only way of changing the menu dynamically is to check the current URL and compare it against the current file. For a match, I need to do all of these things:</p> <ol> <li>Add a class of "current" to the <code>&lt;li&gt;</code> element that holds the <code>&lt;a&gt;</code> element that matches the current page's URL</li> <li>Add a class of "current" to the <code>&lt;li&gt;</code> element that holds the <code>&lt;ul&gt;</code> element that holds the <code>&lt;li&gt;</code> element that holds the <code>&lt;a&gt;</code> element that matches the current page's URL</li> <li>Set the <code>aria-expanded</code> attribute to <code>true</code> on the <code>&lt;li&gt;</code> element targeted in number 2 above</li> <li>Set the <code>tabindex</code> attribute to <code>0</code> on the child <code>&lt;a&gt;</code> element of the <code>&lt;li&gt;</code> element targeted in number 2 above (NOT the <code>&lt;a&gt;</code> that is actually the current page)</li> </ol> <p>Here's what the resulting HTML should look like (if "owls.html" is the current page):</p> <pre><code>&lt;nav id="nav-sub"&gt; &lt;ul role="tree"&gt; &lt;li role="treeitem" class="tree-parent current" aria-expanded="true"&gt;&lt;a href="" tabindex="0"&gt;Birds&lt;/a&gt; &lt;ul role="group"&gt; &lt;li role="treeitem"&gt;&lt;a href="ducks.html"&gt;Ducks&lt;/a&gt;&lt;/li&gt; &lt;li role="treeitem"&gt;&lt;a href="geese.html"&gt;Geese&lt;/a&gt;&lt;/li&gt; &lt;li role="treeitem" class="current"&gt;&lt;a href="owls.html"&gt;Owls&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li role="treeitem" class="tree-parent" aria-expanded="false"&gt;&lt;a href="" tabindex="-1"&gt;Cats&lt;/a&gt; &lt;ul role="group"&gt; &lt;li role="treeitem"&gt;&lt;a href="lions.html"&gt;Lions&lt;/a&gt;&lt;/li&gt; &lt;li role="treeitem"&gt;&lt;a href="tigers.html"&gt;Tigers&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; </code></pre> <p>I've gotten this bit of jQuery to do the trick for items 1 through 3:</p> <pre><code>$(document).ready( function () { var pathname = (window.location.pathname.match(/[^\/]+$/)[0]); $("#nav-sub li a[href='" + pathname + "']").parents(".tree-parent").attr('aria-expanded', 'true'); $("#nav-sub li a[href='" + pathname + "']").parents("li").addClass("current"); }); </code></pre> <p>However, I'm a JavaScript/jQuery newbie, so I'm not sure if this is the best or most efficient way to do what I want. If anyone can suggest a better way to approach it, I'd appreciate it!</p> <p>But I don't know how to achieve item 4, adding the tabindex value to the first-level <code>&lt;a&gt;</code> element, because it's not actually a parent/ancestor of the current page's <code>&lt;a&gt;</code> element. What can I add to my script to target this <code>&lt;a&gt;</code> element and change its tabindex value from -1 to 0?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USzomigi
    1. USzomigi
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload