(Originally posted by @danny8000)

Research and test keyboard accessibilty for expandable component

An expandable group would be semantically better as an unordered list:

<div class="expandable-group">
        <div class="expandable-group_header">...</div>
        <ul>
             <li class="expandable expandable__padded">...</li>
             <li class="expandable expandable__padded">...</li>
             ...
        </ul>
</div>

(Originally posted by @danny8000)

Use the Modernizr no-js technique (display should be set to block on all the panels).

Since this is the only current cf- component that requires an icon (I think), would it make sense to instead serve the + icon as an SVG with an image fallback. That would allow us the freedom to use any icon system (cf-icons, font-awesome, custom) without effecting this plugin.

What do you think?

I would suggest that multiple clicks on show/hide should perform only a single toggle rather than adding an animation event to the queue. Current behavior allows multiple clicks which are then executed in sequence which could be confusing to users that double-click or click multiple times. I'll look into it.

http://docs.sublimetext.info/en/latest/extensibility/snippets.html

For example:

<snippet>
    <content><![CDATA[<div class="expandable expandable__padded">
    <button class="expandable_header expandable_target">
        <span class="expandable_header-left expandable_label">
            ${1:Expandable label}
        </span>
        <span class="expandable_header-right expandable_link">
            <span class="expandable_cue-open">
                Show
                <span class="cf-icon cf-icon-plus-round"></span>
            </span>
            <span class="expandable_cue-close">
                Hide
                <span class="cf-icon cf-icon-minus-round"></span>
            </span>
        </span>
    </button>
    <div class="expandable_content">
        <p>
            ${0:My expandable text}
        </p>
    </div>
</div>]]></content>
    <tabTrigger>cf_expandable</tabTrigger>
    <scope>text.html</scope>
</snippet>

We would have to update the markup example in the CSS comments to support fields like $1.

We could change > .expandable_target .expandable_cue-open to a JS-approach so we don't have to rely on direct descendants to fix this nested expandables issue.

I was a little confused when running the JS tests. I got results in the command line but wasn't sure how to add new ones. Then once I read up on qUnit I was confused about why I couldn't see the tests in a browser using connect (the answer is because connect is only alive during a task).

We should explain how to add new tests and how to make connect persistent. We should also note that contributors should be running tests if they change JS.

• make it work with text in the cue
• update the transition time to 0.15 seconds
• make it work with btn_icon__right/left

When an expandable group has a header there is a horizontal rule between the header and the expandable items. However, when a header isn't used the horizontal rule is gone:

With header:

Without header:

The expandable group should keep the horizontal rule at the top whether a header is present or not, so that it looks like:

Primarily to avoid the use of double element classes.

Each individual Capital Framework module's issue is closing in favor of one issue section at Capital Framework's issue tracker. Please file any issues there.

This issue section will be closed after our readme and contributing.md are updated.

It's not totally clear that you need to wire up jquery.easing in order to use this. It would be nice if the README explained this OR it would be cool if the JS would not break if jquery.easing wasn't available. Maybe something like:

if jquery.easing
    slide w/ easing
else
    just do normal linear sliding that is default to jquery
    maybe throw a useful error that says jquery.easing is missing?

(Originally posted by @danny8000)

http://learn.jquery.com/plugins/basic-plugin-creation/

Ideally the expandables wouldn't display the show/hide buttons at all when JS is turned off:

Have them default to either display:none or not being part of the DOM at all and use the expandables JS script to change their display or add them to the DOM.

... or get npm WARN package.json @ No repository field.

Does this repo need two JSHint setting files?

https://github.com/cfpb/cf-expandables/blob/gh-pages/src/.jshintrc

https://github.com/cfpb/cf-expandables/blob/gh-pages/.jshintrc

https://cfpb.github.io/cf-expandables/demo/ is broken. Says Uncaught ReferenceError: module is not defined

From @davidakennedy:

Let me know if you want to toss around ideas. I've got a few regarding ARIA attributes. I definitely want us to be very forward leaning with them.

From @danny8000:

We should look at Paypal's Repo to see what controls they add: https://github.com/paypal/bootstrap-accessibility-plugin

Some places that use the expandable-group and expandable__padding patterns together get an expandable with no bottom spacing.

See issue: cfpb/consumerfinance.gov#487