In Visual Studio Code, I frequently want to split the window into two panes to view one file alongside another. The quickest way to do this without my hands leaving the keyboard is to use View: Move Editor into Next Group with the keyboard shortcut ^⌘→ (ctrl-cmd-right arrow).
You can find the command in the Command Palette
Although this works out of the box in VS Code, for several years now on macOS it also triggers an annoying system beep.
A few years ago this was annoying me enough that I tried to track down the cause. The issue seems to be that Chromium (the browser engine in Electron, the framework that lets you build desktop applications with web technology, with which VS Code is built) does not notify macOS when it handles keyboard shortcuts like ^⌘←, ^⌘↓, and ^⌘→, so macOS plays the system beep to warn you that your keystrokes didn’t do anything (even though they did). A bug report for this on the Chromium project was closed in January 2020 as WontFix, seeming to blame macOS for the issue.
Fortunately, there’s a work-around: set up custom macOS key bindings.
You can establish system-global key bindings for the key combinations ^⌘←, ^⌘↓, and ^⌘→ that are mapped to no operation ("noop"). Simply having these declared as valid keystrokes at the OS level eliminates the system beep that occurs even when a Chromium app accepts and handles the keystroke.
In order to establish this, you need to create a ~/Library/KeyBindings/DefaultKeyBinding.dict file. Note that you’ll probably need to create the directory as well, and that the directory name is plural (Bindings), but the file name is singular (Binding). This should be in your user Library folder, not the /Library folder or the /System/Library folder.
This should be a text file with these contents:
^ means Ctrl, @ means Command, and \UF701, \UF702, and \UF703 are the codes for the three arrow keys. There’s a nice reference Gist for this file’s syntax here. You can download a copy of this file if that’s easier (but you’ll need to extract it from the ZIP archive):
DefaultKeyBinding.dict.zip
Once you have created this file, restart VS Code (or any other applications where you want to use these keystrokes), or just reboot your system. After that, you should find that the system beeps are gone. I have successfully applied this tweak since macOS Catalina (10.15.2) all the way up to the current macOS Ventura (13.1) to use the default keyboard shortcuts for the View: Move Editor into Next Group and View: Move Editor into Previous Group commands without hearing system beeps each time.
My new site design makes heavy use of horizontal scrolling on the home page, with scrollbars hidden. Horizontal scrolling can be accessible, but it takes some work to make it so. This article covers accessibility for keyboard and screen reader users, and users whose pointing devices simply don't support horizontal scrolling! It also breaks down several usability features I added to create a better experience than the native scrollbars they replace.
Every Mac has a screen reader built in, called VoiceOver. This article describes how you can use it to test the web application user interfaces you build!
