Zenn
Open1

WordPressのSwellのカスタマイズ

GaryutenGaryuten

Swell のFAQブロックが便利だったのだけど、残念なことにアクセシビリティに対応していなかったのでjQueryで力技で対応。

  if( $('.swell-block-faq .faq_q').length > 0 ){
    $('.swell-block-faq').find('.faq_q').each(function(i, e){
      // FAQのAへ属性付与
      $(this).parent().find('.faq_a').attr('aria-hidden', 'true').attr('id', 'faq_a-' + i);
      // FAQのQをボタン化してトリガーに（タブキーでフォーカスできるように）
      $(this).addClass('-is-override').wrapInner('<button class="faq_q__btn" aria-expanded="false" aria-controls="faq_a-' + i + '"></button>');
    });
  }

  $(document).on("click", ".swell-block-faq .faq_q__btn", function () {
    faqA.slideToggle();
    if( $(this).attr('aria-expanded') == 'true' ) {
      $(this).attr('aria-expanded', 'false');
      faqA.attr('aria-hidden', 'true');
    } else {
      $(this).attr('aria-expanded', 'true');
      faqA.attr('aria-hidden', 'false');
    }
  });