diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index da925a27f5d3d..667ca4e1f6dde 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -14,10 +14,13 @@ powered_by = Powered by %s page = Page template = Template language = Language +language_select = Select a language notifications = Notifications active_stopwatch = Active Time Tracker create_new = Create… +create_new_select = Select an item to create… user_profile_and_more = Profile and Settings… +user_action_select = Select a user action to do… signed_in_as = Signed in as enable_javascript = This website works better with JavaScript. toc = Table of Contents @@ -918,6 +921,7 @@ mirror_password_help = Change the username to erase a stored password. watchers = Watchers stargazers = Stargazers forks = Forks +reactions = Reactions pick_reaction = Pick your reaction reactions_more = and %d more unit_disabled = The site administrator has disabled this repository section. @@ -1363,6 +1367,7 @@ issues.draft_title = Draft issues.num_comments = %d comments issues.commented_at = `commented %s` issues.delete_comment_confirm = Are you sure you want to delete this comment? +issues.context.options_button = Comment Options issues.context.copy_link = Copy Link issues.context.quote_reply = Quote Reply issues.context.reference_issue = Reference in New Issue @@ -1545,6 +1550,7 @@ issues.content_history.delete_from_history = Delete from history issues.content_history.delete_from_history_confirm = Delete from history? issues.content_history.options = Options issues.reference_link = Reference: %s +issues.reference_button = Copy reference to clipboard compare.compare_base = base compare.compare_head = compare diff --git a/templates/base/footer_content.tmpl b/templates/base/footer_content.tmpl index 53d0a2c77cf18..05f3973fbcacb 100644 --- a/templates/base/footer_content.tmpl +++ b/templates/base/footer_content.tmpl @@ -19,9 +19,9 @@ {{if .ShowFooterBranding}} {{svg "octicon-mark-github"}}GitHub {{end}} -
+
{{svg "octicon-globe"}} - {{.locale.LangName}} + {{.locale.LangName}}
{{range .AllLangs}} {{.Name}} diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index 24b4e18fbff2e..237bbf2b9dc53 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -133,7 +133,7 @@ {{.locale.Tr "create_new"}} {{svg "octicon-triangle-down"}} -
+
{{svg "octicon-plus"}} {{.locale.Tr "new_repo"}} @@ -151,13 +151,12 @@
- + {{avatar $.Context .SignedUser 24 "tiny"}} - {{.locale.Tr "user_profile_and_more"}} {{.SignedUser.Name}} - {{svg "octicon-triangle-down"}} + {{svg "octicon-triangle-down"}} -
+
{{.locale.Tr "signed_in_as"}} {{.SignedUser.Name}}
diff --git a/templates/repo/issue/labels/labels_selector_field.tmpl b/templates/repo/issue/labels/labels_selector_field.tmpl index 00d852bba98b3..92e3a43fe1404 100644 --- a/templates/repo/issue/labels/labels_selector_field.tmpl +++ b/templates/repo/issue/labels/labels_selector_field.tmpl @@ -1,4 +1,4 @@ -
+
{{.locale.Tr "repo.issues.new.labels"}} {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} @@ -10,7 +10,7 @@ {{if or .Labels .OrgLabels}}
{{svg "octicon-search" 16}} - +
{{end}} {{.locale.Tr "repo.issues.new.clear_labels"}} diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl index b45a00f781403..7e6f51d3c4ab5 100644 --- a/templates/repo/issue/new_form.tmpl +++ b/templates/repo/issue/new_form.tmpl @@ -11,7 +11,7 @@ {{template "shared/user/avatarlink" Dict "Context" $.Context "user" .SignedUser}}
- + {{if .PageIsComparePull}}
{{.locale.Tr "repo.pulls.title_wip_desc" (index .PullRequestWorkInProgressPrefixes 0| Escape) | Safe}}
{{end}} @@ -42,19 +42,19 @@
-
+
{{.locale.Tr "repo.issues.new.milestone"}} {{if .HasIssuesOrPullsWritePermission}} {{svg "octicon-gear"}} {{end}} -
+
{{.locale.Tr "repo.issues.new.add_milestone_title"}}
{{if or .OpenMilestones .ClosedMilestones}}
{{svg "octicon-search" 16}} - +
{{end}}
{{.locale.Tr "repo.issues.new.clear_milestone"}}
@@ -106,19 +106,19 @@
-
+
{{.locale.Tr "repo.issues.new.projects"}} {{if .HasIssuesOrPullsWritePermission}} {{svg "octicon-gear"}} {{end}} -
+
{{.locale.Tr "repo.issues.new.add_project_title"}}
{{if or .OpenProjects .ClosedProjects}}
{{svg "octicon-search" 16}} - +
{{end}}
{{.locale.Tr "repo.issues.new.clear_projects"}}
@@ -168,18 +168,18 @@ {{end}}
-
+
{{.locale.Tr "repo.issues.new.assignees"}} {{if .HasIssuesOrPullsWritePermission}} {{svg "octicon-gear"}} {{end}} -
+
{{.locale.Tr "repo.issues.new.add_assignees_title"}}
{{svg "octicon-search" 16}} - +
{{.locale.Tr "repo.issues.new.clear_assignees"}}
{{range .Assignees}} diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index 94c1813bf7735..b43e094b83944 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -1,13 +1,13 @@ {{if .ctxData.IsSigned}} -
+
{{svg "octicon-smiley"}} -
+
{{.ctxData.locale.Tr "repo.pick_reaction"}}
{{range $value := AllowedReactions}} - {{ReactionToEmoji $value}} + {{ReactionToEmoji $value}} {{end}}
diff --git a/templates/repo/issue/view_content/context_menu.tmpl b/templates/repo/issue/view_content/context_menu.tmpl index 0cc207afd4d90..171bc640f14b4 100644 --- a/templates/repo/issue/view_content/context_menu.tmpl +++ b/templates/repo/issue/view_content/context_menu.tmpl @@ -1,5 +1,5 @@ {{if .ctxData.IsSigned}} -
+
{{svg "octicon-kebab-horizontal"}} diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl index 40d87b41785b8..12e744f86ede5 100644 --- a/templates/repo/issue/view_content/sidebar.tmpl +++ b/templates/repo/issue/view_content/sidebar.tmpl @@ -5,7 +5,7 @@ {{if .Issue.IsPull}} -
+
{{.locale.Tr "repo.issues.review.reviewers"}} {{if and .CanChooseReviewer (not .Repository.IsArchived)}} @@ -17,7 +17,7 @@ {{if .Reviewers}}
{{svg "octicon-search" 16}} - +
{{end}} {{if .Reviewers}} @@ -110,7 +110,7 @@
-
+
{{.locale.Tr "repo.issues.new.milestone"}} {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} @@ -122,7 +122,7 @@ {{if or .OpenMilestones .ClosedMilestones}}
{{svg "octicon-search" 16}} - +
{{end}}
{{.locale.Tr "repo.issues.new.clear_milestone"}}
@@ -173,7 +173,7 @@ {{if .IsProjectsEnabled}}
-
+
{{.locale.Tr "repo.issues.new.projects"}} {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} @@ -185,7 +185,7 @@ {{if or .OpenProjects .ClosedProjects}}
{{svg "octicon-search" 16}} - +
{{end}}
{{.locale.Tr "repo.issues.new.clear_projects"}}
@@ -231,7 +231,7 @@
-
+
{{.locale.Tr "repo.issues.new.assignees"}} {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} @@ -242,7 +242,7 @@
{{.locale.Tr "repo.issues.new.add_assignees_title"}}
{{svg "octicon-search" 16}} - +
{{.locale.Tr "repo.issues.new.clear_assignees"}}
{{range .Assignees}} @@ -407,7 +407,7 @@
{{$.CsrfTokenHtml}} -
{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}} - + {{end}}
@@ -494,13 +494,13 @@ {{$.CsrfTokenHtml}}
- @@ -548,7 +548,7 @@ {{$issueReferenceLink := printf "%s#%d" .Issue.Repo.FullName .Issue.Index}}
{{.locale.Tr "repo.issues.reference_link" $issueReferenceLink}} - +
diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js index 676f4cd56c77e..3f06c8e3f6c28 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -6,8 +6,36 @@ function generateAriaId() { return `_aria_auto_id_${ariaIdCounter++}`; } +// make the items has role=option, and add an id if there wasn't one yet. +function prepareList($list) { + const $items = $list.find('> .item'); + $items.each((_, item) => { + if (!$(item).attr('id')) $(item).attr('id', generateAriaId()); + $(item).attr({'role': 'option', 'tabindex': '-1'}); + $(item).find('a').attr('tabindex', '-1'); // as above, the elements inside the dropdown menu item should not be focusable, the focus should always be on the dropdown primary element. + if ($(item).hasClass('selected')) $(item).attr('aria-current', 'true'); + $(item).find('a.item').each((_, it) => { + if ($(it).hasClass('checked')) { + it.attr('aria-checked', 'true'); + } + }); + }); + $list.find('> .header').each((_, header) => { $(header).attr('role', 'none') }); + $list.find('> .divider').each((_, divider) => { $(divider).attr('role', 'none') }); +} + +// clean indentation data included as text nodes without content but spaces and newlines +// this problem is generated by an inline containers as `span` used without a proper content container, so the empty text nodes with newlines provenient from the templates produced these nodes in the DOM which generates noises in screen readers. +function cleanVoidTextContent($container) { + for (const el of $container.get(0).childNodes) { + if (el.nodeType === Node.TEXT_NODE && el.textContent.trim() === '') { + el.remove(); + } + } +} + function attachOneDropdownAria($dropdown) { - if ($dropdown.attr('data-aria-attached') || $dropdown.hasClass('custom')) return; + if ($dropdown.data('module-dropdown') === undefined || $dropdown.attr('data-aria-attached')) return; $dropdown.attr('data-aria-attached', 1); // Dropdown has 2 different focusing behaviors @@ -25,40 +53,22 @@ function attachOneDropdownAria($dropdown) { // TODO: multiple selection is not supported yet. + // find search input const $textSearch = $dropdown.find('input.search').eq(0); const $focusable = $textSearch.length ? $textSearch : $dropdown; // the primary element for focus, see comment above - if (!$focusable.length) return; - - // There are 2 possible solutions about the role: combobox or menu. - // The idea is that if there is an input, then it's a combobox, otherwise it's a menu. - // Since #19861 we have prepared the "combobox" solution, but didn't get enough time to put it into practice and test before. - const isComboBox = $dropdown.find('input').length > 0; - - const focusableRole = isComboBox ? 'combobox' : 'button'; - const listPopupRole = isComboBox ? 'listbox' : 'menu'; - const listItemRole = isComboBox ? 'option' : 'menuitem'; - - // make the item has role=option/menuitem, add an id if there wasn't one yet, make items as non-focusable - // the elements inside the dropdown menu item should not be focusable, the focus should always be on the dropdown primary element. - function prepareMenuItem($item) { - if (!$item.attr('id')) $item.attr('id', generateAriaId()); - $item.attr({'role': listItemRole, 'tabindex': '-1'}); - $item.find('a').attr('tabindex', '-1'); - } - // delegate the dropdown's template function to add aria attributes. - // the "template" functions are used for dynamic creation (eg: AJAX) - const dropdownTemplates = {...$dropdown.dropdown('setting', 'templates')}; - const dropdownTemplatesMenuOld = dropdownTemplates.menu; - dropdownTemplates.menu = function(response, fields, preserveHTML, className) { - // when the dropdown menu items are loaded from AJAX requests, the items are created dynamically - const menuItems = dropdownTemplatesMenuOld(response, fields, preserveHTML, className); - const $wrapper = $('
').append(menuItems); - const $items = $wrapper.find('> .item'); - $items.each((_, item) => prepareMenuItem($(item))); - return $wrapper.html(); + // remove empty text to avoid screen reader noise + cleanVoidTextContent($dropdown); + + // when the menu items are loaded from AJAX requests, the items are created dynamically + // custom build menu function to add roles dynamicaly + const setup = $dropdown.data('module-dropdown').internal('setup'); + setup.menu = function(values) { + const $menu = $dropdown.children($dropdown.data('module-dropdown').setting('selector').menu); + $menu.html($.fn.dropdown.settings.templates.menu(values, $dropdown.data('module-dropdown').setting('fields'), $dropdown.data('module-dropdown').setting('preserveHTML'), $dropdown.data('module-dropdown').setting('className'))); + prepareList($menu); }; - $dropdown.dropdown('setting', 'templates', dropdownTemplates); + $dropdown.data('module-dropdown').internal('setup', setup); // use tooltip's content as aria-label if there is no aria-label if ($dropdown.hasClass('tooltip') && $dropdown.attr('data-content') && !$dropdown.attr('aria-label')) { @@ -67,46 +77,97 @@ function attachOneDropdownAria($dropdown) { // prepare dropdown menu list popup const $menu = $dropdown.find('> .menu'); - if (!$menu.attr('id')) $menu.attr('id', generateAriaId()); - $menu.find('> .item').each((_, item) => { - prepareMenuItem($(item)); - }); - // this role could only be changed after its content is ready, otherwise some browsers+readers (like Chrome+AppleVoice) crash - $menu.attr('role', listPopupRole); - - // make the primary element (focusable) aria-friendly - $focusable.attr({ - 'role': $focusable.attr('role') ?? focusableRole, - 'aria-haspopup': listPopupRole, - 'aria-controls': $menu.attr('id'), + // prepare list items + prepareList($menu); + // prepare widget + $dropdown.attr({ + 'role': 'combobox', + 'aria-haspopup': 'listbox', 'aria-expanded': 'false', }); - + // prepare label + const $label = $dropdown.find('> .text'); + if ($label.length) { + cleanVoidTextContent($label); + $label.attr('role', 'none'); + $label.attr('id', generateAriaId()); + $dropdown.attr('aria-details', $label.attr('id')); + } else if ($dropdown.find('> a').length) { + $dropdown.find('> a').attr('aria-hidden', 'true'); + } + // prepare filter input + const $filter = $dropdown.find('> .menu > .search').eq(0); + let $list = $menu; + if ($filter.length) { + const $header = $menu.find('> .header:first'); + const $icon = $filter.find('> i.icon'); + $icon.attr({ + 'role': 'none', + 'aria-hidden': 'true', + }); + const $input = $filter.find('> input'); + // prepare searchbox + $input.attr('role', 'searchbox'); + $input.attr('aria-multiline', 'false'); + $input.attr('aria-autocomplete', 'inline'); + $input.attr('tabindex', '0'); + $input.attr('id', generateAriaId()); + $list = $('
'); + $filter.after($list); + $list.attr('id', generateAriaId()); + $list.attr('role', 'listbox'); + $list.attr('aria-multiselectable', 'false'); // TODO: consider multiple selection + $list.attr('aria-label', $header.text()); + $dropdown.attr('aria-controls', $list.attr('id')); + const _ids = []; + $menu.find('> .item').each((_, opt) => { // TODO: make groups from pairs divider+header + _ids.push($(opt).attr('id')); + }); + $list.attr('aria-owns', _ids.join(' ')); + } else { + $menu.attr('id', generateAriaId()); + $menu.attr('role', 'listbox'); + $menu.attr('aria-multiselectable', 'false'); + $dropdown.attr('aria-controls', $menu.attr('id')); + } + // prepare search input + if ($textSearch.length) { + $textSearch.attr('role', 'searchbox'); + $textSearch.attr('aria-multiline', 'false'); + $textSearch.attr('tabindex', '0'); + $dropdown.find('.search > i.icon').attr({ + 'role': 'none', + 'aria-hidden': 'true', + }); + } + // mark active descendant + const $active = $menu.find('> .item.active'); + if ($active.length) { + $focusable.attr('aria-activedescendant', $active.attr('id')); // FIXME: dynamic list doesn't have a setter for this + $active.attr('aria-current', 'true'); + } // when showing, it has class: ".animating.in" // when hiding, it has class: ".visible.animating.out" const isMenuVisible = () => ($menu.hasClass('visible') && !$menu.hasClass('out')) || $menu.hasClass('in'); // update aria attributes according to current active/selected item const refreshAria = () => { + $dropdown.dropdown('hide others'); // hide others opened dropdowns which lost focus by speed TABs const menuVisible = isMenuVisible(); - $focusable.attr('aria-expanded', menuVisible ? 'true' : 'false'); + $dropdown.attr('aria-expanded', menuVisible ? 'true' : 'false'); // if there is an active item, use it (the user is navigating between items) // otherwise use the "selected" for combobox (for the last selected item) const $active = $menu.find('> .item.active, > .item.selected'); - // if the popup is visible and has an active/selected item, use its id as aria-activedescendant - if (menuVisible) { - $focusable.attr('aria-activedescendant', $active.attr('id')); - } else if (!isComboBox) { - // for menu, when the popup is hidden, no need to keep the aria-activedescendant, and clear the active/selected item - $focusable.removeAttr('aria-activedescendant'); - $active.removeClass('active').removeClass('selected'); - } + + // if there is an active item, use its id. if no active item, then the empty string is set + $focusable.attr('aria-activedescendant', $active.attr('id')); + $active.attr('aria-current', 'true'); }; $dropdown.on('keydown', (e) => { // here it must use keydown event before dropdown's keyup handler, otherwise there is no Enter event in our keyup handler - if (e.key === 'Enter') { + if (e.key === 'Enter' || e.key === ' ') { let $item = $dropdown.dropdown('get item', $dropdown.dropdown('get value')); if (!$item) $item = $menu.find('> .item.selected'); // when dropdown filters items by input, there is no "value", so query the "selected" item // if the selected item is clickable, then trigger the click event. @@ -120,7 +181,14 @@ function attachOneDropdownAria($dropdown) { // when the popup is hiding, it's better to have a small "delay", because there is a Fomantic UI animation // without the delay for hiding, the UI will be somewhat laggy and sometimes may get stuck in the animation. const deferredRefreshAria = (delay = 0) => { setTimeout(refreshAria, delay) }; - $dropdown.on('keyup', (e) => { if (e.key.startsWith('Arrow')) deferredRefreshAria(); }); + $dropdown.on('keyup', (e) => { + if (e.key.startsWith('Arrow') || e.key === 'TAB') { + deferredRefreshAria(); + } else if (e.key === 'ESC') { + $dropdown.dropdown('hide'); + deferredRefreshAria(); + } + }); // if the dropdown has been opened by focus, do not trigger the next click event again. // otherwise the dropdown will be closed immediately, especially on Android with TalkBack @@ -152,7 +220,7 @@ function attachOneDropdownAria($dropdown) { ignoreClickPreVisible !== 2 && // dropdown is switch from invisible to visible ignoreClickPreEvents === 2 // the click event is related to mousedown+focus ) { - e.stopPropagation(); // if the dropdown menu has been opened by focus, do not trigger the next click event again + e.stopPropagation(); // if the dropdown has been opened by focus, do not trigger the next click event again } ignoreClickPreEvents = ignoreClickPreVisible = 0; }, true); @@ -162,7 +230,7 @@ export function attachDropdownAria($dropdowns) { $dropdowns.each((_, e) => attachOneDropdownAria($(e))); } -export function attachCheckboxAria($checkboxes) { +function attachCheckboxAria($checkboxes) { $checkboxes.checkbox(); // Fomantic UI checkbox needs to be something like:
@@ -178,3 +246,7 @@ export function attachCheckboxAria($checkboxes) { label.setAttribute('for', id); } } +export function initAria() { + attachDropdownAria($('.ui.dropdown:not(.custom)')); + attachCheckboxAria($('.ui.checkbox')); +} diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index cdb9132805d39..ff2eb3dc4812c 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -4,7 +4,6 @@ import {mqBinarySearch} from '../utils.js'; import {createDropzone} from './dropzone.js'; import {initCompColorPicker} from './comp/ColorPicker.js'; import {showGlobalErrorMessage} from '../bootstrap.js'; -import {attachCheckboxAria, attachDropdownAria} from './aria.js'; import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js'; import {initTooltip} from '../modules/tippy.js'; import {svg} from '../svg.js'; @@ -123,10 +122,6 @@ export function initGlobalCommon() { $uiDropdowns.filter('.slide.up').dropdown({transition: 'slide up'}); $uiDropdowns.filter('.upward').dropdown({direction: 'upward'}); - attachDropdownAria($uiDropdowns); - - attachCheckboxAria($('.ui.checkbox')); - $('.tabular.menu .item').tab(); $('.tabable.menu .item').tab(); diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js index 87295573e8f80..9eb1402d4fdc4 100644 --- a/web_src/js/features/repo-issue-content.js +++ b/web_src/js/features/repo-issue-content.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import {svg} from '../svg.js'; +import {attachDropdownAria} from './aria.js'; const {appSubUrl, csrfToken} = window.config; let i18nTextEdited; @@ -76,7 +77,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) { const $headerLeft = $item.find('.comment-header-left'); const menuHtml = `
- • ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')} + • ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'icon gt-ml-1 gt-mt-1')}
`; @@ -99,6 +100,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) { } }, }); + attachDropdownAria($headerLeft.find('.dropdown')); } export function initRepoIssueContentHistory() { diff --git a/web_src/js/index.js b/web_src/js/index.js index 480661118bc65..419ea36997ad1 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -89,6 +89,7 @@ import {initFormattingReplacements} from './features/formatting.js'; import {initCopyContent} from './features/copycontent.js'; import {initCaptcha} from './features/captcha.js'; import {initRepositoryActionView} from './components/RepoActionView.vue'; +import {initAria} from './features/aria.js'; // Run time-critical code as soon as possible. This is safe to do because this // script appears at the end of and rendered HTML is accessible at that point. @@ -196,4 +197,5 @@ $(document).ready(() => { initUserAuthWebAuthnRegister(); initUserSettings(); initViewedCheckboxListenerFor(); + initAria(); });