Menu icon Foundation

My Posts



My Comments

Benoit champagne commented on Benoit champagne's post almost 2 years

Hi, me again.
I'm really hoping that someone can help me with this.
You see the issues is not the accordion part of the responsive accordion tabs but the tabs themselves.
when i use my keyboard to go through my tabs to open the content, i have to go through all the tabs to then go to the content of the open panel and click on links. When i was in the tab section of the foundation site, this was not issue it seemed. Having done some research on line the issues seem to be with the aria elements themselves (can't 100% confirm this) that causes the tabindex and focus issues. 
here is some of my code (sorry for the french terms riddled in it)
<ul id="accueil" class="tabs-milieu tabs" data-responsive-accordion-tabs="tabs medium-accordion small-accordion large-tabs" data-allow-all-closed="true" data-active-collapse="true" role="tablist" data-tabs="23u5ki-tabs">
     <li class="ac-ed tabs-title" role="presentation">
    <a  href="#org4fg-accordion" class="" role="tab" aria-controls="org4fg-accordion" aria-selected="false" id="org4fg-accordion-label">Édition</a>
 
   
  </li>
   <li class="ac-fp tabs-title is-active" role="presentation">
    <a  href="#obt4ng-accordion" class="" role="tab" aria-controls="obt4ng-accordion" aria-selected="true" id="obt4ng-accordion-label">Formation et  accompagnement</a>
 
   
  </li>
   <li class="ac-ldc tabs-title" role="presentation">
    <a  href="#bwbv4h-accordion" class="" role="tab" aria-controls="bwbv4h-accordion" aria-selected="false">Libriairie du Centre</a>
 
   
  </li>
   <li class="ac-ap tabs-title" role="presentation">
    <a  href="#p5ghr8-accordion" class="" role="tab" aria-controls="p5ghr8-accordion" aria-selected="false" id="p5ghr8-accordion-label">Appui  technologique</a>
 
   
  </li>
   <li class="ac-sos tabs-title" role="presentation">
    <a href="#frbsn8-accordion" class="" role="tab" aria-controls="frbsn8-accordion" aria-selected="false" id="frbsn8-accordion-label">SOS Devoirs</a>
 
   
  </li>
</ul>
 
Here is an example of the code of the Second panel when it is open
-----------------------------------------------------
<div class="tabs-panel is-active" data-tab-content  id="obt4ng-accordion" role="tabpanel" aria-hidden="false" aria-labelledby="obt4ng-accordion-label">
       <!-- rubrique -->
  <div class="row " data-equalizer="mklnhb-equalizer" data-equalize-on="large" data-resize="j6kvms-eq" data-mutate="k0zrmf-eq" data-events="mutate">  <div class=" large-2 medium-4 small-12 column acess-r-divider" data-equalizer-watch="" style="height: 265px;">
<div>
 
<div class="rubrique-icone">
<img src="http://www.cforp.ca/cforp-17/wp-content/uploads/sites/25/2017/06/auto-form-logo-accrap.png?1502290846887" alt="Logo - Autoformation sur mesure" class="aligncenter">
 
</div>
<div class="column lien-secondaire"></div>
<div class=" card-section "><a role="button" class="button large-12" href="http://formapro.cforp.ca/autoformation/" target="blank">Accédez à nos capsules d’autoformation gratuites</a></div>
</div>
 
</div>
    </div>
        <!--fin  rubrique -->
    </div>
 
______________________________________________
 
So can some one send me a miracle code that can reorder the sequence of tabindex when a panel is open.
 
thank you in advance

Benoit champagne commented on Benoit champagne's post almost 2 years

Anyone?!?!
 
Really need help with this issue do to the accessibility laws in Canada
 
Help!

Benoit champagne commented on Benoit champagne's post almost 2 years

MICHAEL.. you are awesome
i finally got the script to be valid (linking to the java script rather than pasting it at the bottom of the page)
 
and now when i reload the page at the smaller media queries the equalizer works 100%
 
You just made my YEAR!!!!!!

Benoit champagne commented on Benoit champagne's post almost 2 years

i should have know that one. It's monday.
 
Even after i change this, code inspector gives me this error
Uncaught TypeError: $ is not a function
$(document).ready(function() {
 $('.accordion').on('down.zf.accordion', function() {
  Foundation.reInit('equalizer');
});
});
  
i feel so stupid that i can not figure out the issue
 

Benoit champagne commented on Benoit champagne's post almost 2 years

him, i seem to be doing something wrong
 
i am null when it comes to coding scripts. Google inspector tells me i am doing something wrong
so what am i missing  
 
<script>
    $('accordion').on('down.zf.accordion', function() {
  Foundation.reInit('equalizer');
});
    </script>

Benoit champagne commented on Benoit champagne's post almost 2 years

Thank you. Will test it out during the day

Benoit champagne commented on Benoit champagne's post almost 2 years

Hi Michael,
thanks for the reply
I am an experience web designer but when it comes to code i am so bad. I Have gotten away with placing javascript with it by using what i find online.
 
So how do i place this code you are suggesting?
at the bottom before the body tag?
if yes, can i bother you for how it would like completer (with the javascript open and closing tags)
 
In the foundation script itself? (foundation.js)
if yes, how do i place it.
 
Thanks again
 
p.s. - English is my second language so i apologies for any grammar or spelling mistakes i might have done

Benoit champagne commented on Benoit champagne's post almost 2 years

Hi Ryan
Using the on small actually makes it not work at all on all three break points
here is the code (please don't mind the Advanced custon fields code)
-------------------------------------------------
<ul id="accueil" class="accordion tabs-milieu" data-responsive-accordion-tabs="tabs medium-accordion small-accordion large-tabs"  data-allow-all-closed="true" data-active-collapse="true">
    <?php 
// check for rows (parent repeater)
if( have_rows('acces_rapide') ): ?>
<?php 
// loop through rows (parent repeater)
while( have_rows('acces_rapide') ): the_row(); ?>
  <li  class="accordion-item <?php the_sub_field('icones'); ?>" data-accordion-item>
    <a <?php if( get_sub_field('lien') ): ?>  <?php the_sub_field('lien'); ?><?php endif; ?> href="#" class="accordion-title" ><?php the_sub_field('titre_de_lelement'); ?></a>
 
   <div class="accordion-content" data-tab-content>
       <!-- rubrique -->
  <div class="row  " data-equalizer   data-equalize-on="large" >  <?php 
// check for rows (parent repeater)
if( have_rows('contenue_de_lelement') ): ?>
<?php 
// loop through rows (parent repeater)
while( have_rows('contenue_de_lelement') ): the_row(); ?>
<div class=" large-2 medium-4 small-12 column acess-r-divider" data-equalizer-watch>
<div >
 
<div class="rubrique-icone" >
<?php $image = get_sub_field('icone_rub');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" class="aligncenter" />
<?php endif; ?> 
</div>
<div class="column"><?php the_sub_field('description_de_la_rubrique'); ?></div>
</div>
</div>
   <?php endwhile; ?>
<?php endif; ?> </div>
        <!--fin  rubrique -->
    </div>
  </li>
  <?php endwhile; ?>
<?php endif; ?>
 
</ul> 
 

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Benoit champagne's post almost 2 years

Hi, me again.
I'm really hoping that someone can help me with this.
You see the issues is not the accordion part of the responsive accordion tabs but the tabs themselves.
when i use my keyboard to go through my tabs to open the content, i have to go through all the tabs to then go to the content of the open panel and click on links. When i was in the tab section of the foundation site, this was not issue it seemed. Having done some research on line the issues seem to be with the aria elements themselves (can't 100% confirm this) that causes the tabindex and focus issues. 
here is some of my code (sorry for the french terms riddled in it)
<ul id="accueil" class="tabs-milieu tabs" data-responsive-accordion-tabs="tabs medium-accordion small-accordion large-tabs" data-allow-all-closed="true" data-active-collapse="true" role="tablist" data-tabs="23u5ki-tabs">
     <li class="ac-ed tabs-title" role="presentation">
    <a  href="#org4fg-accordion" class="" role="tab" aria-controls="org4fg-accordion" aria-selected="false" id="org4fg-accordion-label">Édition</a>
 
   
  </li>
   <li class="ac-fp tabs-title is-active" role="presentation">
    <a  href="#obt4ng-accordion" class="" role="tab" aria-controls="obt4ng-accordion" aria-selected="true" id="obt4ng-accordion-label">Formation et  accompagnement</a>
 
   
  </li>
   <li class="ac-ldc tabs-title" role="presentation">
    <a  href="#bwbv4h-accordion" class="" role="tab" aria-controls="bwbv4h-accordion" aria-selected="false">Libriairie du Centre</a>
 
   
  </li>
   <li class="ac-ap tabs-title" role="presentation">
    <a  href="#p5ghr8-accordion" class="" role="tab" aria-controls="p5ghr8-accordion" aria-selected="false" id="p5ghr8-accordion-label">Appui  technologique</a>
 
   
  </li>
   <li class="ac-sos tabs-title" role="presentation">
    <a href="#frbsn8-accordion" class="" role="tab" aria-controls="frbsn8-accordion" aria-selected="false" id="frbsn8-accordion-label">SOS Devoirs</a>
 
   
  </li>
</ul>
 
Here is an example of the code of the Second panel when it is open
-----------------------------------------------------
<div class="tabs-panel is-active" data-tab-content  id="obt4ng-accordion" role="tabpanel" aria-hidden="false" aria-labelledby="obt4ng-accordion-label">
       <!-- rubrique -->
  <div class="row " data-equalizer="mklnhb-equalizer" data-equalize-on="large" data-resize="j6kvms-eq" data-mutate="k0zrmf-eq" data-events="mutate">  <div class=" large-2 medium-4 small-12 column acess-r-divider" data-equalizer-watch="" style="height: 265px;">
<div>
 
<div class="rubrique-icone">
<img src="http://www.cforp.ca/cforp-17/wp-content/uploads/sites/25/2017/06/auto-form-logo-accrap.png?1502290846887" alt="Logo - Autoformation sur mesure" class="aligncenter">
 
</div>
<div class="column lien-secondaire"></div>
<div class=" card-section "><a role="button" class="button large-12" href="http://formapro.cforp.ca/autoformation/" target="blank">Accédez à nos capsules d’autoformation gratuites</a></div>
</div>
 
</div>
    </div>
        <!--fin  rubrique -->
    </div>
 
______________________________________________
 
So can some one send me a miracle code that can reorder the sequence of tabindex when a panel is open.
 
thank you in advance

You commented on Benoit champagne's post almost 2 years

Anyone?!?!
 
Really need help with this issue do to the accessibility laws in Canada
 
Help!

You commented on Benoit champagne's post almost 2 years

MICHAEL.. you are awesome
i finally got the script to be valid (linking to the java script rather than pasting it at the bottom of the page)
 
and now when i reload the page at the smaller media queries the equalizer works 100%
 
You just made my YEAR!!!!!!

You commented on Benoit champagne's post almost 2 years

i should have know that one. It's monday.
 
Even after i change this, code inspector gives me this error
Uncaught TypeError: $ is not a function
$(document).ready(function() {
 $('.accordion').on('down.zf.accordion', function() {
  Foundation.reInit('equalizer');
});
});
  
i feel so stupid that i can not figure out the issue
 

You commented on Benoit champagne's post almost 2 years

him, i seem to be doing something wrong
 
i am null when it comes to coding scripts. Google inspector tells me i am doing something wrong
so what am i missing  
 
<script>
    $('accordion').on('down.zf.accordion', function() {
  Foundation.reInit('equalizer');
});
    </script>

You commented on Benoit champagne's post almost 2 years

Thank you. Will test it out during the day

You commented on Benoit champagne's post almost 2 years

Hi Michael,
thanks for the reply
I am an experience web designer but when it comes to code i am so bad. I Have gotten away with placing javascript with it by using what i find online.
 
So how do i place this code you are suggesting?
at the bottom before the body tag?
if yes, can i bother you for how it would like completer (with the javascript open and closing tags)
 
In the foundation script itself? (foundation.js)
if yes, how do i place it.
 
Thanks again
 
p.s. - English is my second language so i apologies for any grammar or spelling mistakes i might have done

You commented on Benoit champagne's post almost 2 years

Hi Ryan
Using the on small actually makes it not work at all on all three break points
here is the code (please don't mind the Advanced custon fields code)
-------------------------------------------------
<ul id="accueil" class="accordion tabs-milieu" data-responsive-accordion-tabs="tabs medium-accordion small-accordion large-tabs"  data-allow-all-closed="true" data-active-collapse="true">
    <?php 
// check for rows (parent repeater)
if( have_rows('acces_rapide') ): ?>
<?php 
// loop through rows (parent repeater)
while( have_rows('acces_rapide') ): the_row(); ?>
  <li  class="accordion-item <?php the_sub_field('icones'); ?>" data-accordion-item>
    <a <?php if( get_sub_field('lien') ): ?>  <?php the_sub_field('lien'); ?><?php endif; ?> href="#" class="accordion-title" ><?php the_sub_field('titre_de_lelement'); ?></a>
 
   <div class="accordion-content" data-tab-content>
       <!-- rubrique -->
  <div class="row  " data-equalizer   data-equalize-on="large" >  <?php 
// check for rows (parent repeater)
if( have_rows('contenue_de_lelement') ): ?>
<?php 
// loop through rows (parent repeater)
while( have_rows('contenue_de_lelement') ): the_row(); ?>
<div class=" large-2 medium-4 small-12 column acess-r-divider" data-equalizer-watch>
<div >
 
<div class="rubrique-icone" >
<?php $image = get_sub_field('icone_rub');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" class="aligncenter" />
<?php endif; ?> 
</div>
<div class="column"><?php the_sub_field('description_de_la_rubrique'); ?></div>
</div>
</div>
   <?php endwhile; ?>
<?php endif; ?> </div>
        <!--fin  rubrique -->
    </div>
  </li>
  <?php endwhile; ?>
<?php endif; ?>
 
</ul> 
 

Posts Followed

Following

  • No Content

Followers

  • No Content