skip links js - wip

by ian_smithz

HTML

<footer id="footer" class="g12 site-footer" role="contentinfo">
                        
                        <div class="back-to-top-wrapper" aria-hidden="false">
                          <a class="back-to-top-link" href="#page-top"><i></i>Back to top</a>
                        </div>
							
                            <!-- includePage=PageEntry{url=/block/footerWrapper.jsp,otherContext=null} -->
    <div class="wrapper">
        <h2 class="accessibility">
            Footer links</h2>
        <!-- Social links -->
        <div class="footer-header">
            <div class="social-links">
                    <h3 class="accessibility">
                        Social links</h3>
                    <dl>
                        <dt>
                            <span>
                                Follow us:</span>
                        </dt>
                        <dd>
		<a class="needsclick" target="_blank" href="http://www.pinterest.com/bandq/"><img alt="Follow us on Pintrest" src="//kingfisher.scene7.com/is/image/Kingfisher/icon%5Fpinterest?$BaseImage$&amp;$PROMO_30_30$&amp;fmt=png-alpha"></a>
			
			</dd>	
<dd>
		<a class="needsclick" target="_blank" href="https://www.facebook.com/bandq"><img alt="Follow us on Facebook" src="//kingfisher.scene7.com/is/image/Kingfisher/icon%5Ffacebook?$PROMO_30_30$&amp;fmt=png-alpha"></a>
			
			</dd>	
<dd>
		<a class="needsclick" target="_blank" href="https://www.twitter.com/bandq"><img alt="Follow us on Twitter" src="//kingfisher.scene7.com/is/image/Kingfisher/icon%5Ftwitter?$PROMO_30_30$&amp;fmt=png-alpha"></a>
			
			</dd>	
<dd>
		<a class="needsclick" target="_blank" href="//www.youtube.com/user/bandq"><img alt="Watch us on Youtube" src="//kingfisher.scene7.com/is/image/Kingfisher/icon%5Fyoutube?$PROMO_30_30$&amp;fmt=png-alpha"></a>
			
			</dd>	
</dl>
                </div>
            </div>
        <!-- Site links -->
        <div class="categories">
            <ul class="grid grid-alt grid-5 js-accordion"...

JavaScript

(function () {

    'use strict';

    var AccessibleLinks = function (options) {
        /**
         * Defaults merged with options (if supplied)
         * @name module:AccessibleLinks#settings
         * @type object
         */
            this.settings = $.extend({
                linkZones: [
                    {
                        location: '#ui-products-panel',
                        links: [
                            {
                                text: msg.articleText,
                                target: '#ui-articles-panel',
                                opensTab: '#tab-ui-articles',
                                attachIDTo: null,
                                id: '#accessible-ui-articles-panel-link'
                            },
                            {
                                text: msg.menuText,
                                target: '#local-nav-products',
                                opensTab: null,
                                attachIDTo: '#ui-products-panel .sideBar',
                                id: 'linkID'
                            }
                        ]
                    },
                    {
                        location: '#ui-articles-panel',
                        links: [
                            {
                                text: msg.productText,
                                target: '#ui-products-panel',
                                opensTab: '#tab-ui-products',
                                attachIDTo: null,
                                id: '#accessible-ui-products-panel-link'
                            },
                            {
                                text: msg.menuText,
                                target: '#local-nav-articles',
                                opensTab: null,
                                attachIDTo: '#ui-articles-panel .sideBar',
                                id: 'linkID'
                            }
             ...