anvk / a11yaccordion Goto Github PK

Pass showOne as an argument to the accordeon to determine what is the behaviour of the accordeon.

Hi Alexey

Thank you for replying over on Twitter. I appreciate that.

Your plugin is fantastic, and I particularly like the built-in search functionality.

I was wondering if these three features could be added when you got the time?

1. Make the Show/Hide text replaceable with an icon (arrow up and arrow down). Preferred if the icon could be animated by rotation, so maybe add a class name or something to make this possible via CSS?
2. When the user uses searchAll to search through the closed tabs, it would be great if the tab that contains the search word automatically opens to show that the word is available inside the tab, not in the headline.
3. Related to (2): highlight the keyword in the search results. So the user would get instant feedback if the keyword is available in the heading, and also see the open panel if the keyword is available inside the panel.

Thank you for taking the time to consider this.

Hello. I wonder why there're no aria-labels, aria-expanded, hidden, roles and other things necessary according to WAG and other a11y standards.
So how comes it's accessible?

Hi,
I have an issue where the height of the accordion area is calculated by css before the A11lyaccordian expanded items have loaded. When the accordion then loads (expanded) it slides down over the footer, or if I open one of the accordion items it slides down over the footer. So the problem is that my css around the accordion isn't adjusting to the new heights given. esp on page load. Jquery accordion has an autoHeight: setting, does this have something similar?. When the browser window is moved the footer springs to the right place instantly, I'm sure this is Allyaccordion and not the surrounding css.
What I've noticed is that A11lyaccordian is giving the surrounding item a height before it is expanded.
Screen shot attached
Tnx Graham

Just by increasing border-radius the one can see that rounded corners do not really work. Some CSS tweaking required. Same behavior in Chrome and Mozilla

Here's my markup:

<div class="accordion pane">
<section>
<h2>
  Header #1
</h2>
<div>
  First row content
</div>
</section>
<section>
<h2>
  Header #2
</h2>
<div>
  Second row content
</div>
</section>
</div>

And my js:

