anvk / a11yaccordion Goto Github PK
View Code? Open in Web Editor NEWAn accessible and easy to use Accordeon widget.
Home Page: http://anvk.github.io/a11yAccordion/example.html
License: MIT License
An accessible and easy to use Accordeon widget.
Home Page: http://anvk.github.io/a11yAccordion/example.html
License: MIT License
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)
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.
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.
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
Try to find out if search inside of the hidden areas would make sense from user perspective.
This widget lack a test coverage.
Need to add Mocha + Chai tests
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.
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?
Thank you for taking the time to consider this.
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.
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
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,
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
Use Gaia or FireFox as a good example
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
Need to add some CSS and JS functionality in order to be able to disable some of the rows.
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.
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.
Pass showOne as an argument to the accordeon to determine what is the behaviour of the accordeon.
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)
Add "Fork it on Github" tab
Add relevant to a11yAccordeon content into the accordeon examples
Need to create a proper README.md with license, instruction on how to use the widget , collaborators and more.
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
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.