Repository: vuejs/vue-next
File: packages/runtime-dom/src/jsx.ts (TypeScript)

Code before:
  /** Defines the human readable text alternative of aria-valuenow for a range widget. */
  'aria-valuetext'?: string
}

// Vue's style normalization supports nested arrays
export type StyleValue =
  | false
  | null
  | undefined
  | string
  | CSSProperties
  | Array<StyleValue>

export interface HTMLAttributes extends AriaAttributes, EventHandlers<Events> {
  innerHTML?: string

  class?: any
  style?: StyleValue

  // Standard HTML Attributes
  accesskey?: string
  contenteditable?: Booleanish | 'inherit' | 'plaintext-only'
  contextmenu?: string
  dir?: string
  draggable?: Booleanish
  enterKeyHint?:
    | 'enter'
    | 'done'
    | 'go'
    | 'next'
    | 'previous'
    | 'search'
    | 'send'
  hidden?: Booleanish | '' | 'hidden' | 'until-found'
  id?: string
  inert?: Booleanish
  lang?: string
  placeholder?: string
  spellcheck?: Booleanish
  tabindex?: Numberish
  title?: string
  translate?: 'yes' | 'no'

  // Unknown
  radiogroup?: string // <command>, <menuitem>

  // WAI-ARIA
  role?: string

  // RDFa Attributes
  about?: string

Review comment (suggestion):
It's unclear to me whether this should be `enterKeyHint` or `enterkeyhint`.

The React types use camelCase, but they also use camelCase for other things too. It looks like we don't usually follow that convention here.

From what I can tell, this file typically uses lowercase for attributes, and only uses capital letters for properties that don't have a corresponding attribute.

I understand that this has been moved from elsewhere in the file, but I still think we should double check that we're happy with the casing before promoting it to the `HTMLAttributes` type. As far as I'm aware, its use on non-`<input>` elements is typically combined with `contenteditable` and `inputmode`, possibly making the inconsistency more visible than it was previously.

Code after:
  'aria-rowspan'?: Numberish | undefined
  /**
   * Indicates the current "selected" state of various widgets.
   * @see aria-checked @see aria-pressed.
   */
  'aria-selected'?: Booleanish | undefined
  /**
   * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
   * @see aria-posinset.
   */
  'aria-setsize'?: Numberish | undefined
  /** Indicates if items in a table or grid are sorted in ascending or descending order. */
  'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined
  /** Defines the maximum allowed value for a range widget. */
  'aria-valuemax'?: Numberish | undefined
  /** Defines the minimum allowed value for a range widget. */
  'aria-valuemin'?: Numberish | undefined
  /**
   * Defines the current value for a range widget.
   * @see aria-valuetext.
   */
  'aria-valuenow'?: Numberish | undefined
  /** Defines the human readable text alternative of aria-valuenow for a range widget. */
  'aria-valuetext'?: string | undefined
}

// Vue's style normalization supports nested arrays
export type StyleValue =
  | false
  | null
  | undefined
  | string
  | CSSProperties
  | Array<StyleValue>

export interface HTMLAttributes extends AriaAttributes, EventHandlers<Events> {
  innerHTML?: string | undefined

  class?: any
  style?: StyleValue | undefined

  // Standard HTML Attributes
  accesskey?: string | undefined
  contenteditable?: Booleanish | 'inherit' | 'plaintext-only' | undefined
  contextmenu?: string | undefined
  dir?: string | undefined
  draggable?: Booleanish | undefined
  enterkeyhint?:
    | 'enter'
    | 'done'
    | 'go'