enforce label or aria-label on input props

This commit is contained in:
Max Leiter 2022-11-20 21:02:09 -08:00
parent 41ed505362
commit 0cab3acd62
3 changed files with 17 additions and 6 deletions

View file

@ -5,13 +5,12 @@ import Button from "@components/button"
import Input from "@components/input"
import DocumentTabs from "app/(posts)/components/tabs"
// import Link from "next/link"
type Props = {
title?: string
content?: string
setTitle?: (title: string) => void
handleOnContentChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void
initialTab?: "edit" | "preview"
defaultTab?: "edit" | "preview"
remove?: () => void
onPaste?: (e: any) => void
}
@ -22,7 +21,7 @@ const Document = ({
title,
content,
setTitle,
initialTab = "edit",
defaultTab = "edit",
handleOnContentChange
}: Props) => {
// const height = editable ? "500px" : '100%'
@ -86,7 +85,7 @@ const Document = ({
<div className={styles.descriptionContainer}>
<DocumentTabs
isEditing={true}
defaultTab={"edit"}
defaultTab={defaultTab}
handleOnContentChange={handleOnContentChange}
onPaste={onPaste}
title={title}
@ -98,4 +97,4 @@ const Document = ({
)
}
export default memo(Document)
export default Document

View file

@ -90,6 +90,7 @@ const Document = ({
style={{ borderRadius: 0 }}
value={title || "Untitled"}
disabled
aria-label="Document title"
/>
</Link>
<div className={styles.descriptionContainer}>

View file

@ -2,6 +2,15 @@ import clsx from "clsx"
import React from "react"
import styles from "./input.module.css"
type RequireOnlyOne<T, Keys extends keyof T = keyof T> = Pick<
T,
Exclude<keyof T, Keys>
> &
{
[K in Keys]-?: Required<Pick<T, K>> &
Partial<Record<Exclude<Keys, K>, undefined>>
}[Keys]
type Props = React.HTMLProps<HTMLInputElement> & {
label?: string
width?: number | string
@ -9,8 +18,10 @@ type Props = React.HTMLProps<HTMLInputElement> & {
labelClassName?: string
}
type InputProps = RequireOnlyOne<Props, "label" | "aria-label">
// eslint-disable-next-line react/display-name
const Input = React.forwardRef<HTMLInputElement, Props>(
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ label, className, width, height, labelClassName, ...props }, ref) => {
return (
<div