forked from gitea/gitea
		
	 81fe5d6185
			
		
	
	
		81fe5d6185
		
			
		
	
	
	
	
		
			
			This improves a lot of accessibility shortcomings. Every possible instance of `<div class="button">` matching the command `ag '<[^ab].*?class=.*?[" ]button[ "]' templates/ | grep -v 'dropdown'` has been converted when possible. divs with the `dropdown` class and their children were omitted as 1. more analysis must be conducted whether the dropdowns still work as intended when they are a `button` instead of a `div`. 2. most dropdowns have `div`s as children. The HTML standard disallows `div`s inside `button`s. 3. When a dropdown child that's part of the displayed text content is converted to a `button`, the dropdown can be focused twice Further changes include that all "gitea-managed" buttons with JS code received an `e.preventDefault()` so that they don't accidentally submit an underlying form, which would execute instead of cancel the action. Lastly, some minor issues were fixed as well during the refactoring. ## Future improvements As mentioned in https://github.com/go-gitea/gitea/pull/23337#discussion_r1127277391, `<a>`s without `href` attribute are not focusable. They should later on be converted to `<button>`s. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: techknowlogick <techknowlogick@gitea.io> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
		
			
				
	
	
		
			136 lines
		
	
	
		
			5.3 KiB
		
	
	
	
		
			Handlebars
		
	
	
	
	
	
			
		
		
	
	
			136 lines
		
	
	
		
			5.3 KiB
		
	
	
	
		
			Handlebars
		
	
	
	
	
	
| {{template "base/head" .}}
 | |
| <div role="main" aria-label="{{.Title}}" class="page-content user settings repos">
 | |
| 	{{template "user/settings/navbar" .}}
 | |
| 	<div class="ui container">
 | |
| 		{{template "base/alert" .}}
 | |
| 		<h4 class="ui top attached header">
 | |
| 			{{.locale.Tr "settings.repos"}}
 | |
| 		</h4>
 | |
| 		<div class="ui attached segment">
 | |
| 			{{if or .allowAdopt .allowDelete}}
 | |
| 				{{if .Dirs}}
 | |
| 					<div class="ui middle aligned divided list">
 | |
| 						{{range $dirI, $dir := .Dirs}}
 | |
| 							{{$repo := index $.ReposMap $dir}}
 | |
| 							<div class="item">
 | |
| 								<div class="content">
 | |
| 									{{if $repo}}
 | |
| 										{{if $repo.IsPrivate}}
 | |
| 											<span class="text gold icon">{{svg "octicon-lock"}}</span>
 | |
| 										{{else if $repo.IsFork}}
 | |
| 											<span class="icon">{{svg "octicon-repo-forked"}}</span>
 | |
| 										{{else if $repo.IsMirror}}
 | |
| 											<span class="icon">{{svg "octicon-mirror"}}</span>
 | |
| 										{{else if $repo.IsTemplate}}
 | |
| 											<span class="icon">{{svg "octicon-repo-template"}}</span>
 | |
| 										{{else}}
 | |
| 											<span class="icon">{{svg "octicon-repo"}}</span>
 | |
| 										{{end}}
 | |
| 										<a class="name" href="{{$repo.Link}}">{{$repo.OwnerName}}/{{$repo.Name}}</a>
 | |
| 										<span>{{FileSize $repo.Size}}</span>
 | |
| 										{{if $repo.IsFork}}
 | |
| 											{{$.locale.Tr "repo.forked_from"}}
 | |
| 											<span><a href="{{$repo.BaseRepo.Link}}">{{$repo.BaseRepo.OwnerName}}/{{$repo.BaseRepo.Name}}</a></span>
 | |
| 										{{end}}
 | |
| 									{{else}}
 | |
| 										<span class="icon">{{svg "octicon-file-directory-fill"}}</span>
 | |
| 										<span class="name">{{$.Owner.Name}}/{{$dir}}</span>
 | |
| 										<div class="right floated content">
 | |
| 											{{if $.allowAdopt}}
 | |
| 												<button class="ui button submit tiny green adopt show-modal" data-modal="#adopt-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-plus"}}</span><span class="label">{{$.locale.Tr "repo.adopt_preexisting_label"}}</span></button>
 | |
| 												<div class="ui basic modal" id="adopt-unadopted-modal-{{$dirI}}">
 | |
| 													{{svg "octicon-x" 16 "close inside"}}
 | |
| 													<div class="header">
 | |
| 														<span class="label">{{$.locale.Tr "repo.adopt_preexisting"}}</span>
 | |
| 													</div>
 | |
| 													<div class="content">
 | |
| 														<p>{{$.locale.Tr "repo.adopt_preexisting_content" $dir}}</p>
 | |
| 													</div>
 | |
