Unable to use arrow keys when focused on accordion (Wordpress)

Question

I'm still learning about how to code for accessibility, and I'm hitting a wall on this wordpress website I'm working on that was developed by a previous developer. There's a page on our site that has accordion items that when focused on by tabbing end up disabling any movement with arrows keys (specifically, using the up and down arrow keys to scroll the page). When I tab past the accordion items, I am able to scroll with the arrow keys again.

I do notice that the html element has attributes that shift based on what's focused: data-whatelement="button" when the arrow keys are still functioning, and data-whatelement="a" when they're not. I don't know if that's relevant here though.

Here's a snippit of one of the accordion items (the expand button is contained within)

<div id="General" class="sidebar-anchor" style="display: block;">
    <div class="accordion-option">
        <h2 class="font-s-1-5"><span style="width:90%;word-wrap: break-word;">General</span></h2><button
            class="toggle-accordion" accordion-id="General" data-accordion="ssm-General"
            aria-label="expand/collapse General questions and answers" type="button" role="tablist"
            data-t="v84lyv-t"></button>
        <style>
            .accordion-option .toggle-accordion::before {
                content: "Expand";
            }

            .accordion-option .toggle-accordion.General::before {
                content: "Collapse";
            }
        </style>
        <ul>
            <li class="ssm-General" data-accordion="ssm-General" data-allow-all-closed="true" role="tablist"
                data-t="ard470-t">
                <div class="accordion-item" data-accordion-item="" data-parent="">
                    <a href="#" class="accordion-title" aria-controls="b4i8sa-accordion" role="tab"
                        id="b4i8sa-accordion-label" aria-expanded="false" aria-selected="false">Random Text</a>

                    <div class="accordion-content" data-tab-content="" role="tabpanel"
                        aria-labelledby="b4i8sa-accordion-label" aria-hidden="true" id="b4i8sa-accordion">
                        <div class="panel-body">
                            <p>Random Text</p>
                        </div>
                    </div>
                </div>
            </li>
            <li class="ssm-General" data-accordion="ssm-General" data-allow-all-closed="true" role="tablist"
                data-t="je376n-t">
                <div class="accordion-item" data-accordion-item="" data-parent="">
                    <a href="#" class="accordion-title" aria-controls="2lmfgr-accordion" role="tab"
                        id="2lmfgr-accordion-label" aria-expanded="false" aria-selected="false">Random text</a>

                    <div class="accordion-content" data-tab-content="" role="tabpanel"
                        aria-labelledby="2lmfgr-accordion-label" aria-hidden="true" id="2lmfgr-accordion">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </li>
            <li class="ssm-General" data-accordion="ssm-General" data-allow-all-closed="true" role="tablist"
                data-t="c1olgt-t">
            </li>
        </ul>
    </div>
</div>

I figured this might have to do with how the JS is coded, but the JS to me seems to be relatively straight forward and wouldn't have any sort of affect on blocking arrow functions. Is there an attribute or class that's being added that somehow interferes in a way that I'm not aware of?

Here's the relevant JS for reference:

//Expand All and Collapse All functions for Qs and As
jQuery(function(){
  jQuery(document).on('click', '.toggle-accordion', function(){
      var accordionId = jQuery(this).attr("accordion-id");
      var accordionData = jQuery(this).attr("data-accordion");
      
      var classID = "."+ accordionData;
      jQuery(this).toggleClass(accordionId);
      triggerAccordions = document.querySelectorAll("."+accordionId);
      console.log(triggerAccordions.length);
      if (triggerAccordions.length == 0) {
        collapseAll(classID);
      } else {
        expandAll(classID);
      }
  });

  function collapseAll($class) {
    jQuery($class).each(function () {
      var $acc = jQuery(this);
      var $openSections = $acc.find(".accordion-item.is-active .accordion-content");
      $openSections.each(function (i, section) {
        $acc.foundation("up", jQuery(section));
      });
    });
  };

  function expandAll($class) {
    jQuery($class).each(function () {
      var $acc = jQuery(this);
      var $openSections = $acc.find(".accordion-item .accordion-content");
      $openSections.each(function (i, section) {
        $acc.foundation("down", jQuery(section));
      });
    });
  };
});

Answer 1

It's not quite clear what you're asking so let me provide some accordion information to make sure we're all on the same page.

An accordion can have multiple sections that expand/collapse. Whether an expanded section collapses a previous expanded section is up to the developer. Some accordions allow multiple sections to be open and others only allow one section to be open.

When you have multiple sections (in theory, you could have an accordion with just one expandable section but that's generally called a disclosure widget, so in essence, an accordion is multiple disclosure widgets), you can treat the entire accordion as one tab stop OR you can treat each section in the accordion as a tab stop.

From a UX perspective, users are more aware of using TAB to navigate between elements rather than using an arrow key, but you'd have to do user testing to determine which is best for you.

In any event, if you treat the entire accordion as one tab stop, then the up/down arrow keys are generally used to move the focus between the accordion sections, similar to how a radio group works. In the aforementioned design spec, you'll see that arrow key implementation is optional.

The example in the spec uses tab to move between the sections.

Ignoring accordions for the moment, the arrow keys in a browser usually just scroll the page. Up/down for vertical scrolling and left/right for horizontal scrolling.

Now, with all that being said, one of your statements didn't make sense:

When I tab past the accordion items, I am able to move with the arrow keys again.

When you tab past the accordion so that your focus is now on an interactive element (link, button, etc) that is not associated with the accordion, what do you mean that you can move with the arrow keys? Are you saying you can navigate to different interactive elements using the arrow keys?