Summary

Add a registry model and view for managing keyboard shortcuts.

Review Request #13591 — Created Feb. 29, 2024 and submitted March 5, 2024, 9:17 p.m.

Information

Owner

chipx86

Repository

Ink

Branch

master

Bugs

Depends On

Blocks

13600

Reviewers

Groups

beanbag-misc

People

Description

Keyboard shortcuts will be registered in the new
KeyboardShortcutRegistry model, which takes a key, modifier flags, and
a callback handler, and registers it for quick access.

A corresponding KeyboardShortcutRegistryView can be attached to an
existing element and a registry model to invoke the handlers when those
keys are pressed.

Once attached, a registry view can be found on any ancestor DOM element
by using KeyboardShortcutRegistryView.findNearestRegistryView.
Similarly, a nearest registry can be found using
findNearestRegistry().. This makes it easy for components to
automatically register with the correct registry.

The plan is to eventually let the view pop up a dialog when ? is
pressed, to show the available keyboard shortcuts. This has been a
long-standing plan for Review Board, and with these new foundational
classes, we'll be able to offer this.

Testing Done

Unit tests pass.

Commits

Summary	ID
Add a registry model and view for managing keyboard shortcuts. Part of Ink's focus on accessibility is formalizing support for keyboard shortcuts. Components will be able to easily list keyboard shortcuts that trigger an element, providing both a visual indicator and ARIA information for screen readers. Keyboard shortcuts will be registered in the new `KeyboardShortcutRegistry` model, which takes a key, modifier flags, and a callback handler, and registers it for quick access. A corresponding `KeyboardShortcutRegistryView` can be attached to an existing element and a registry model to invoke the handlers when those keys are pressed. Once attached, a registry view can be found on any ancestor DOM element by using `KeyboardShortcutRegistryView.findNearestRegistryView`. Similarly, a nearest registry can be found using `findNearestRegistry().`. This makes it easy for components to automatically register with the correct registry. The plan is to eventually let the view pop up a dialog when `?` is pressed, to show the available keyboard shortcuts. This has been a long-standing plan for Review Board, and with these new foundational classes, we'll be able to offer this.	16876d6e49792e51376bd3cae1018b96bb70789d

Summary

Add a registry model and view for managing keyboard shortcuts.

Part of Ink's focus on accessibility is formalizing support for keyboard shortcuts. Components will be able to easily list keyboard shortcuts that trigger an element, providing both a visual indicator and ARIA information for screen readers. Keyboard shortcuts will be registered in the new `KeyboardShortcutRegistry` model, which takes a key, modifier flags, and a callback handler, and registers it for quick access. A corresponding `KeyboardShortcutRegistryView` can be attached to an existing element and a registry model to invoke the handlers when those keys are pressed. Once attached, a registry view can be found on any ancestor DOM element by using `KeyboardShortcutRegistryView.findNearestRegistryView`. Similarly, a nearest registry can be found using `findNearestRegistry().`. This makes it easy for components to automatically register with the correct registry. The plan is to eventually let the view pop up a dialog when `?` is pressed, to show the available keyboard shortcuts. This has been a long-standing plan for Review Board, and with these new foundational classes, we'll be able to offer this.

16876d6e49792e51376bd3cae1018b96bb70789d

Issues

Description	From	Last Updated
Typo: "mappin" -> "mapping".	maubin	March 1, 2024, 5:05 p.m.

flake8 passed.

JSHint passed.

Ship it!

src/ink/js/foundation/models/keyboardShortcutRegistry.ts (Diff revision 1)
The issue has been resolved. Show all issues
```
Typo: "mappin" -> "mapping".
```

Ship it!

Once the typo that Michelle mentioned is fixed, I'm happy.

Change Summary:


Added automatic association between elements and a registry, and functions for finding the nearest registry/view from a starting element.
registerShortcut() now returns the registration information, for later unregistering.
Renamed the interfaces to consistently use KeyboardShortcut in the name.
Fixed a typo in docs.

Description:

		Part of Ink's focus on accessibility is formalizing support for keyboard
		shortcuts. Components will be able to easily list keyboard shortcuts
		that trigger an element, providing both a visual indicator and ARIA
		information for screen readers.

		Keyboard shortcuts will be registered in the new
		`KeyboardShortcutRegistry` model, which takes a key, modifier flags, and
		a callback handler, and registers it for quick access.

		A corresponding `KeyboardShortcutRegistryView` can be attached to an
		existing element and a registry model to invoke the handlers when those
		keys are pressed.

	+	Once attached, a registry view can be found on any ancestor DOM element
	+	by using `KeyboardShortcutRegistryView.findNearestRegistryView`.
	+	Similarly, a nearest registry can be found using
	+	`findNearestRegistry().`. This makes it easy for components to
	+	automatically register with the correct registry.
	+
		The plan is to eventually let the view pop up a dialog when `?` is
		pressed, to show the available keyboard shortcuts. This has been a
		long-standing plan for Review Board, and with these new foundational
		classes, we'll be able to offer this.

