backport of commit 30a9b6eda74e515135dbebb600b362da6d637cb1 (#18256)

Co-authored-by: Phil Renaud <phil.renaud@hashicorp.com>

.changelog/18210.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: adds keyboard commands for pagination on lists using [[ and ]]
+```

ui/.template-lintrc.js

@@ -19,5 +19,6 @@ module.exports = {
   },
   ignore: [
     'app/components/breadcrumbs/*', // using {{(modifier)}} syntax
+    'app/templates/components/list-pagination/list-pager', // using {{(modifier)}} syntax
   ],
 };

ui/app/components/list-pagination/list-pager.js

@@ -6,7 +6,29 @@
 import Component from '@ember/component';
 import { tagName } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import KeyboardShortcutModifier from 'nomad-ui/modifiers/keyboard-shortcut';
 
 @classic
 @tagName('')
-export default class ListPager extends Component {}
+export default class ListPager extends Component {
+  @service router;
+
+  // Even though we don't currently use "first" / "last" pagination in the app,
+  // the option is there at a component level, so let's make sure that we
+  // only append keyNav to the "next" and "prev" links.
+  // We use this to make the modifier conditional, per https://v5.chriskrycho.com/journal/conditional-modifiers-and-helpers-in-emberjs/
+  get includeKeyboardNav() {
+    return this.label === 'Next page' || this.label === 'Previous page'
+      ? KeyboardShortcutModifier
+      : null;
+  }
+
+  @action
+  gotoRoute() {
+    this.router.transitionTo(this.router.currentRouteName, {
+      queryParams: { page: this.page },
+    });
+  }
+}

ui/app/templates/components/list-pagination/list-pager.hbs

@@ -9,6 +9,12 @@
     class={{this.class}}
     data-test-pager={{this.test}}
     aria-label={{this.label}}
+    {{(modifier
+      this.includeKeyboardNav
+      label=(if (eq this.label 'Next page') 'Next Page' 'Previous Page')
+      action=(action "gotoRoute")
+      pattern=(if (eq this.label 'Next page') (array "]" "]") (array "[" "["))
+    )}}
   >
     {{yield}}
   </LinkTo>