#399

frontend/src/pages/posts/PostImportSourcePage.tsx

@@ -29,6 +29,8 @@ import type { User } from '@/types'
 type Props = { user: User | null }
 
 const MAX_ROWS = 100
+const SOURCE_ERROR_ID = 'post-import-source-error'
+const SOURCE_ISSUES_ID = 'post-import-source-issues'
 
 
 const PostImportSourcePage: FC<Props> = ({ user }) => {
@@ -45,6 +47,11 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
 
     const lineCount = countImportSourceLines (source)
     const messages = sourceError ? [sourceError] : []
+    const sourceDescribedBy = [
+	sourceError ? SOURCE_ERROR_ID : null,
+	sourceIssues.length > 0 ? SOURCE_ISSUES_ID : null]
+	.filter (_1 => _1 != null)
+	.join (' ')
 
     useEffect (() => {
 	cleanupExpiredPostImportSessions (message =>
@@ -134,6 +141,8 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
 		      <textarea
 			  value={source}
 			  rows={14}
+			  aria-invalid={messages.length > 0 || sourceIssues.length > 0}
+			  aria-describedby={sourceDescribedBy || undefined}
 			  className={inputClass (
 			      messages.length > 0 || sourceIssues.length > 0,
 			      'font-mono text-sm',
@@ -150,8 +159,12 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
 			      setSourceIssues ([])
 			  }}/>)}
 		</FormField>
-		<FieldError messages={messages}/>
-		<ul className="space-y-2 text-sm text-red-700 dark:text-red-300">
+		<div id={messages.length > 0 ? SOURCE_ERROR_ID : undefined}>
+		  <FieldError messages={messages}/>
+		</div>
+		<ul
+		    id={SOURCE_ISSUES_ID}
+		    className="space-y-2 text-sm text-red-700 dark:text-red-300">
 		  {sourceIssues.map (issue => (
 		      <li key={`${ issue.sourceRow }-${ issue.message }-${ issue.url }`}>
 			<div>{issue.sourceRow} 行目: {issue.message}</div>