Commits:

	Summary	ID
	Add a registry model and view for managing keyboard shortcuts. Part of Ink's focus on accessibility is formalizing support for keyboard shortcuts. Components will be able to easily list keyboard shortcuts that trigger an element, providing both a visual indicator and ARIA information for screen readers. Keyboard shortcuts will be registered in the new `KeyboardShortcutRegistry` model, which takes a key, modifier flags, and a callback handler, and registers it for quick access. A corresponding `KeyboardShortcutRegistryView` can be attached to an existing element and a registry model to invoke the handlers when those keys are pressed. The plan is to eventually let the view pop up a dialog when `?` is pressed, to show the available keyboard shortcuts. This has been a long-standing plan for Review Board, and with these new foundational classes, we'll be able to offer this.	487ca4c8562f412b6d5b0219e07417b24321987c
	Add a registry model and view for managing keyboard shortcuts. Part of Ink's focus on accessibility is formalizing support for keyboard shortcuts. Components will be able to easily list keyboard shortcuts that trigger an element, providing both a visual indicator and ARIA information for screen readers. Keyboard shortcuts will be registered in the new `KeyboardShortcutRegistry` model, which takes a key, modifier flags, and a callback handler, and registers it for quick access. A corresponding `KeyboardShortcutRegistryView` can be attached to an existing element and a registry model to invoke the handlers when those keys are pressed. Once attached, a registry view can be found on any ancestor DOM element by using `KeyboardShortcutRegistryView.findNearestRegistryView`. Similarly, a nearest registry can be found using `findNearestRegistry().`. This makes it easy for components to automatically register with the correct registry. The plan is to eventually let the view pop up a dialog when `?` is pressed, to show the available keyboard shortcuts. This has been a long-standing plan for Review Board, and with these new foundational classes, we'll be able to offer this.	c51c376defc0f4b148e83b7c83db42fcb8248676

Diff:

Revision 2 (+2588)

Show changes

	src/ink/js/index.ts
	src/ink/js/foundation/index.ts
	src/ink/js/foundation/models/index.ts
	src/ink/js/foundation/models/keyboardShortcutRegistry.ts
	src/ink/js/foundation/models/tests/keyboardShortcutRegistryTests.ts
	src/ink/js/foundation/views/index.ts
	src/ink/js/foundation/views/keyboardShortcutRegistryView.ts
	src/ink/js/foundation/views/tests/keyboardShortcutRegistryViewTests.ts

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Change Summary:


Fixed map key generation to normalize the shortcut key to lowercase, to avoid mismatches between registration and events.
Updated the call to get a shortcut to pass in an explicit modifiers object, instead of just casting the event.

Commits:

	Summary	ID
	Add a registry model and view for managing keyboard shortcuts. Part of Ink's focus on accessibility is formalizing support for keyboard shortcuts. Components will be able to easily list keyboard shortcuts that trigger an element, providing both a visual indicator and ARIA information for screen readers. Keyboard shortcuts will be registered in the new `KeyboardShortcutRegistry` model, which takes a key, modifier flags, and a callback handler, and registers it for quick access. A corresponding `KeyboardShortcutRegistryView` can be attached to an existing element and a registry model to invoke the handlers when those keys are pressed. Once attached, a registry view can be found on any ancestor DOM element by using `KeyboardShortcutRegistryView.findNearestRegistryView`. Similarly, a nearest registry can be found using `findNearestRegistry().`. This makes it easy for components to automatically register with the correct registry. The plan is to eventually let the view pop up a dialog when `?` is pressed, to show the available keyboard shortcuts. This has been a long-standing plan for Review Board, and with these new foundational classes, we'll be able to offer this.	c51c376defc0f4b148e83b7c83db42fcb8248676
	Add a registry model and view for managing keyboard shortcuts. Part of Ink's focus on accessibility is formalizing support for keyboard shortcuts. Components will be able to easily list keyboard shortcuts that trigger an element, providing both a visual indicator and ARIA information for screen readers. Keyboard shortcuts will be registered in the new `KeyboardShortcutRegistry` model, which takes a key, modifier flags, and a callback handler, and registers it for quick access. A corresponding `KeyboardShortcutRegistryView` can be attached to an existing element and a registry model to invoke the handlers when those keys are pressed. Once attached, a registry view can be found on any ancestor DOM element by using `KeyboardShortcutRegistryView.findNearestRegistryView`. Similarly, a nearest registry can be found using `findNearestRegistry().`. This makes it easy for components to automatically register with the correct registry. The plan is to eventually let the view pop up a dialog when `?` is pressed, to show the available keyboard shortcuts. This has been a long-standing plan for Review Board, and with these new foundational classes, we'll be able to offer this.	16876d6e49792e51376bd3cae1018b96bb70789d

Diff:

Revision 3 (+2598)

Show changes

	src/ink/js/index.ts
	src/ink/js/foundation/index.ts
	src/ink/js/foundation/models/index.ts
	src/ink/js/foundation/models/keyboardShortcutRegistry.ts
	src/ink/js/foundation/models/tests/keyboardShortcutRegistryTests.ts
	src/ink/js/foundation/views/index.ts
	src/ink/js/foundation/views/keyboardShortcutRegistryView.ts
	src/ink/js/foundation/views/tests/keyboardShortcutRegistryViewTests.ts

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to master (9e41ad5)