format mac hints according to guidelines

[myandrienko]

MacOS has specific guidelines regarding how hotkey shortcuts should be represented. Most importantly, they should be listed in a specific order (Ctrl, Alt, Shift, Meta), and the plus sign is not used a delimiter:

This PR implements those recommendations.

[ai]

Should we add a space? The screenshot didn’t have them.

[myandrienko]

I agree, the hint looks too loose with spaces:

Without spaces it looks better:

And you always have an option to use letter-spacing CSS property to control the spacing.

BTW, hints in the native Mac menus have a more complex layout, each key and modifier is aligned within its own column - so it won't look exactly right anyway.

[ai]

You can also use short-space symbol " "

[ai]

You will need to update package→size-limit (and maybe try some experiments to make size a little smaller. 40 bytes is too much for simple change.

[ai]

Can you also check that Win order is correct?

[myandrienko]

Added a test for windows.

[ai]

I mean not a test, but to find what order is canonical on Windows.

[myandrienko]

You will need to update package→size-limit (and maybe try some experiments to make size a little smaller. 40 bytes is too much for simple change.

Tried a new approach (regex instead of sort) and actually managed to reduce the bundle size by 4B.

[ai]

Last things to do:

1. Resolve conflict.
2. Think about using short space for Mac
3. Fix modifier order for Windows too 😈

[myandrienko]

3. Fix modifier order for Windows too 😈

@ai For Windows, the modifier order is Meta (Win), Ctrl, Alt, Shift. Would you be OK with this as the canonical order of modifiers for aria-keyshortcuts, or is too much of a breaking change?

[ai]

For Windows, the modifier order is Meta (Win), Ctrl, Alt, Shift. Would you be OK with this as the canonical order of modifiers for aria-keyshortcuts, or is too much of a breaking change?

Yes, we just need to check that hotkeys.js expect the modifiers in that canonical order.

We don’t need to change this helper function, just change docs if needed.

[myandrienko]

@ai All right, some changes are required in hotkey.js to make Meta (Win), Ctrl, Alt, Shift the canonical order - let's do it in a separate PR :)

[ai]

All right, some changes are required in hotkey.js to make Meta (Win), Ctrl, Alt, Shift the canonical order - let's do it in a separate PR :)

Agree.

In this case only two steps.

[ai]

Thanks. Released in 0.3.