bug: accordion-group, keyboard navigation doesn't work in Firefox

[averyrousseau]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

In Firefox specifically, using the arrow keys or Home/End to navigate between ion-accordions doesn't work. Nothing happens when you press the keys. No errors in the console.

Expected Behavior

The up and down arrow keys, Home, and End should allow you to navigate between accordions in a group.

Steps to Reproduce

Happens with any ion-accordion-group containing multiple ion-accordions. Example taken from the a11y test:

<ion-accordion-group expand="inset">
  <ion-accordion value="personal-information">
    <ion-item slot="header">
      <ion-label>Personal Information</ion-label>
    </ion-item>

    <ion-list slot="content">
      <ion-item>
        <ion-label>Name</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Email</ion-label>
        <ion-input type="email"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Phone</ion-label>
        <ion-input type="tel"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Extension</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Country</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>City/Province</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
    </ion-list>
  </ion-accordion>

  <ion-accordion value="billing-address">
    <ion-item slot="header">
      <ion-label>Billing Address</ion-label>
    </ion-item>

    <ion-list slot="content">
      <ion-item>
        <ion-label>Address 1</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Address 2</ion-label>
        <ion-input type="email"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>City</ion-label>
        <ion-input type="tel"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>State</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Zip Code</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
    </ion-list>
  </ion-accordion>

  <ion-accordion value="shipping-address">
    <ion-item slot="header">
      <ion-label>Shipping Address</ion-label>
    </ion-item>

    <ion-list slot="content">
      <ion-item>
        <ion-label>Address 1</ion-label>
        <ion-input id="address1" type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Address 2</ion-label>
        <ion-input type="email"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>City</ion-label>
        <ion-input type="tel"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>State</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Zip Code</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
    </ion-list>
  </ion-accordion>
</ion-accordion-group>

Code Reproduction URL

http://localhost:3333/src/components/accordion/test/a11y

Ionic Info

From the core project:

[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 6.18.1

Utility:

   cordova-res : not installed globally
   native-run  : 1.4.1

System:

   NodeJS : v16.13.0
   npm    : 8.1.0
   OS     : Windows 10

Additional Information

No response

[liamdebeasi]

Might be related to #25070. Accordion has delegatesFocus which should forward focus to ion-item. (The issue specifically mentions input, but really this could impact any focusable element)

[liamdebeasi]

I did a bit more digging and this does appear to be the same as #25070.

When we call focus(), the focusin event should fire in our focus-visible.ts utility: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/focus-visible.ts#L59

On Firefox this does not happen, so the ion-item inside of the accordion does not receive the visual focus indicator. Going to merge this with #25070.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.