Issue

Key shortcuts should be able to be disabled

There are several keyboard shortcuts available for DuckDuckGo users, including pressing the / or h keys to move focus to the search input and pressing m or t to go to the main results or to the top of the page, respectively. These shortcuts are not just useful for power users but for people who navigate with keyboards only as well.

List of keyboard shortcuts

List of keyboard shortcuts

However, since all of these shortcuts consist of single characters, it is necessary to have the option to either turn them off or remap them to avoid any conflicts with the shortcuts used by assistive technologies or with vocal sounds someone using voice control would make.

Settings page is unreachable by keyboards

While there is an option to disable shortcuts on the settings page, it is not reachable through keyboard-only navigation. This renders the option effectively inaccessible to those who might truly need to turn them off.

To illustrate the issue, see these two videos that demonstrate how the settings page is skipped in the main navigation and in the "Duckbar" located below the search input.

Settings link not focusable

Settings link not focusable

Settings button not focusable

Settings button not focusable

Suggestion

Make elements focusable

<!-- Main navigation settings link -->
<a href="<https://duckduckgo.com/settings>" tabindex="-1" data-settings="1">All Settings</a>
<!-- Main navigation settings link -->
<a class="zcm__link dropdown__button js-dropdown-button dropdown__button--no-icon"><span class="zcm__link__icon"></span>Settings</a>

Looking at the code we can see that the “All settings” link in the main navigation is not focusable because of the tabindex=-1 attribute. It's unclear why this attribute was added, but the solution is to simply remove it.

The settings button is implemented as an <a> element but does not have an href attribute. Without this attribute, the browser does not consider it interactive, and it is not made focusable by default. However, adding an href attribute alone is not enough to make the component fully keyboard and focus accessible. The popover element of this and other components needs further attention and improvement which will be addressed later in 2.3 Popovers and 3.3 Popovers.

More issues on the settings page