| 													<form class="ui form" method="POST" action="{{AppSubUrl}}/user/settings/repos/unadopted">
 | |
| 														{{$.CsrfTokenHtml}}
 | |
| 														<input type="hidden" name="id" value="{{$dir}}">
 | |
| 														<input type="hidden" name="action" value="adopt">
 | |
| 														{{template "base/delete_modal_actions" .}}
 | |
| 													</form>
 | |
| 												</div>
 | |
| 											{{end}}
 | |
| 											{{if $.allowDelete}}
 | |
| 												<button class="ui button submit tiny red delete show-modal" data-modal="#delete-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-x"}}</span><span class="label">{{$.locale.Tr "repo.delete_preexisting_label"}}</span></button>
 | |
| 												<div class="ui basic modal" id="delete-unadopted-modal-{{$dirI}}">
 | |
| 													{{svg "octicon-x" 16 "close inside"}}
 | |
| 													<div class="header">
 | |
| 														<span class="label">{{$.locale.Tr "repo.delete_preexisting"}}</span>
 | |
| 													</div>
 | |
| 													<div class="content">
 | |
| 														<p>{{$.locale.Tr "repo.delete_preexisting_content" $dir}}</p>
 | |
| 													</div>
 | |
| 													<form class="ui form" method="POST" action="{{AppSubUrl}}/user/settings/repos/unadopted">
 | |
| 														{{$.CsrfTokenHtml}}
 | |
| 														<input type="hidden" name="id" value="{{$dir}}">
 | |
| 														<input type="hidden" name="action" value="delete">
 | |
| 														{{template "base/delete_modal_actions" .}}
 | |
| 													</form>
 | |
| 												</div>
 | |
| 											{{end}}
 | |
| 										</div>
 | |
| 									{{end}}
 | |
| 								</div>
 | |
| 							</div>
 | |
| 						{{end}}
 | |
| 					</div>
 | |
| 					{{template "base/paginate" .}}
 | |
| 				{{else}}
 | |
| 					<div class="item">
 | |
| 						{{.locale.Tr "settings.repos_none"}}
 | |
| 					</div>
 | |
| 				{{end}}
 | |
| 			{{else}}
 | |
| 				{{if .Repos}}
 | |
| 					<div class="ui middle aligned divided list">
 | |
| 						{{range .Repos}}
 | |
| 							<div class="item">
 | |
| 								<div class="content">
 | |
| 									{{if .IsPrivate}}
 | |
| 										{{svg "octicon-lock" 16 "gt-mr-2 iconFloat text gold"}}
 | |
| 									{{else if .IsFork}}
 | |
| 										{{svg "octicon-repo-forked" 16 "gt-mr-2 iconFloat"}}
 | |
| 									{{else if .IsMirror}}
 | |
| 										{{svg "octicon-mirror" 16 "gt-mr-2 iconFloat"}}
 | |
| 									{{else if .IsTemplate}}
 | |
| 										{{svg "octicon-repo-template" 16 "gt-mr-2 iconFloat"}}
 | |
| 									{{else}}
 | |
| 										{{svg "octicon-repo" 16 "gt-mr-2 iconFloat"}}
 | |
| 									{{end}}
 | |
| 									<a class="name" href="{{.Link}}">{{.OwnerName}}/{{.Name}}</a>
 | |
| 									<span>{{FileSize .Size}}</span>
 | |
| 									{{if .IsFork}}
 | |
| 										{{$.locale.Tr "repo.forked_from"}}
 | |
| 										<span><a href="{{.BaseRepo.Link}}">{{.BaseRepo.OwnerName}}/{{.BaseRepo.Name}}</a></span>
 | |
| 									{{end}}
 | |
| 								</div>
 | |
| 							</div>
 | |
| 						{{end}}
 | |
| 					</div>
 | |
| 					{{template "base/paginate" .}}
 | |
| 				{{else}}
 | |
| 					<div class="item">
 | |
| 						{{.locale.Tr "settings.repos_none"}}
 | |
| 					</div>
 | |
| 				{{end}}
 | |
| 			{{end}}
 | |
| 		</div>
 | |
| 	</div>
 | |
| </div>
 | |
| 
 | |
| <div class="ui small basic delete modal">
 | |
| 	<div class="ui icon header">
 | |
| 		{{svg "octicon-trash"}}
 | |
| 		{{.locale.Tr "settings.remove_account_link"}}
 | |
| 	</div>
 | |
| 	<div class="content">
 | |
| 		<p>{{.locale.Tr "settings.remove_account_link_desc"}}</p>
 | |
| 	</div>
 | |
| 	{{template "base/delete_modal_actions" .}}
 | |
| </div>
 | |
| {{template "base/footer" .}}
 |