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

Author: alexr00

webviews/createPullRequestViewNew/app.tsx

@@ -192,7 +192,7 @@ export function main() {
 					<div className='group-branches'>
 						<div className='input-label base'>
 							<div className="deco">
-								<span title='Base branch' aria-hidden='true'>{prBaseIcon} Base</span>
+								<span title='Base branch' aria-hidden='true'>{prBaseIcon} BASE</span>
 							</div>
 							<ChooseRemoteAndBranch onClick={ctx.changeBaseRemoteAndBranch}
 								defaultRemote={params.baseRemote}
@@ -205,7 +205,7 @@ export function main() {
 
 						<div className='input-label merge'>
 							<div className="deco">
-								<span title='Merge branch' aria-hidden='true'>{prMergeIcon} {params.actionDetail ? params.actionDetail : 'Merge'}</span>
+								<span title='Merge branch' aria-hidden='true'>{prMergeIcon} {params.actionDetail ? params.actionDetail : 'MERGE'}</span>
 							</div>
 							{ctx.createParams.canModifyBranches ?
 								<ChooseRemoteAndBranch onClick={ctx.changeMergeRemoteAndBranch}
@@ -220,6 +220,7 @@ export function main() {
 						</div>
 					</div>
 
+					<span className='input-title'>TITLE</span>
 					<div className='group-title'>
 						<input
 							id='title'
@@ -325,6 +326,7 @@ export function main() {
 							: null}
 					</div>
 
+					<span className='input-title'>DESCRIPTION</span>
 					<div className='group-description'>
 						<textarea
 							id='description'

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,7 @@ button.input-box {
 .input-label {
 	display: flex;
 	align-items: center;
-	font-variant-caps: all-small-caps;
-	font-size: small;
+	font-size: 11px;
 	margin-bottom: 14px;
 }
 
@@ -86,6 +85,12 @@ button.input-box {
 
 /* Title, Description */
 
+.input-title {
+	display: block;
+	font-size: 11px;
+	margin-bottom: 4px;
+}
+
 #title {
 	padding-right: 24px;
 	text-overflow: ellipsis;
@@ -95,6 +100,7 @@ button.input-box {
 	position: relative;
 	display: flex;
 	flex-direction: column;
+	margin-bottom: 12px;
 }
 
 .group-title .title-action:hover {
@@ -141,7 +147,6 @@ button.input-box {
 
 .group-description {
 	flex-grow: 1;
-	margin-top: 10px;
 	max-height: 500px;
 }