framework7io / framework7io/framework7

Menu with Dropdown / Voiceover on iOS

Open
#3,118 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug confirmed Enhancement
Dominant language
JavaScript
Stars
18.8k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

  • Framework7 version: v4.2.0
  • Platform and Target: iOS 12.2
  • Live Link or JSFiddle: not applicable (bug does not occur in JSFiddle)
Describe the bug

When using VoiceOver (for visually impaired users) on iOS, the "Menu with Dropdown" component does not work as expected.
In VoiceOver mode, an element must be tapped twice to trigger it.
Since tapping twice closes the dropdown, the elements of the dropdown cannot be selected.

To Reproduce

Use this element in an iOS-App while VoiceOver is enabled

<div class="menu">
          <div class="menu-inner float-right no-padding margin-bottom">
            <div class="menu-item menu-item-dropdown">
              <div class="menu-item-content"><span id="event_addperson" aria-label="Person hinzufügen" role="link">+</span></div>
                <div class="menu-dropdown menu-dropdown-right">
                  <div class="menu-dropdown-content">
                    <a id="eventdetails_addperson_empty" class="menu-dropdown-link menu-close" role="link" aria-label="empty">empty</a>
                    <a id="eventdetails_addperson_contacts" class="menu-dropdown-link menu-close" role="link" aria-label="from contacts">from contacts</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
Expected behavior

"Menu with Dropdown" should be expanded after tapping twice when voiceover enabled on iOS

Actual Behavior

"Menu with Dropdown" opens and closes immediately after tapping twice when voiceover enabled on iOS

...last but not least

Thanks for the great work!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the provided menu markup and reproduce the behavior in an iOS app with VoiceOver enabled. Trace the menu dropdown interaction handling and verify that a VoiceOver double-tap leaves the dropdown open so its links can be selected.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, javascript
Domain
accessibility, frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.