keeps resize handle in view when resizing with the keyboard

Author: zamoore

packages/components/src/components/hds/advanced-table/th-resize-handle.hbs

@@ -9,6 +9,7 @@
   aria-valuemax={{@column.pxMaxWidth}}
   tabindex="0"
   aria-label="Resize {{@column.label}} column"
+  {{this.registerHandleElement}}
   {{on "pointerdown" this.startResize}}
   {{on "keydown" this.handleKeydown}}
   {{style height=this.height}}

packages/components/src/components/hds/advanced-table/th-resize-handle.ts

@@ -7,6 +7,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
+import { modifier } from 'ember-modifier';
 
 import type HdsAdvancedTableColumn from './models/column';
 
@@ -67,9 +68,16 @@ export default class HdsAdvancedTableThResizeHandle extends Component<HdsAdvance
     startNextColumnPxWidth?: number;
   } | null = null;
 
+  private handleElement!: HdsAdvancedTableThResizeHandleSignature['Element'];
   private boundResize: (event: PointerEvent) => void;
   private boundStopResize: () => void;
 
+  private registerHandleElement = modifier(
+    (element: HdsAdvancedTableThResizeHandleSignature['Element']) => {
+      this.handleElement = element;
+    }
+  );
+
   constructor(
     owner: unknown,
     args: HdsAdvancedTableThResizeHandleSignature['Args']
@@ -135,6 +143,12 @@ export default class HdsAdvancedTableThResizeHandle extends Component<HdsAdvance
       nextColumn,
       currentNextColumnPxWidth // Current next col width before keyboard step
     );
+
+    this.handleElement.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'nearest',
+    });
   }
 
   @action