Skip to content

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

@Caffeinix

Description

@Caffeinix

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

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms betterf: cupertinoflutter/packages/flutter/cupertino repositoryf: material designflutter/packages/flutter/material repository.found 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 onplatform-iosiOS applications specificallyplatform-macBuilding 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