Skip to content

MenuItemButton shortcut labels do not follow the Apple HIG on Mac and iOS #129308

Closed
#129309
Closed
MenuItemButton shortcut labels do not follow the Apple HIG on Mac and iOS#129308
#129309
Assignees
Caffeinix
Labels
P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms betterfound in release: 3.10Found to occur in 3.10found in release: 3.12Found to occur in 3.12frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: cupertino_uicupertino_ui package in flutter/packagesp: material_uimaterial_ui package in flutter/packagesplatform-iosiOS applications specificallyplatform-macosBuilding on or for macOS specificallyr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Description

@Caffeinix
Caffeinix
opened on Jun 21, 2023

Is there an existing issue for this?

Steps to reproduce

The Apple Human Interface Guidelines give a specific ordering of the symbols used as modifier keys in menu shortcuts. These guidelines are encoded into the native Cocoa or UIKit menu classes, and are intended to ensure that symbols are always aligned into columns of like symbols. This ordering is, from left to right: ⌃, ⎇, ⇧, ⌘.

Currently, MenuItemButton uses a different ordering across all platforms, including Mac and iOS: ⎇, ⌃, ⌘, ⇧. This violates the HIG, particularly since a shortcut like ⌘⇧S (which should be ⇧⌘S) does not align vertically with a shortcut like ⌘S. Native menus also allocate a fixed amount of space for the shortcut trigger so that the shortcuts align perfectly, which MenuItemButton does not.

Expected results

Code like this:

MenuItemButton(
  shortcut: SingleActivator(
    LogicalKeyboardKey.keyS,
    control: true,
    meta: true,
    shift: true,
    alt: true,
  ),
  child: Text('Reticulate Splines'),
),

Should result in a menu item with a visual appearance, on Mac or iOS, like this:

Reticulate Splines           ⌃⎇⇧⌘S

Which conforms to the Apple HIG.

Actual results

Code like this:

MenuItemButton(
  shortcut: SingleActivator(
    LogicalKeyboardKey.keyS,
    control: true,
    meta: true,
    shift: true,
    alt: true,
  ),
  child: Text('Reticulate Splines'),
),

Results in a menu item with a visual appearance, on Mac or iOS, like this:

Reticulate Splines           ⎇⌃⌘⇧S

which does not conform to the Apple HIG.

Code sample

Code sample 
        MaterialApp(
          home: Material(
            child: MenuBar(
              children: <Widget>[
                SubmenuButton(
                  menuChildren: <Widget>[
                    MenuItemButton(
                      shortcut: SingleActivator(
                        LogicalKeyboardKey.keyS,
                        control: true,
                        meta: true,
                        shift: true,
                        alt: true,
                      ),
                      child: Text('Reticulate Splines'),
                    ),
                  ],
                  child: Text('File'),
                ),
              ],
            ),
          ),
        ),

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

N/A

Activity

  1. huycozy
    added
    in triagePresently being triaged by the triage team
    on Jun 22, 2023

  2. huycozy commented on Jun 22, 2023

    @huycozy
    huycozy
    on Jun 22, 2023
    Member

    Thank you for filing this. Reproduced the issue on the latest Flutter channels.

    Adding HIG references here and expected sample on macOS native:

    menus-in-macos@2x

    flutter doctor -v (stable and master) 
    [✓] Flutter (Channel stable, 3.10.5, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.10.5 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 796c8ef792 (29 hours ago), 2023-06-13 15:51:02 -0700
    • Engine revision 45f6e00911
    • Dart version 3.0.5
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.79.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.66.0

[✓] Connected device (5 available)
    • Pixel 3a (mobile)      • 964AY0WL20                               • android-arm64  • Android 12 (API 32)
    • iPhone (mobile)        • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.7.2 19H218
    • iPhone 14 Pro (mobile) • 98082851-A0C4-4E39-A310-21C48B10A364     • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)        • macos                                    • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)           • chrome                                   • web-javascript • Google Chrome 114.0.5735.133

[✓] Network resources
    • All expected network resources are available.

• No issues found!
    [!] Flutter (Channel master, 3.12.0-8.0.pre.16, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.12.0-8.0.pre.16 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ae1e6f70d9 (5 hours ago), 2023-06-21 17:38:36 -0400
    • Engine revision 08aaa88bf6
    • Dart version 3.1.0 (build 3.1.0-236.0.dev)
    • DevTools version 2.24.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.79.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.66.0

[✓] Connected device (3 available)
    • Pixel 3a (mobile) • 964AY0WL20 • android-arm64  • Android 12 (API 32)
    • macOS (desktop)   • macos      • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)      • chrome     • web-javascript • Google Chrome 114.0.5735.133

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
  3. huycozy
    added
    platform-iosiOS applications specifically
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    platform-macosBuilding on or for macOS specifically
    a: desktopRunning on desktop
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    found in release: 3.10Found to occur in 3.10
    found in release: 3.12Found to occur in 3.12
    a: fidelityMatching the OEM platforms better
    and removed
    in triagePresently being triaged by the triage team
    a: desktopRunning on desktop
    on Jun 22, 2023
  4. leighajarett
    added
    p: cupertino_uicupertino_ui package in flutter/packages
    on Jun 22, 2023
  5. HansMuller
    assigned
    Caffeinix
    on Jun 28, 2023

  6. 5 remaining items

  7. gnprice
    added
    team-designOwned by Design Languages team
    triaged-designTriaged by Design Languages team
    on Jul 10, 2023
  8. flutter-triage-bot
    removed
    triaged-iosTriaged by iOS platform team
    on Jul 10, 2023

  9. flutter-triage-bot commented on Jul 10, 2023

    @flutter-triage-bot
    flutter-triage-botbot
    on Jul 10, 2023

    The triaged-ios label is irrelevant if there is no team-ios label or fyi-ios label.

  10. auto-submit
    closed this as completedin #129309on Jul 26, 2023
  11. fluttermirroringbot
    added a commit that references this issue on Jul 26, 2023

    Reorders menu item button shortcuts on Mac-like platforms (#129309)

    a4f7906
  12. huycozy
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Jul 26, 2023
  13. vashworth
    added a commit that references this issue on Aug 2, 2023

    Reorders menu item button shortcuts on Mac-like platforms (flutter#12…

    8f501f5

  14. github-actions commented on Aug 9, 2023

    @github-actions
    github-actionsbot
    on Aug 9, 2023

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  15. github-actions
    locked as resolved and limited conversation to collaborators on Aug 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms betterfound in release: 3.10Found to occur in 3.10found in release: 3.12Found to occur in 3.12frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: cupertino_uicupertino_ui package in flutter/packagesp: material_uimaterial_ui package in flutter/packagesplatform-iosiOS applications specificallyplatform-macosBuilding on or for macOS specificallyr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions