Develop Reference

Interact with buttons inside of an aria list-item

In our current frontend we want to add accessibility improvements. The current challenge is to make the list of items including additional actions more accessible. Our document structure is based on the following idea:
<div class="products-list" role="list">
<div class="product" role="listitem">
<div class="product-name">Product A</div>
<div class="product-actions>
<div class="action-icon" role="button">First</div>
<div class="action-icon" role="button">Second</div>
</div>
</div>
</div>
At the moment it's possible to select the list-items, however the a11y border highlights the entire list item (div.product). Hence it's not possible to focus the buttons. Defining a sublist using list/listitem roles for div.product-actions was not of benefit. Do you have any ideas how to achive this?

Limit results in Handlebars #each without using extra helpers

So, I know I would be able to solve this issue IF I were able to implement extra handlebars helpers, but that is not an option.
We are using a third-party back end system for our Help Desk [ZenDesk], which uses handlebars as its general markup for dynamic content. I have a section on the home page of our Help Center website that I want to list the first 5-6 FAQ articles, and then a SEE MORE link underneath for the user to see the rest of the articles in that particular section.
Out of the box, they allow us to use the IF and IS conditional, but no comparative aside from TRUE or FALSE, no greater than, no less than, no greater or equal than, etc. I wrote up a simple helper that would allow for this, but no matter where I put it in the templates available to us, it would always generate an error that the function was not valid.
After discussing this with this application's support team, I was informed that NO CUSTOM HELPERS ARE ALLOWED TO BE USED. I have to rely SOLELY on HTML, CSS and JAVASCRIPT/JQUERY to find the solution.
So.... Does anybody know of a possible solution of how I can cap off a handlebars #each loop at 5 iterations by using CSS or JAVASCRIPT?
UPDATE: 09/05/2018:
Here's the #each loop I am using for the section "Frequently Asked Questions"
<h2>Frequently Asked Questions</h2>
<section class="section faq-base">
<section class="categories">
<ul class="">
{{#each categories}}
{{#if ../has_multiple_categories}}
<li class="">
<a href='{{url}}' class="">
<h4 class="blocks-item-title">{{name}}</h4>
</a>
</li>
{{else}}
{{#each sections}}
{{#is id //ID FOR FREQUENTLY ASKED QUESTIONS SECTION}}
<div class="accordion homeFAQ" id="homeFAQ">
{{#each articles}}
<div class="card">
<div class="card-header" id="heading{{#index}}">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse{{#index}}" aria-expanded="true" aria-controls="collapse{{#index}}">
{{title}}
</button>
</h5>
</div>
<div id="collapse{{#index}}" class="collapse" aria-labelledby="heading{{#index}}" data-parent="#homeFAQ">
<div class="card-body">
{{body}}
</div>
</div>
</div>
{{/each}}
<div class="card">
<div class="card-header">
<h5 class="mb-0">
...SEE MORE
</h5>
</div>
</div>
</div>
{{/is}}
{{/each}}
{{/if}}
{{/each}}
</ul>
</section>
</section>
As you can see from the above code, I am inserting the FAQ into a Bootstrap Accordion, and at the end is the ...SEE MORE button

Could you add a display:none to the articles by default, then use JS to count the number of articles on the page, based on the class (or something) of the articles on the page, and then use JS again to remove the display:none from the first 5-6 articles? May not be the most elegant approach but should be one way to accomplish what you are looking for.

Floating multiple divs down

I have a menu that becomes a dropdown when it is in mobile, and floats right when it is desktop, therefore all my divs are reversed in order since float right wouldn't work otherwise
<div class="menu active">
<div class="dropdown-content">
<div class="menu-item whitelist">
Join Whitelist
</div>
<div class="menu-item">
FAQ
</div>
<div class="menu-item">
Team
</div>
<div class="menu-item">
Token
</div>
<div class="menu-item">
About
</div>
</div>
<div class="dropdown-btn">
<a class="dropdown" href="javascript:void(0)">☰</a>
</div>
</div>
my question is how can I make then "float" downwards in my dropdown menu so they are in the right order? Or is it better to change how they act when it's in desktop mode?

You probably want them in the correct order to begin with, then use display:inline-block to make them all go on a single line for desktop.
Hard to tell without seeing any css or design, but that sounds reasonable.

Simple HTML DOM Parser - trigger click

Hi i'm having below scenario,
Fetching products from other 3rd party website,
Their product page having 3 different tabs and their default html structure is like this,
<ul>
<li class="active">description</li>
<li>Spec</li>
<li>Gallery</li>
<ul>
<div>
<div class="description">product descriptions goes here .... </div>
<div class="spec"></div>
<div class="gallery"></div>
</div>
Is i click on second tab (spec tab) then the html structure is (contents adding dynamically),
<ul>
<li class="active">description</li>
<li>Spec</li>
<li>Gallery</li>
<ul>
<div>
<div class="description">product descriptions goes here .... </div>
<div class="spec"> Specs goes here </div>
<div class="gallery"></div>
</div>
Because of the contents adding dynamically according to tab selection, i cant able to fetch complete contents. Is there any way to click other too and get all contents ?
Did anyone know how to solve this ?

Not sure what are you asking here. but may be worth a try :
var tabs = document.getElementsByTagName("li");
for (var i = 0, x; x = tabs[i++];)
x.click();

jquery quicksearch element to search not working as expected

I'm using a jquery plugin called quicksearch for filtering a list of comments.
Here is a snippet from the markup:
<ol class="commentlist">
<li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="li-comment-9">
<article id="comment-9" class="comment">
<div class="comment-content">
<p><span class="ecf-field ecf-field-1">
<strong class="ecf-question">I CHOOSE :</strong><span class="ecf-answer">HTML5</span>
</span></p>
<p>I agree with HTML 5</p>
</div>
</article><!-- #comment-## -->
</li><!-- #comment-## -->
What I want is to search by this <span class="ecf-answer">HTML5</span> so, if the search query match HTML5 to display the <li>items which correspond with the search query.
The problem is that if I search for HTML5 is searching through the entire <li>item and not just through the <span class="ecf-answer">HTML5</span>
My question is how can I make it to search through this <span class="ecf-answer">HTML5</span> but still remove all the <li>item which are not corresponding ?
Here is a fiddle to have a better understanding of what I'm talking about.
Is this possible ?

In the code you've provided via JSFiddle, i saw that the cache var, that was the one responsible for being compared on the query, was being passed as the whole <li> inner-structure.
By editing the line# 134:
return e.strip_html(this.innerHTML);
to
return e.strip_html($(this).find(".ecf-answer").html());
...you are then telling the application to compare only the .efc-answer part of each item.
Here's the working fiddle http://jsfiddle.net/2QAdv/1/
However, there's another solution which is to provide to the quicksearch constructor, the selector value, as follows:
$("#id_search").quicksearch("ol li article ", {
noResults: '#noresults',
loader: 'span.loading',
selector: '.ecf-answer'
});
http://jsfiddle.net/2QAdv/2/
I hope this is what you're looking for.
Cheers :)