From e95b42e187cde9ac4bd541cd714bdb4f5c1fd8bc Mon Sep 17 00:00:00 2001 From: delvh Date: Sun, 21 May 2023 22:47:41 +0200 Subject: [PATCH] Improve accessibility when (re-)viewing files (#24817) Visually, nothing should have changed. Changes include - Convert most `` to ` + @@ -52,7 +52,7 @@ {{if $.EscapeStatus.Escaped}} {{if $row.EscapeStatus.Escaped}} - + {{end}} {{end}} diff --git a/templates/repo/diff/blob_excerpt.tmpl b/templates/repo/diff/blob_excerpt.tmpl index 7e11b33ba..ab7abdbd7 100644 --- a/templates/repo/diff/blob_excerpt.tmpl +++ b/templates/repo/diff/blob_excerpt.tmpl @@ -3,28 +3,30 @@ {{if eq .GetType 4}} +
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}} - + {{end}} {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}} - + {{end}} {{if eq $line.GetExpandDirection 2}} - + {{end}} +
{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}{{/* */}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}} {{else}} {{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}} - {{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}{{end}} + {{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}{{end}} {{if $line.LeftIdx}}{{end}} {{/* */}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/* @@ -32,7 +34,7 @@ */}}{{end}}{{/* */}} - {{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}{{end}} + {{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}{{end}} {{if $line.RightIdx}}{{end}} {{/* */}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/* @@ -47,28 +49,30 @@ {{if eq .GetType 4}} - {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}} - - {{svg "octicon-fold-down"}} - - {{end}} - {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}} - - {{svg "octicon-fold-up"}} - - {{end}} - {{if eq $line.GetExpandDirection 2}} - - {{svg "octicon-fold"}} - - {{end}} +
+ {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}} + + {{end}} + {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}} + + {{end}} + {{if eq $line.GetExpandDirection 2}} + + {{end}} +
{{else}} {{end}} {{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}} - {{if $inlineDiff.EscapeStatus.Escaped}}{{end}} + {{if $inlineDiff.EscapeStatus.Escaped}}{{end}} {{$inlineDiff.Content}} diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 26b863ace..740b39dbd 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -90,13 +90,13 @@

- +
{{if $file.IsBin}} @@ -125,8 +125,8 @@ {{$.locale.Tr "repo.diff.protected"}} {{end}} {{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}} - {{$.locale.Tr "repo.unescape_control_characters"}} - {{$.locale.Tr "repo.escape_control_characters"}} + + {{end}} {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}} {{if $file.IsDeleted}} diff --git a/templates/repo/diff/section_split.tmpl b/templates/repo/diff/section_split.tmpl index 42aed8508..cb96d6405 100644 --- a/templates/repo/diff/section_split.tmpl +++ b/templates/repo/diff/section_split.tmpl @@ -16,23 +16,25 @@ {{if eq .GetType 4}} +
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}} - + {{end}} {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}} - + {{end}} {{if eq $line.GetExpandDirection 2}} - + {{end}} +
{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale}} - {{if $inlineDiff.EscapeStatus.Escaped}}{{end}} + {{if $inlineDiff.EscapeStatus.Escaped}}{{end}} {{/* */}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/* */}} @@ -41,7 +43,7 @@ {{- $leftDiff := ""}}{{if $line.LeftIdx}}{{$leftDiff = $section.GetComputedInlineDiffFor $line $.root.locale}}{{end}} {{- $rightDiff := ""}}{{if $match.RightIdx}}{{$rightDiff = $section.GetComputedInlineDiffFor $match $.root.locale}}{{end}} - {{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}{{end}}{{end}} + {{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}{{end}}{{end}} {{if $match.RightIdx}}{{end}} {{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* @@ -73,7 +75,7 @@ {{else}} {{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale}} - {{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}{{end}}{{end}} + {{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}{{end}}{{end}} {{if $line.LeftIdx}}{{end}} {{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/* @@ -88,7 +90,7 @@ */}}{{end}}{{/* */}} - {{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}{{end}}{{end}} + {{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}{{end}}{{end}} {{if $line.RightIdx}}{{end}} {{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/* diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl index 8bf331f6d..d97085315 100644 --- a/templates/repo/diff/section_unified.tmpl +++ b/templates/repo/diff/section_unified.tmpl @@ -12,21 +12,23 @@ {{if eq .GetType 4}} {{if $.root.AfterCommitID}} - {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}} - - {{svg "octicon-fold-down"}} - - {{end}} - {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}} - - {{svg "octicon-fold-up"}} - - {{end}} - {{if eq $line.GetExpandDirection 2}} - - {{svg "octicon-fold"}} - - {{end}} +
+ {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}} + + {{end}} + {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}} + + {{end}} + {{if eq $line.GetExpandDirection 2}} + + {{end}} +
{{else}} {{/* for code file preview page or comment diffs on pull comment pages, do not show the expansion arrows */}} @@ -37,7 +39,11 @@ {{end}} {{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale -}} - {{if $inlineDiff.EscapeStatus.Escaped}}{{end}} + + {{- if $inlineDiff.EscapeStatus.Escaped -}} + + {{- end -}} + {{if eq .GetType 4}} {{/* diff --git a/templates/repo/issue/labels/labels_selector_field.tmpl b/templates/repo/issue/labels/labels_selector_field.tmpl index 00d852bba..350cf631e 100644 --- a/templates/repo/issue/labels/labels_selector_field.tmpl +++ b/templates/repo/issue/labels/labels_selector_field.tmpl @@ -1,10 +1,10 @@
- + {{.locale.Tr "repo.issues.new.labels"}} {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} {{svg "octicon-gear" 16 "gt-ml-2"}} {{end}} - +
{{.locale.Tr "repo.issues.new.add_labels_title"}}
{{if or .Labels .OrgLabels}} diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl index f9febbde0..085702549 100644 --- a/templates/repo/issue/view_title.tmpl +++ b/templates/repo/issue/view_title.tmpl @@ -45,12 +45,12 @@ {{if .Issue.IsPull}} {{$headHref := .HeadTarget|Escape}} {{if .HeadBranchLink}} - {{$headHref = printf "%s" (.HeadBranchLink | Escape) $headHref}} + {{$headHref = printf `%s` (.HeadBranchLink | Escape) $headHref}} {{end}} - {{$headHref = printf "%s %s" $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}} + {{$headHref = printf `%s ` $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}} {{$baseHref := .BaseTarget|Escape}} {{if .BaseBranchLink}} - {{$baseHref = printf "%s" (.BaseBranchLink | Escape) $baseHref}} + {{$baseHref = printf `%s` (.BaseBranchLink | Escape) $baseHref}} {{end}} {{if .Issue.PullRequest.HasMerged}} {{$mergedStr:= TimeSinceUnix .Issue.PullRequest.MergedUnix $.locale}} diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index 03f90d71f..f50d8646d 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -36,8 +36,8 @@ {{end}} {{.locale.Tr "repo.file_history"}} {{if .EscapeStatus.Escaped}} - {{.locale.Tr "repo.unescape_control_characters"}} - {{.locale.Tr "repo.escape_control_characters"}} + + {{end}}
{{svg "octicon-download"}} @@ -58,8 +58,8 @@ {{end}} {{end}} {{else if .EscapeStatus.Escaped}} - {{.locale.Tr "repo.unescape_control_characters"}} - {{.locale.Tr "repo.escape_control_characters"}} + + {{end}}

@@ -107,7 +107,7 @@ {{if $.EscapeStatus.Escaped}} - {{if (index $.LineEscapeStatus $idx).Escaped}}{{end}} + {{if (index $.LineEscapeStatus $idx).Escaped}}{{end}} {{end}} {{$code | Safe}} diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl index 92fbf5814..dc1bbc84d 100644 --- a/templates/user/settings/profile.tmpl +++ b/templates/user/settings/profile.tmpl @@ -125,7 +125,7 @@
- {{$.locale.Tr "settings.delete_current_avatar"}} +
diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 73096a643..ddcc258be 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2943,7 +2943,7 @@ tbody.commit-list { padding-top: 0 !important; } -td.blob-excerpt { +.blob-excerpt { background-color: var(--color-secondary-alpha-30); } diff --git a/web_src/css/review.css b/web_src/css/review.css index d57fcc85d..d44e98584 100644 --- a/web_src/css/review.css +++ b/web_src/css/review.css @@ -21,7 +21,7 @@ transform: scale(1.1); } -.lines-escape a.toggle-escape-button::before { +.lines-escape .toggle-escape-button::before { visibility: visible; content: "⚠️"; font-family: var(--fonts-emoji); @@ -198,7 +198,8 @@ color: var(--color-text); } -a.blob-excerpt { +.code-expander-button { + border: none; color: var(--color-text-light); height: 28px; display: flex; @@ -206,9 +207,10 @@ a.blob-excerpt { align-items: center; width: 100%; background: var(--color-expand-button); + flex: 1; } -a.blob-excerpt:hover { +.code-expander-button:hover { background: var(--color-primary); color: var(--color-primary-contrast); } diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index 8245aa57f..d4d955601 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -56,9 +56,8 @@ export function initGlobalEnterQuickSubmit() { } export function initGlobalButtonClickOnEnter() { - $(document).on('keypress', '.ui.button', (e) => { - if (e.keyCode === 13 || e.keyCode === 32) { // enter key or space bar - if (e.target.nodeName === 'BUTTON') return; // button already handles space&enter correctly + $(document).on('keypress', 'div.ui.button,span.ui.button', (e) => { + if (e.code === ' ' || e.code === 'Enter') { $(e.target).trigger('click'); e.preventDefault(); } diff --git a/web_src/js/features/pull-view-file.js b/web_src/js/features/pull-view-file.js index e57663736..daa520ea7 100644 --- a/web_src/js/features/pull-view-file.js +++ b/web_src/js/features/pull-view-file.js @@ -38,7 +38,7 @@ export function initViewedCheckboxListenerFor() { // The checkbox consists of a div containing the real checkbox with its label and the CSRF token, // hence the actual checkbox first has to be found const checkbox = form.querySelector('input[type=checkbox]'); - checkbox.addEventListener('change', function() { + checkbox.addEventListener('input', function() { // Mark the file as viewed visually - will especially change the background if (this.checked) { form.classList.add(viewedStyleClass); diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js index 9b504068f..73eccaf19 100644 --- a/web_src/js/features/repo-code.js +++ b/web_src/js/features/repo-code.js @@ -181,7 +181,7 @@ export function initRepoCodeView() { $(document).on('click', '.fold-file', ({currentTarget}) => { invertFileFolding(currentTarget.closest('.file-content'), currentTarget); }); - $(document).on('click', '.blob-excerpt', async ({currentTarget}) => { + $(document).on('click', '.code-expander-button', async ({currentTarget}) => { const url = currentTarget.getAttribute('data-url'); const query = currentTarget.getAttribute('data-query'); const anchor = currentTarget.getAttribute('data-anchor'); diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index 5a9f5ba0a..d0622254b 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -62,9 +62,9 @@ function initRepoDiffConversationForm() { $form.closest('.conversation-holder').replaceWith($newConversationHolder); if ($form.closest('tr').data('line-type') === 'same') { - $(`[data-path="${path}"] a.add-code-comment[data-idx="${idx}"]`).addClass('invisible'); + $(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).addClass('invisible'); } else { - $(`[data-path="${path}"] a.add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('invisible'); + $(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('invisible'); } $newConversationHolder.find('.dropdown').dropdown(); initCompReactionSelector($newConversationHolder); diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index 3723e0f62..cf6e09472 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -177,9 +177,9 @@ export function initRepoIssueCommentDelete() { const idx = $conversationHolder.data('idx'); const lineType = $conversationHolder.closest('tr').data('line-type'); if (lineType === 'same') { - $(`[data-path="${path}"] a.add-code-comment[data-idx="${idx}"]`).removeClass('invisible'); + $(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).removeClass('invisible'); } else { - $(`[data-path="${path}"] a.add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('invisible'); + $(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('invisible'); } $conversationHolder.remove(); } @@ -488,7 +488,7 @@ export function initRepoPullRequestReview() { }); } - $(document).on('click', 'a.add-code-comment', async function (e) { + $(document).on('click', '.add-code-comment', async function (e) { if ($(e.target).hasClass('btn-add-single')) return; // https://github.com/go-gitea/gitea/issues/4745 e.preventDefault(); diff --git a/web_src/js/features/repo-unicode-escape.js b/web_src/js/features/repo-unicode-escape.js index 67f2df1d9..6a201ec4d 100644 --- a/web_src/js/features/repo-unicode-escape.js +++ b/web_src/js/features/repo-unicode-escape.js @@ -2,30 +2,30 @@ import $ from 'jquery'; import {hideElem, showElem} from '../utils/dom.js'; export function initUnicodeEscapeButton() { - $(document).on('click', 'a.escape-button', (e) => { + $(document).on('click', '.escape-button', (e) => { e.preventDefault(); $(e.target).parents('.file-content, .non-diff-file-content').find('.file-code, .file-view').addClass('unicode-escaped'); hideElem($(e.target)); - showElem($(e.target).siblings('a.unescape-button')); + showElem($(e.target).siblings('.unescape-button')); }); - $(document).on('click', 'a.unescape-button', (e) => { + $(document).on('click', '.unescape-button', (e) => { e.preventDefault(); $(e.target).parents('.file-content, .non-diff-file-content').find('.file-code, .file-view').removeClass('unicode-escaped'); hideElem($(e.target)); - showElem($(e.target).siblings('a.escape-button')); + showElem($(e.target).siblings('.escape-button')); }); - $(document).on('click', 'a.toggle-escape-button', (e) => { + $(document).on('click', '.toggle-escape-button', (e) => { e.preventDefault(); const fileContent = $(e.target).parents('.file-content, .non-diff-file-content'); const fileView = fileContent.find('.file-code, .file-view'); if (fileView.hasClass('unicode-escaped')) { fileView.removeClass('unicode-escaped'); - hideElem(fileContent.find('a.unescape-button')); - showElem(fileContent.find('a.escape-button')); + hideElem(fileContent.find('.unescape-button')); + showElem(fileContent.find('.escape-button')); } else { fileView.addClass('unicode-escaped'); - showElem(fileContent.find('a.unescape-button')); - hideElem(fileContent.find('a.escape-button')); + showElem(fileContent.find('.unescape-button')); + hideElem(fileContent.find('.escape-button')); } }); }