Add placeholder and aria attributes to release and wiki edit page (#24031)

- Add placeholders and aria-label all input fields on these two pages
- Add margin before wiki change message
- Remove labels from release page, replacing them with aria-label

options/locale/locale_en-US.ini

@@ -1746,6 +1746,8 @@ wiki.create_first_page = Create the First Page
 wiki.page = Page
 wiki.filter_page = Filter page
 wiki.new_page = Page
+wiki.page_title = Page title
+wiki.page_content = Page content
 wiki.default_commit_message = Write a note about this page update (optional).
 wiki.save_page = Save Page
 wiki.last_commit_info = %s edited this page %s
@@ -2311,9 +2313,9 @@ release.target = Target
 release.tag_helper = Choose an existing tag or create a new tag.
 release.tag_helper_new = New tag. This tag will be created from the target.
 release.tag_helper_existing = Existing tag.
-release.title = Title
+release.title = Release title
 release.title_empty = Title cannot be empty.
-release.content = Content
+release.message = Describe this release
 release.prerelease_desc = Mark as Pre-Release
 release.prerelease_helper = Mark this release unsuitable for production use.
 release.cancel = Cancel

templates/repo/release/new.tmpl

@@ -19,7 +19,7 @@
 					{{if .PageIsEditRelease}}
 						<b>{{.tag_name}}</b><span class="at">@</span><strong>{{.tag_target}}</strong>
 					{{else}}
-						<input id="tag-name" name="tag_name" value="{{.tag_name}}" placeholder="{{.locale.Tr "repo.release.tag_name"}}" autofocus required maxlength="255">
+						<input id="tag-name" name="tag_name" value="{{.tag_name}}" aria-label="{{.locale.Tr "repo.release.tag_name"}}" placeholder="{{.locale.Tr "repo.release.tag_name"}}" autofocus required maxlength="255">
 						<input id="tag-name-editor" type="hidden" data-existing-tags={{Json .Tags}} data-tag-helper={{.locale.Tr "repo.release.tag_helper"}} data-tag-helper-new={{.locale.Tr "repo.release.tag_helper_new"}} data-tag-helper-existing={{.locale.Tr "repo.release.tag_helper_existing"}}>
 						<div id="tag-target-selector" class="gt-dib">
 							<span class="at">@</span>
@@ -39,25 +39,24 @@
 							</div>
 						</div>
 						<div>
-							<span id="tag-helper" class="help gt-mt-2">{{.locale.Tr "repo.release.tag_helper"}}</span>
+							<span id="tag-helper" class="help gt-mt-3 gt-pb-0">{{.locale.Tr "repo.release.tag_helper"}}</span>
 						</div>
 					{{end}}
 				</div>
 			</div>
-			<div class="eleven wide column">
+			<div class="eleven wide column gt-pt-0">
 				<div class="field {{if .Err_Title}}error{{end}}">
-					<label>{{.locale.Tr "repo.release.title"}}</label>
+					<input name="title" aria-label="{{.locale.Tr "repo.release.title"}}" placeholder="{{.locale.Tr "repo.release.title"}}" value="{{.title}}" autofocus maxlength="255">
-					<input name="title" placeholder="{{.locale.Tr "repo.release.title"}}" value="{{.title}}" autofocus maxlength="255">
 				</div>
 				<div class="field">
-					<label>{{.locale.Tr "repo.release.content"}}</label>
-
 					{{template "shared/combomarkdowneditor" (dict
 						"locale" $.locale
 						"MarkdownPreviewUrl" (print .Repository.Link "/markup")
 						"MarkdownPreviewContext" .RepoLink
 						"TextareaName" "content"
 						"TextareaContent" .content
+						"TextareaPlaceholder" (.locale.Tr "repo.release.message")
+						"TextareaAriaLabel" (.locale.Tr "repo.release.message")
 						"DropzoneParentContainer" "form"
 					)}}
 				</div>

templates/repo/wiki/new.tmpl

@@ -14,7 +14,7 @@
 		<form class="ui form" action="{{.Link}}?action={{if .PageIsWikiEdit}}_edit{{else}}_new{{end}}" method="post">
 			{{.CsrfTokenHtml}}
 			<div class="field {{if .Err_Title}}error{{end}}">
-				<input name="title" value="{{.title}}" autofocus required>
+				<input name="title" value="{{.title}}" aria-label="{{.locale.Tr "repo.wiki.page_title"}}" placeholder="{{.locale.Tr "repo.wiki.page_title"}}" autofocus required>
 			</div>
 			<div class="help">
 				{{.locale.Tr "repo.wiki.page_name_desc"}}
@@ -29,11 +29,13 @@
 				"MarkdownPreviewUrl" (print .Repository.Link "/markup")
 				"MarkdownPreviewContext" .RepoLink
 				"TextareaName" "content"
+				"TextareaPlaceholder" (.locale.Tr "repo.wiki.page_content")
+				"TextareaAriaLabel" (.locale.Tr "repo.wiki.page_content")
 				"TextareaContent" $content
 			)}}
 
-			<div class="field">
+			<div class="field gt-mt-4">
-				<input name="message" placeholder="{{.locale.Tr "repo.wiki.default_commit_message"}}">
+				<input name="message" aria-label="{{.locale.Tr "repo.wiki.default_commit_message"}}" placeholder="{{.locale.Tr "repo.wiki.default_commit_message"}}">
 			</div>
 			<div class="text right">
 				<button class="ui green button">

templates/shared/combomarkdowneditor.tmpl

@@ -1,10 +1,15 @@
 {{/*
 Template Attributes:
-* locale
+* locale: passed through for localization
-* ContainerId / ContainerClasses : for the container element
+* ContainerId: id attribute for the container element
-* MarkdownPreviewUrl / MarkdownPreviewContext: for the preview tab
+* ContainerClasses: additional classes for the container element
-* TextareaName / TextareaContent / TextareaPlaceholder: for the main textarea
+* MarkdownPreviewUrl: preview url for the preview tab
-* DropzoneParentContainer: for file upload (leave it empty if no upload)
+* MarkdownPreviewContext: preview context for the preview tab
+* TextareaName: name attribute for the textarea
+* TextareaContent: content for the textarea
+* TextareaPlaceholder: placeholder attribute for the textarea
+* TextareaAriaLabel: aria-label attribute for the textarea
+* DropzoneParentContainer: container for file upload (leave it empty if no upload)
 */}}
 <div {{if .ContainerId}}id="{{.ContainerId}}"{{end}} class="combo-markdown-editor {{.ContainerClasses}}" data-dropzone-parent-container="{{.DropzoneParentContainer}}">
 	{{if .MarkdownPreviewUrl}}
@@ -40,7 +45,7 @@ Template Attributes:
 			</div>
 		</markdown-toolbar>
 		<text-expander keys=": @">
-			<textarea class="markdown-text-editor js-quick-submit" name="{{.TextareaName}}" placeholder="{{.TextareaPlaceholder}}">{{.TextareaContent}}</textarea>
+			<textarea class="markdown-text-editor js-quick-submit"{{if .TextareaName}} name="{{.TextareaName}}"{{end}}{{if .TextareaPlaceholder}} placeholder="{{.TextareaPlaceholder}}"{{end}}{{if .TextareaAriaLabel}} aria-label="{{.TextareaAriaLabel}}"{{end}}>{{.TextareaContent}}</textarea>
 		</text-expander>
 	</div>
 	<div class="ui tab markup" data-tab-panel="markdown-previewer">