CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

enforce label or aria-label on input props

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

9
client/app/(posts)/new/components/edit-document-list/edit-document/index.tsx
View file

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

1
client/app/(posts)/post/[id]/components/post-page/view-document/index.tsx
View file

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

13
client/app/components/input/index.tsx
View file

@ -2,6 +2,15 @@ import clsx from "clsx"
import React from "react" import React from "react"
import styles from "./input.module.css" 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> & { type Props = React.HTMLProps<HTMLInputElement> & {
label?: string label?: string
width?: number | string width?: number | string
@ -9,8 +18,10 @@ type Props = React.HTMLProps<HTMLInputElement> & {
labelClassName?: string labelClassName?: string
} }
type InputProps = RequireOnlyOne<Props, "label" | "aria-label">
// eslint-disable-next-line react/display-name // 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) => { ({ label, className, width, height, labelClassName, ...props }, ref) => {
return ( return (
<div <div