var myAccordion = new A11yAccordion({
parentSelector: '.accordion',
AccordionItemSelector: 'section',
headerSelector: 'h2',
hiddenAreaSelector: 'div'

But that doesn't work. The only way it functions is if I add the "a11yAccordionItem" class to each section like so:

<section class="a11yAccordionItem">

And it has to be that specific class. Any other one won't work.

And although it's not a bug, it would be nice to have an option to have a certain section open on load, rather than having them all collapsed by default.

Tested on Firefox 38.0.1 Mac.

Is the recommended markup for the accordion a ul tag? I ask because obviously if you content area has a ul tag in it, they will be treated as sub lists and you will have to specially style there to look like top level and if they have nested ul them to sub list etc.

Try to find out if search inside of the hidden areas would make sense from user perspective.

Currently 2 of our test accordeons look the same in index.html
We need to style second accordeon differently. We could apply a totally different theme and change Headers and content of the collapsible areas compare to the initial accordeon.

Once search criteria is changed there should be ARIA live region which announces how many results are displayed out of Total in the accordeon for what Search criteria.

Possibly to create the following public functions:

collapse(rowIndex)
uncollapse(rowIndex)
toggle(rowIndex) - toggle between collapse and uncollapse
disable(rowIndex)
enable(rowIndex)
getEl(rowIndex) - returns jQuery element with a specific row within

Thanks for posting this accessible accordion. I've been testing it and it's working. I've even styled it to match our organizations look and feel without any problems. However, now that I've done my tests, I've attempted to apply with actual content.

I've been using Voiceover on a Mac to test and everything works fine until I add more than 10 or 12 list items, and then things start to fall apart.

After that, the "Show/Hide" buttons open and close the accordion, but the "control/option/right arrow" starts to skip the "a11yaccordionHideArea" content and jumps to the "a11yAccordionItemHeader" - the only way I've been able to get it to work again is to surround my "a11yAccordionItemHeader" titles with h2 heading tags, and list them using the "control/option/u" command to list the headings and jumping to the heading I need. But even then the "Show/Hide" button doesn't work, I have to click on the h2 title to open the accordion.

Is there a limit on how many accordion items can be used?

Here something else that may also be a factor:
I am implementing this into a SharePoint Content Management System.

Is there a problem using this script with Content Management Systems?

Thank you for your help.

After concat and uglify tasks by grunt, if the a11yAccordeon file is included after jquery-ui, the jquery-ui doesn't work (perhaps there is some conflict)

Need to create a proper README.md with license, instruction on how to use the widget , collaborators and more.

Add "Fork it on Github" tab
Add relevant to a11yAccordeon content into the accordeon examples

Need to add some CSS and JS functionality in order to be able to disable some of the rows.

We can style the index page properly and explain how it is used. (Apart from the README)

Adding a gh-pages is to make it available to the public as a webpage. Like for example anvk.github.io/a11yAccordeon

CSS classes in LESS file should be changed to minimize the chance of class name collisions with other CSS files and 3rd party libraries. Examples of problematic classes:

accordeonA11yHideArea (different from other classes)
.dark-header
.dark-area
.accordeon-theme
....

I believe that most of the CSS classes we have should start with .a11yAccordeonXYZ
styles like:

li.a11yAccordeonItem OR .a11yAccordeon-centralPos
(dash would make sense for the cases when class names require more words to be self explanatory)

Hi,
Not sure if I should ask here but - I see in your example you have one item open at the start, how is this done? I'd like ideally to use the showOne - false, but have the first item in the accordion open to start with?
many thanks Graham

When I embed an accordion set inside another accordion then clicking on one of the nested accordion items results in itself and the parent collapsing. Opening an accordion with children opens all children as well.

The code I currently see this issue with:

<script type="text/javascript">
    window.onload = function() {

        var accordion1 = new A11yAccordion({
          parentSelector: '#accordion1',
          hiddenLinkDescription: 'row with data in the First Accordion',
          showSearch: false
        });

        var accordion2 = new A11yAccordion({
          parentSelector: '#accordion2',
          hiddenLinkDescription: 'row with data in the First Accordion',
          showSearch: false
        });         
    };
</script>

<ul id="accordion1" class="a11yAccordion a11yAccordion-light">
    <li class="a11yAccordionItem">
      <div class="a11yAccordionItemHeader">
        <strong>Random Information</strong>
      </div>
      <div class="a11yAccordionHideArea">
        <h2>My other content</h2>
        <p>This content is accessible by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.</p>
        <a href="#">This link is also accessible only when the collapsible area is visible.</a>     

        <ul id="accordion2" class="a11yAccordion a11yAccordion-light">
        <li class="a11yAccordionItem">
          <div class="a11yAccordionItemHeader">
            <strong>Random Information</strong>
          </div>
          <div class="a11yAccordionHideArea">
            <h2>My other content</h2>
            <p>This content is accessible by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.</p>
            <a href="#">This link is also accessible only when the collapsible area is visible.</a>
          </div>
        </li>

        <li class="a11yAccordionItem">
          <div class="a11yAccordionItemHeader">
            <strong>Dummy Text and Controls</strong>
          </div>
          <div class="a11yAccordionHideArea">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

            <p>These controls are accessible for interaction by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.</p>
            <input type='test' placeholder='Please enter some info here' style='width: 20%' /><br /><br />
            <input type='test' placeholder='Another control' />
          </div>
        </li>

        <li class="a11yAccordionItem">
          <div class="a11yAccordionItemHeader">
            <strong>Header with image</strong>
          </div>
          <div class="a11yAccordionHideArea">
            <img src="imgs/image.jpg" alt="example image for the presentation purposes with a description Y U NO COLLAPSE">
          </div>
        </li>
       </ul>         

      </div>
    </li>

    <li class="a11yAccordionItem">
      <div class="a11yAccordionItemHeader">
        <strong>Dummy Text and Controls</strong>
      </div>
      <div class="a11yAccordionHideArea">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

        <p>These controls are accessible for interaction by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.</p>
        <input type='test' placeholder='Please enter some info here' style='width: 20%' /><br /><br />
        <input type='test' placeholder='Another control' />
      </div>
    </li>

    <li class="a11yAccordionItem">
      <div class="a11yAccordionItemHeader">
        <strong>Header with image</strong>
      </div>
      <div class="a11yAccordionHideArea">
        <img src="imgs/image.jpg" alt="example image for the presentation purposes with a description Y U NO COLLAPSE">
      </div>
    </li>
</ul>

If I am missing something here my apologies, though I suspect that an event is bubbling up where it doesn't belong.

This change will make Search functionality more visible. At the moment user should type the whole "Heading #1" to see an immediate effect in the accordeon.

This widget lack a test coverage.
Need to add Mocha + Chai tests

Use Gaia or FireFox as a good example

This component should be refactored to have defaults, to have init() function with all DOM initialization within. Also there are various places in code which have to be refactored and fixed.