[TextField] Improve/Fix TextField's onKeyDown capture logic for arrow keys

[zaquille-oneil]

WHY are these changes introduced?

Fixes an issue where TextFields that have the prop type="integer" do not properly handle onKeyDown events for ArrowUp and ArrowDown. Ideally, we increment these values by 1 multiple of the step value.

Context: While working on the Admin -> Products -> Catalogs surface, we have a need for the TextField component to be able to handle integer inputs while also providing the ability to increment upward and downward with keypresses of ArrowUp and ArrowDown.

Demo after the fix is applied:
https://screenshot.click/20-27-irbo7-6glak.mp4

WHAT is this pull request doing?

Resolves #9779
The integer input type is not a standard input type in HTML5. HTML5 does not provide a specific input type specifically for integers.

the web also doesn’t think that HTML5 inputs should take integer. if that’s the case, then it defaults to "text" . However, polaris textFields allow for an “integer” type when they create input elements. this pr has some context on why “integer” was introduced. here is some TextFields.tsx code that i pseudo-coded to shorten:

type Type =
  | 'number'
  | 'integer'
  | ...
...
interface TextFieldProps {
  inputType?: Type;
  ...
}
...
const input = createElement('input', {
  type: inputType,
  ...
}
...

Since <TextField type="integer" /> is essentially <input type="text" />, TextField.tsx will need to be responsible for handling some of the behavior that comes for free with "number" inputs. Some logic already exists but I noticed that "ArrowUp" and "ArrowDown" are specifically not being captured.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[stefanlegg]

[nit] Dont forget to add a changeset for this - here's an example from one of my prs

[stefanlegg]

🎩 & code LGTM

[sam-b-rose]

✨