Visual Label not provided for "Title" and "Description" field: A11y_Visual Studio Code Web Extensions_Github Pull request_Create New Request_Labels or Instructions (#7882)

* Visual Label not provided for "Title" and "Description" field: A11y_Visual Studio Code Web Extensions_Github Pull request_Create New Request_Labels or Instructions
Fixes #7595

* Address feedback

Author: alexr00

webviews/createPullRequestViewNew/app.tsx

@@ -220,6 +220,7 @@ export function main() {
 						</div>
 					</div>
 
+					<label htmlFor='title' className='input-title'>Title</label>
 					<div className='group-title'>
 						<input
 							id='title'
@@ -231,7 +232,6 @@ export function main() {
 							aria-invalid={!!params.showTitleValidationError}
 							aria-describedby={params.showTitleValidationError ? 'title-error' : ''}
 							placeholder='Title'
-							aria-label='Title'
 							title='Required'
 							required
 							onChange={(e) => updateTitle(e.currentTarget.value)}
@@ -325,12 +325,12 @@ export function main() {
 							: null}
 					</div>
 
+					<label htmlFor='description' className='input-title'>Description</label>
 					<div className='group-description'>
 						<textarea
 							id='description'
 							name='description'
 							placeholder='Description'
-							aria-label='Description'
 							value={params.pendingDescription}
 							onChange={(e) => ctx.updateState({ pendingDescription: e.currentTarget.value })}
 							onKeyDown={(e) => onKeyDown(false, e)}
@@ -371,13 +371,15 @@ export function main() {
 	);
 }
 
-export function Root({ children }) {
+interface RootProps { children: (params: CreateParamsNew) => JSX.Element }
+
+export function Root({ children }: RootProps): JSX.Element {
 	const ctx = useContext(PullRequestContextNew);
 	const [pr, setPR] = useState<any>(ctx.createParams);
 	useEffect(() => {
 		ctx.onchange = setPR;
 		setPR(ctx.createParams);
 	}, []);
 	ctx.postMessage({ command: 'ready' });
-	return children(pr);
+	return <>{children(pr)}</>;
 }

webviews/createPullRequestViewNew/index.css

@@ -31,7 +31,7 @@ textarea:disabled {
 
 .group-branches {
 	margin-top: 20px;
-	margin-bottom: 10px;
+	margin-bottom: 2px;
 }
 
 .input-label.base,
@@ -72,8 +72,8 @@ button.input-box {
 .input-label {
 	display: flex;
 	align-items: center;
-	font-variant-caps: all-small-caps;
-	font-size: small;
+	font-size: 11px;
+	text-transform: uppercase;
 	margin-bottom: 14px;
 }
 
@@ -86,6 +86,13 @@ button.input-box {
 
 /* Title, Description */
 
+.input-title {
+	display: block;
+	font-size: 11px;
+	margin-bottom: 4px;
+	text-transform: uppercase;
+}
+
 #title {
 	padding-right: 24px;
 	text-overflow: ellipsis;
@@ -95,6 +102,7 @@ button.input-box {
 	position: relative;
 	display: flex;
 	flex-direction: column;
+	margin-bottom: 12px;
 }
 
 .group-title .title-action:hover {
@@ -141,7 +149,6 @@ button.input-box {
 
 .group-description {
 	flex-grow: 1;
-	margin-top: 10px;
 	max-height: 500px;
 }