From 902be92e50bfee176a8321190bcf9d4e63060ce5 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 7 Mar 2023 12:59:26 +0800 Subject: [PATCH 01/24] fix --- options/locale/locale_en-US.ini | 1 - templates/repo/home.tmpl | 29 ++++++++++++++--------------- web_src/js/features/repo-home.js | 14 ++++++++++---- web_src/less/_base.less | 4 ++++ web_src/less/_repository.less | 4 ---- 5 files changed, 28 insertions(+), 24 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 3695bd0384aa9..8ffaf9ef2156c 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -2354,7 +2354,6 @@ tag.create_tag_from = Create new tag from '%s' tag.create_success = Tag '%s' has been created. topic.manage_topics = Manage Topics -topic.done = Done topic.count_prompt = You cannot select more than 25 topics topic.format_prompt = Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long. diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index 2a79c51ddf946..350c4b635d50e 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -29,26 +29,25 @@ {{end}}
- {{range .Topics}}{{.Name}}{{end}} - {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}{{.locale.Tr "repo.topic.manage_topics"}}{{end}} + {{range .Topics}}{{.Name}}{{end}} + {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}{{end}}
{{end}} {{if and .Permission.IsAdmin (not .Repository.IsArchived)}} -
-
-
-
- - {{range .Topics}} -
{{.Name}}{{svg "octicon-x" 16 "delete icon gt-ml-3 gt-mt-1"}}
- {{end}} -
-
+
+
+
+ + {{range .Topics}} + {{/* lalels generated by Fomantic still use ``, to avoid mixing different style together and to remind future developers, use it instead of svg*/}} +
{{.Name}}
+ {{end}} +
-
- {{.locale.Tr "repo.topic.done"}} +
+ +
{{end}} diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index dfccffc79488a..fa35ad5bfb3c9 100644 --- a/web_src/js/features/repo-home.js +++ b/web_src/js/features/repo-home.js @@ -10,12 +10,20 @@ export function initRepoTopicBar() { const viewDiv = $('#repo-topics'); const saveBtn = $('#save_topic'); const topicDropdown = $('#topic_edit .dropdown'); - const topicForm = $('#topic_edit.ui.form'); + const topicDropdownSearch = topicDropdown.find('input.search'); + const topicForm = $('#topic_edit'); const topicPrompts = getPrompts(); mgrBtn.on('click', () => { hideElem(viewDiv); showElem(editDiv); + topicDropdownSearch.focus(); + }); + + $('#cancel_topic_edit').on('click', () => { + hideElem(editDiv); + showElem(viewDiv); + mgrBtn.focus(); }); function getPrompts() { @@ -39,13 +47,11 @@ export function initRepoTopicBar() { viewDiv.children('.topic').remove(); if (topics.length) { const topicArray = topics.split(','); - - const last = viewDiv.children('a').last(); for (let i = 0; i < topicArray.length; i++) { const link = $(''); link.attr('href', `${appSubUrl}/explore/repos?q=${encodeURIComponent(topicArray[i])}&topic=1`); link.text(topicArray[i]); - link.insertBefore(last); + link.insertBefore(mgrBtn); // insert all new topics before manage button } } hideElem(editDiv); diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 1cf65e784cd4d..8668141fa6239 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -2329,6 +2329,10 @@ a.ui.label:hover { color: var(--color-text); } +.ui.tertiary.button:focus { + color: var(--color-text-dark); +} + .ui.primary.label, .ui.primary.labels .label { background-color: var(--color-primary) !important; diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 3b93a76a16ebc..29236d884e8da 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3042,10 +3042,6 @@ tbody.commit-list { } } -#manage_topic { - font-size: 12px; -} - .label + #manage_topic { margin-left: 5px; } From c379fc5d7d62c964f2a0bb449852553e512ba464 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 7 Mar 2023 23:16:35 +0800 Subject: [PATCH 02/24] add aria attributes to delete icon --- templates/repo/home.tmpl | 10 +++---- web_src/js/features/aria.js | 7 ++--- web_src/js/features/repo-home.js | 46 +++++++++++++++++--------------- 3 files changed, 34 insertions(+), 29 deletions(-) diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index 350c4b635d50e..649f5f62c3887 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -36,7 +36,11 @@ {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
-
+
{{range .Topics}} {{/* lalels generated by Fomantic still use ``, to avoid mixing different style together and to remind future developers, use it instead of svg*/}} @@ -51,10 +55,6 @@
{{end}} -
- {{.locale.Tr "repo.topic.count_prompt"}} - {{.locale.Tr "repo.topic.format_prompt"}} -
{{if .Repository.IsArchived}}
{{.locale.Tr "repo.archive.title"}} diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js index 373d667c5f73c..bbe00b9aaf9b2 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -6,14 +6,14 @@ function generateAriaId() { return `_aria_auto_id_${ariaIdCounter++}`; } -// make the item has role=option, and add an id if there wasn't one yet. +// make the item has role=menuitem/option, and add an id if there wasn't one yet. function prepareMenuItem($item) { if (!$item.attr('id')) $item.attr('id', generateAriaId()); $item.attr({'role': 'menuitem', '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. } -// when the menu items are loaded from AJAX requests, the items are created dynamically +// when the dropdown menu items are loaded from AJAX requests, the items are created dynamically const defaultCreateDynamicMenu = $.fn.dropdown.settings.templates.menu; $.fn.dropdown.settings.templates.menu = function(response, fields, preserveHTML, className) { const ret = defaultCreateDynamicMenu(response, fields, preserveHTML, className); @@ -33,7 +33,7 @@ function attachOneDropdownAria($dropdown) { const $focusable = $textSearch.length ? $textSearch : $dropdown; // see comment below if (!$focusable.length) return; - // prepare menu list + // prepare dropdown menu list const $menu = $dropdown.find('> .menu'); if (!$menu.attr('id')) $menu.attr('id', generateAriaId()); @@ -50,6 +50,7 @@ function attachOneDropdownAria($dropdown) { // - otherwise, the dropdown control (low-level code) handles the Enter event, hides the dropdown menu // TODO: multiple selection is not supported yet. + // TODO: use combobox for dropdown with search input in the future $focusable.attr({ 'role': 'menu', diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index fa35ad5bfb3c9..6ae301b023e2a 100644 --- a/web_src/js/features/repo-home.js +++ b/web_src/js/features/repo-home.js @@ -6,36 +6,39 @@ const {appSubUrl, csrfToken} = window.config; export function initRepoTopicBar() { const mgrBtn = $('#manage_topic'); - const editDiv = $('#topic_edit'); - const viewDiv = $('#repo-topics'); + if (!mgrBtn.length) return; + const saveBtn = $('#save_topic'); + const topicListDiv = $('#repo-topics'); const topicDropdown = $('#topic_edit .dropdown'); const topicDropdownSearch = topicDropdown.find('input.search'); const topicForm = $('#topic_edit'); - const topicPrompts = getPrompts(); + const topicPrompts = { + countPrompt: topicDropdown.attr('data-text-count-prompt'), + formatPrompt: topicDropdown.attr('data-text-format-prompt'), + remove: topicDropdown.attr('data-text-remove'), + }; + + function addLabelDeleteIconAria($el) { + $el.attr({ + 'aria-label': topicPrompts.remove, + 'role': 'button', + }); + } mgrBtn.on('click', () => { - hideElem(viewDiv); - showElem(editDiv); + hideElem(topicListDiv); + showElem(topicForm); + addLabelDeleteIconAria(topicDropdown.find('i.delete.icon')); topicDropdownSearch.focus(); }); $('#cancel_topic_edit').on('click', () => { - hideElem(editDiv); - showElem(viewDiv); + hideElem(topicForm); + showElem(topicListDiv); mgrBtn.focus(); }); - function getPrompts() { - const hidePrompt = $('#validate_prompt'); - const prompts = { - countPrompt: hidePrompt.children('#count_prompt').text(), - formatPrompt: hidePrompt.children('#format_prompt').text() - }; - hidePrompt.remove(); - return prompts; - } - saveBtn.on('click', () => { const topics = $('input[name=topics]').val(); @@ -44,7 +47,7 @@ export function initRepoTopicBar() { topics }, (_data, _textStatus, xhr) => { if (xhr.responseJSON.status === 'ok') { - viewDiv.children('.topic').remove(); + topicListDiv.children('.topic').remove(); if (topics.length) { const topicArray = topics.split(','); for (let i = 0; i < topicArray.length; i++) { @@ -54,8 +57,8 @@ export function initRepoTopicBar() { link.insertBefore(mgrBtn); // insert all new topics before manage button } } - hideElem(editDiv); - showElem(viewDiv); + hideElem(topicForm); + showElem(topicListDiv); } }).fail((xhr) => { if (xhr.status === 422) { @@ -147,7 +150,8 @@ export function initRepoTopicBar() { onLabelCreate(value) { value = value.toLowerCase().trim(); this.attr('data-value', value).contents().first().replaceWith(value); - return $(this); + addLabelDeleteIconAria(this.find('i.delete.icon')); + return this; }, onAdd(addedValue, _addedText, $addedChoice) { addedValue = addedValue.toLowerCase().trim(); From 5dd48bb88e8a3da0fbb18e4a52ab56957c3e68ec Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 7 Mar 2023 23:55:12 +0800 Subject: [PATCH 03/24] make "delete icon button" slightly larger to be easier to click on mobile --- web_src/js/features/repo-home.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index 6ae301b023e2a..e8c3cb77206bf 100644 --- a/web_src/js/features/repo-home.js +++ b/web_src/js/features/repo-home.js @@ -23,7 +23,7 @@ export function initRepoTopicBar() { $el.attr({ 'aria-label': topicPrompts.remove, 'role': 'button', - }); + }).addClass('gt-px-2'); // make it slightly larger to be easier to click on mobile } mgrBtn.on('click', () => { From 25f993b1a8a1077a107107e93cb5eae65d430c2b Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 7 Mar 2023 23:57:54 +0800 Subject: [PATCH 04/24] fix lint --- templates/repo/home.tmpl | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index 649f5f62c3887..4cffef76d596a 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -37,9 +37,9 @@
{{range .Topics}} From fa2fa028f827f1c35a7aaffe0f6369efc7c7cf22 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 8 Mar 2023 00:11:42 +0800 Subject: [PATCH 05/24] use exactly the same markup for labels --- templates/repo/home.tmpl | 5 +++-- web_src/js/features/repo-home.js | 10 ++++++---- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index 4cffef76d596a..837cb67436752 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -43,8 +43,9 @@ > {{range .Topics}} - {{/* lalels generated by Fomantic still use ``, to avoid mixing different style together and to remind future developers, use it instead of svg*/}} -
{{.Name}}
+ {{/* lalels generated by Fomantic still use ``, to avoid mixing different style together and to remind future developers, use it instead of svg + and keep the same as template (repo-topic-label), the style is also added by Fomantic Dropdown automatically when generating new labels */}} +
{{.Name}}
{{end}}
diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index e8c3cb77206bf..7b6d05275298f 100644 --- a/web_src/js/features/repo-home.js +++ b/web_src/js/features/repo-home.js @@ -1,6 +1,7 @@ import $ from 'jquery'; import {stripTags} from '../utils.js'; import {hideElem, showElem} from '../utils/dom.js'; +import {htmlEscape} from 'escape-goat'; const {appSubUrl, csrfToken} = window.config; @@ -110,7 +111,7 @@ export function initRepoTopicBar() { const query = stripTags(this.urlData.query.trim()); let found_query = false; const current_topics = []; - topicDropdown.find('div.label.visible.topic,a.label.visible').each((_, el) => { + topicDropdown.find('div.label.visible.topic').each((_, el) => { current_topics.push(el.getAttribute('data-value')); }); @@ -149,9 +150,10 @@ export function initRepoTopicBar() { }, onLabelCreate(value) { value = value.toLowerCase().trim(); - this.attr('data-value', value).contents().first().replaceWith(value); - addLabelDeleteIconAria(this.find('i.delete.icon')); - return this; + // keep the same as template (repo-topic-label) + const $el = $(`
${htmlEscape(value)}
`); + addLabelDeleteIconAria($el.find('i.delete.icon')); + return $el; }, onAdd(addedValue, _addedText, $addedChoice) { addedValue = addedValue.toLowerCase().trim(); From 77ee1f1968498134f3fa69617611458d4527a343 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 8 Mar 2023 00:11:42 +0800 Subject: [PATCH 06/24] add more comments --- web_src/js/features/repo-home.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index 7b6d05275298f..634be56e561bc 100644 --- a/web_src/js/features/repo-home.js +++ b/web_src/js/features/repo-home.js @@ -150,8 +150,9 @@ export function initRepoTopicBar() { }, onLabelCreate(value) { value = value.toLowerCase().trim(); - // keep the same as template (repo-topic-label) - const $el = $(`
${htmlEscape(value)}
`); + // `this` is the default label jQuery element, it's "" + // we create a new div element to replace it, to keep the same as template (repo-topic-label), because we do not want the `` tag to affect aria focus. + const $el = $(`
${htmlEscape(value)}
`); addLabelDeleteIconAria($el.find('i.delete.icon')); return $el; }, From 5e9aa1eb38fd229f07889e2a2fa9273b33fb3338 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 8 Mar 2023 02:11:06 +0800 Subject: [PATCH 07/24] use svg, fine tune styles --- templates/repo/home.tmpl | 9 ++++----- web_src/js/features/repo-home.js | 13 +++++++------ web_src/less/_repository.less | 25 +++---------------------- web_src/less/helpers.less | 1 + 4 files changed, 15 insertions(+), 33 deletions(-) diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index 837cb67436752..eacd1c2ff6205 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -28,9 +28,9 @@
{{end}}
-
+
{{range .Topics}}{{.Name}}{{end}} - {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}{{end}} + {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}{{end}}
{{end}} {{if and .Permission.IsAdmin (not .Repository.IsArchived)}} @@ -43,9 +43,8 @@ > {{range .Topics}} - {{/* lalels generated by Fomantic still use ``, to avoid mixing different style together and to remind future developers, use it instead of svg - and keep the same as template (repo-topic-label), the style is also added by Fomantic Dropdown automatically when generating new labels */}} -
{{.Name}}
+ {{/* keep the same as template (repo-topic-label), the style "display" is also added by Fomantic Dropdown automatically when generating new labels */}} +
{{.Name}}{{svg "octicon-x" 16 "delete icon gt-ml-3 gt-mt-1"}}
{{end}}
diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index 634be56e561bc..3af1d20a71268 100644 --- a/web_src/js/features/repo-home.js +++ b/web_src/js/features/repo-home.js @@ -2,6 +2,7 @@ import $ from 'jquery'; import {stripTags} from '../utils.js'; import {hideElem, showElem} from '../utils/dom.js'; import {htmlEscape} from 'escape-goat'; +import {svg} from '../svg.js'; const {appSubUrl, csrfToken} = window.config; @@ -21,16 +22,16 @@ export function initRepoTopicBar() { }; function addLabelDeleteIconAria($el) { - $el.attr({ + $el.removeAttr('aria-hidden').attr({ 'aria-label': topicPrompts.remove, 'role': 'button', - }).addClass('gt-px-2'); // make it slightly larger to be easier to click on mobile + }); } mgrBtn.on('click', () => { hideElem(topicListDiv); showElem(topicForm); - addLabelDeleteIconAria(topicDropdown.find('i.delete.icon')); + addLabelDeleteIconAria(topicDropdown.find('.delete.icon')); topicDropdownSearch.focus(); }); @@ -151,9 +152,9 @@ export function initRepoTopicBar() { onLabelCreate(value) { value = value.toLowerCase().trim(); // `this` is the default label jQuery element, it's "" - // we create a new div element to replace it, to keep the same as template (repo-topic-label), because we do not want the `` tag to affect aria focus. - const $el = $(`
${htmlEscape(value)}
`); - addLabelDeleteIconAria($el.find('i.delete.icon')); + // we create a new div element to replace it, to keep the same as template (repo-topic-label), because we do not want the `` tag which affects aria focus. + const $el = $(`
${htmlEscape(value)}${svg('octicon-x', 16, 'delete icon gt-ml-3 gt-mt-1')}
`); + addLabelDeleteIconAria($el.find('.delete.icon')); return $el; }, onAdd(addedValue, _addedText, $addedChoice) { diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 29236d884e8da..61c18e7aa11f8 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3010,21 +3010,10 @@ tbody.commit-list { top: -2px; } -#topic_edit { - margin-top: 5px; -} - -#repo-topics { - margin-top: 5px; - display: flex; - align-items: center; - flex-wrap: wrap; -} - -.repo-topic { - font-weight: normal !important; +#repo-topics .repo-topic { + font-weight: normal; cursor: pointer; - margin: 2px !important; + margin: 2px; } #new-dependency-drop-list { @@ -3042,14 +3031,6 @@ tbody.commit-list { } } -.label + #manage_topic { - margin-left: 5px; -} - -.ui.small.label.topic { - margin-bottom: 4px; -} - .repo-header { display: flex; align-items: center; diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less index baa5959946e82..9feabde8cec1b 100644 --- a/web_src/less/helpers.less +++ b/web_src/less/helpers.less @@ -21,6 +21,7 @@ /* below class names match Tailwind CSS */ .gt-pointer-events-none { pointer-events: none !important; } .gt-relative { position: relative !important; } +.gt-cursor-default { cursor: default !important; } .gt-mono { font-family: var(--fonts-monospace) !important; From a1e35b40821274d99dcc3bf1f7f53eaae24dec7a Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 8 Mar 2023 14:21:55 +0800 Subject: [PATCH 08/24] title: Remove topic "%s" --- options/locale/locale_en-US.ini | 1 + templates/repo/home.tmpl | 2 +- web_src/js/features/repo-home.js | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 8ffaf9ef2156c..96c01529d89ab 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -2356,6 +2356,7 @@ tag.create_success = Tag '%s' has been created. topic.manage_topics = Manage Topics topic.count_prompt = You cannot select more than 25 topics topic.format_prompt = Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long. +topic.remove_topic = Remove topic "%s" find_file.go_to_file = Go to file find_file.no_matching = No matching file found diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index eacd1c2ff6205..11c00653da854 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -39,7 +39,7 @@
{{range .Topics}} diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index 3af1d20a71268..4cec5f622f028 100644 --- a/web_src/js/features/repo-home.js +++ b/web_src/js/features/repo-home.js @@ -18,12 +18,12 @@ export function initRepoTopicBar() { const topicPrompts = { countPrompt: topicDropdown.attr('data-text-count-prompt'), formatPrompt: topicDropdown.attr('data-text-format-prompt'), - remove: topicDropdown.attr('data-text-remove'), + removeTopic: topicDropdown.attr('data-text-remove-topic'), }; function addLabelDeleteIconAria($el) { $el.removeAttr('aria-hidden').attr({ - 'aria-label': topicPrompts.remove, + 'aria-label': topicPrompts.removeTopic.replace('%s', $el.parent().attr('data-value')), 'role': 'button', }); } From 02c65fe817742a50432f1728f75b439dae4ce576 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 8 Mar 2023 16:28:58 +0800 Subject: [PATCH 09/24] fix aria-label --- web_src/js/features/repo-home.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index 4cec5f622f028..065a9789c742e 100644 --- a/web_src/js/features/repo-home.js +++ b/web_src/js/features/repo-home.js @@ -22,9 +22,11 @@ export function initRepoTopicBar() { }; function addLabelDeleteIconAria($el) { - $el.removeAttr('aria-hidden').attr({ - 'aria-label': topicPrompts.removeTopic.replace('%s', $el.parent().attr('data-value')), - 'role': 'button', + $el.removeAttr('aria-hidden').each(function() { + $(this).attr({ + 'aria-label': topicPrompts.removeTopic.replace('%s', $(this).parent().attr('data-value')), + 'role': 'button', + }); }); } From 27547403934325a3839fac891a006c9dff4f77df Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 8 Mar 2023 17:42:23 +0800 Subject: [PATCH 10/24] use role=combobox for dropdown with input --- web_src/js/features/aria.js | 92 +++++++++++++++++++++---------------- 1 file changed, 52 insertions(+), 40 deletions(-) diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js index 55679ab27b8c0..52b05138a910e 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -6,42 +6,16 @@ function generateAriaId() { return `_aria_auto_id_${ariaIdCounter++}`; } -// make the item has role=menuitem/option, and add an id if there wasn't one yet. -function prepareMenuItem($item) { - if (!$item.attr('id')) $item.attr('id', generateAriaId()); - $item.attr({'role': 'menuitem', '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. -} - -// when the dropdown menu items are loaded from AJAX requests, the items are created dynamically -const defaultCreateDynamicMenu = $.fn.dropdown.settings.templates.menu; -$.fn.dropdown.settings.templates.menu = function(response, fields, preserveHTML, className) { - const ret = defaultCreateDynamicMenu(response, fields, preserveHTML, className); - const $wrapper = $('
').append(ret); - const $items = $wrapper.find('> .item'); - $items.each((_, item) => { - prepareMenuItem($(item)); - }); - return $wrapper.html(); -}; - function attachOneDropdownAria($dropdown) { if ($dropdown.attr('data-aria-attached')) return; $dropdown.attr('data-aria-attached', 1); - const $textSearch = $dropdown.find('input.search').eq(0); - const $focusable = $textSearch.length ? $textSearch : $dropdown; // see comment below - if (!$focusable.length) return; - - // prepare dropdown menu list - const $menu = $dropdown.find('> .menu'); - if (!$menu.attr('id')) $menu.attr('id', generateAriaId()); - - // dropdown has 2 different focusing behaviors - // * with search input: the input is focused, and it works perfectly with aria-activedescendant pointing another sibling element. + // Dropdown has 2 different focusing behaviors + // * with search input: the input is focused, and it works with aria-activedescendant pointing another sibling element. // * without search input (but the readonly text), the dropdown itself is focused. then the aria-activedescendant points to the element inside dropdown + // Some desktop screen readers may change the focus, but dropdown requires that the focus must be on its primary element, then they don't work well. - // expected user interactions for dropdown with aria support: + // Expected user interactions for dropdown with aria support: // * user can use Tab to focus in the dropdown, then the dropdown menu (list) will be shown // * user presses Tab on the focused dropdown to move focus to next sibling focusable element (but not the menu item) // * user can use arrow key Up/Down to navigate between menu items @@ -49,24 +23,62 @@ function attachOneDropdownAria($dropdown) { // - if the menu item is clickable (eg: ), then trigger the click event // - otherwise, the dropdown control (low-level code) handles the Enter event, hides the dropdown menu - // TODO: multiple selection is not supported yet. - // TODO: use combobox for dropdown with search input in the future + 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; - $focusable.attr({ - 'role': 'menu', - 'aria-haspopup': 'menu', - 'aria-controls': $menu.attr('id'), - 'aria-expanded': 'false', - }); + // detect if the dropdown has an input, if yes, it works like a combobox, otherwise it works like a menu + // or use a special class to indicate it's a combobox/menu in the future + 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, and add an id if there wasn't one yet. + function prepareMenuItem($item) { + if (!$item.attr('id')) $item.attr('id', generateAriaId()); + $item.attr({'role': listItemRole, '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. + } + + 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 ret = dropdownTemplatesMenuOld(response, fields, preserveHTML, className); + const $wrapper = $('
').append(ret); + const $items = $wrapper.find('> .item'); + $items.each((_, item) => { + prepareMenuItem($(item)); + }); + return $wrapper.html(); + }; + $dropdown.dropdown('setting', ['templates', dropdownTemplates]); + + + // TODO: multiple selection is not supported yet. - if ($dropdown.attr('data-content') && !$dropdown.attr('aria-label')) { + // 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')) { $dropdown.attr('aria-label', $dropdown.attr('data-content')); } + // prepare dropdown menu list popup + const $menu = $dropdown.find('> .menu'); + if (!$menu.attr('id')) $menu.attr('id', generateAriaId()); + $menu.attr('role', listPopupRole); $menu.find('> .item').each((_, item) => { prepareMenuItem($(item)); }); + $focusable.attr({ + 'role': focusableRole, + 'aria-haspopup': listPopupRole, + 'aria-controls': $menu.attr('id'), + 'aria-expanded': 'false', + }); + // update aria attributes according to current active/selected item const refreshAria = () => { const isMenuVisible = !$menu.is('.hidden') && !$menu.is('.animating.out'); @@ -86,7 +98,7 @@ function attachOneDropdownAria($dropdown) { 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. // we can not click any item without check, because Fomantic code might also handle the Enter event. that would result in double click. - if ($item && ($item.is('a') || $item.is('.js-aria-clickable'))) $item[0].click(); + if ($item && ($item.is('a') || $item.hasClass('js-aria-clickable'))) $item[0].click(); } }); From 2166ad1e3a4189eaf28cce111942f832944423a1 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 8 Mar 2023 18:01:47 +0800 Subject: [PATCH 11/24] fix chrome crash --- web_src/js/features/aria.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js index 52b05138a910e..0c6728e81bc82 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -23,6 +23,8 @@ function attachOneDropdownAria($dropdown) { // - if the menu item is clickable (eg: ), then trigger the click event // - otherwise, the dropdown control (low-level code) handles the Enter event, hides the dropdown menu + // TODO: multiple selection is not supported yet. + 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; @@ -56,9 +58,6 @@ function attachOneDropdownAria($dropdown) { }; $dropdown.dropdown('setting', ['templates', dropdownTemplates]); - - // TODO: multiple selection is not supported yet. - // 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')) { $dropdown.attr('aria-label', $dropdown.attr('data-content')); @@ -67,10 +66,11 @@ function attachOneDropdownAria($dropdown) { // prepare dropdown menu list popup const $menu = $dropdown.find('> .menu'); if (!$menu.attr('id')) $menu.attr('id', generateAriaId()); - $menu.attr('role', listPopupRole); $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); $focusable.attr({ 'role': focusableRole, From 5688480a9f239bede12ef0557364f41106b67175 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 8 Mar 2023 18:05:30 +0800 Subject: [PATCH 12/24] only change the primary role if there is no role set --- web_src/js/features/aria.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js index 0c6728e81bc82..dc582940e1eff 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -73,7 +73,7 @@ function attachOneDropdownAria($dropdown) { $menu.attr('role', listPopupRole); $focusable.attr({ - 'role': focusableRole, + 'role': $focusable.attr('role') ?? focusableRole, 'aria-haspopup': listPopupRole, 'aria-controls': $menu.attr('id'), 'aria-expanded': 'false', From af6d7345385f4bec1eb861cc8689b1b1e8b20549 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 8 Mar 2023 18:37:45 +0800 Subject: [PATCH 13/24] fix comments --- web_src/js/features/aria.js | 8 +++----- web_src/js/features/aria.md | 5 +++-- web_src/js/features/repo-home.js | 2 +- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js index dc582940e1eff..119a2bb85b764 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -48,12 +48,10 @@ function attachOneDropdownAria($dropdown) { 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 ret = dropdownTemplatesMenuOld(response, fields, preserveHTML, className); - const $wrapper = $('
').append(ret); + const menuItems = dropdownTemplatesMenuOld(response, fields, preserveHTML, className); + const $wrapper = $('
').append(menuItems); const $items = $wrapper.find('> .item'); - $items.each((_, item) => { - prepareMenuItem($(item)); - }); + $items.each((_, item) => prepareMenuItem($(item))); return $wrapper.html(); }; $dropdown.dropdown('setting', ['templates', dropdownTemplates]); diff --git a/web_src/js/features/aria.md b/web_src/js/features/aria.md index a55344de47d96..a246a202afcc8 100644 --- a/web_src/js/features/aria.md +++ b/web_src/js/features/aria.md @@ -30,11 +30,10 @@ There is still a problem: Fomantic UI checkbox is not friendly to screen readers ## ARIA Dropdown There are different solutions: + * combobox + listbox + option * menu + menuitem -At the moment, `menu + menuitem` seems to work better with Fomantic UI Dropdown, so we only use it now. - ```html
@@ -49,6 +48,8 @@ At the moment, `menu + menuitem` seems to work better with Fomantic UI Dropdown, ## Fomantic UI Dropdown +When the dropdown has input elements, use `role=combobox`, otherwise use `role=menu` (see `aria.js`) + ```html
diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index 065a9789c742e..628d310294d21 100644 --- a/web_src/js/features/repo-home.js +++ b/web_src/js/features/repo-home.js @@ -153,7 +153,7 @@ export function initRepoTopicBar() { }, onLabelCreate(value) { value = value.toLowerCase().trim(); - // `this` is the default label jQuery element, it's "" + // `this` is the default label (jQuery object), it's a `$('')` // we create a new div element to replace it, to keep the same as template (repo-topic-label), because we do not want the `` tag which affects aria focus. const $el = $(`
${htmlEscape(value)}${svg('octicon-x', 16, 'delete icon gt-ml-3 gt-mt-1')}
`); addLabelDeleteIconAria($el.find('.delete.icon')); From 46be3c7a63df0f27acdcb832d80da9ebb522d029 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 8 Mar 2023 19:41:23 +0800 Subject: [PATCH 14/24] copy dropdown templates to a new object to avoid conflicting --- web_src/js/features/aria.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js index 119a2bb85b764..98f9ed025fad1 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -44,7 +44,7 @@ function attachOneDropdownAria($dropdown) { $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. } - const dropdownTemplates = $dropdown.dropdown('setting', 'templates'); + 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 From 929c3aa01412cd891b7ac676175524edd2550630 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 9 Mar 2023 11:07:16 +0800 Subject: [PATCH 15/24] fix incorrect language menu behavior --- templates/base/footer_content.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/base/footer_content.tmpl b/templates/base/footer_content.tmpl index c3b96a0245a9e..53d0a2c77cf18 100644 --- a/templates/base/footer_content.tmpl +++ b/templates/base/footer_content.tmpl @@ -21,7 +21,7 @@ {{end}}
{{svg "octicon-globe"}} -
{{.locale.LangName}}
+ {{.locale.LangName}}
{{range .AllLangs}} {{.Name}} From 79bc9d8f086a5771d6d3225a6fa00751f2fbc03c Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 9 Mar 2023 11:25:52 +0800 Subject: [PATCH 16/24] capture blur event --- web_src/js/features/aria.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js index 98f9ed025fad1..e1dbc5873a075 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -101,10 +101,13 @@ function attachOneDropdownAria($dropdown) { }); // use setTimeout to run the refreshAria in next tick (to make sure the Fomantic UI code has finished its work) - const deferredRefreshAria = () => { setTimeout(refreshAria, 0) }; // do not return any value, jQuery has return-value related behaviors. + // do not return any value, jQuery has return-value related behaviors. + const deferredRefreshAria = () => { setTimeout(refreshAria, 0) }; $focusable.on('focus', deferredRefreshAria); $focusable.on('mouseup', deferredRefreshAria); - $focusable.on('blur', deferredRefreshAria); + // Fomantic may stop propagation of blur event, use capture to make sure we can still get the event + $focusable[0].addEventListener('blur', deferredRefreshAria, true); + $dropdown.on('keyup', (e) => { if (e.key.startsWith('Arrow')) deferredRefreshAria(); }); } From 81c9a99035467b12af65211b3425a765368a548d Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Fri, 10 Mar 2023 01:32:42 +0800 Subject: [PATCH 17/24] fix menu for focus/click on mobile --- web_src/js/features/aria.js | 57 +++++++++++++++++++++++++++++++------ 1 file changed, 49 insertions(+), 8 deletions(-) diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js index e1dbc5873a075..822a055f93284 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -54,7 +54,7 @@ function attachOneDropdownAria($dropdown) { $items.each((_, item) => prepareMenuItem($(item))); return $wrapper.html(); }; - $dropdown.dropdown('setting', ['templates', dropdownTemplates]); + $dropdown.dropdown('setting', 'templates', dropdownTemplates); // 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')) { @@ -77,10 +77,11 @@ function attachOneDropdownAria($dropdown) { 'aria-expanded': 'false', }); + const isMenuVisible = () => $menu.hasClass('visible') || $menu.is('.animating.in'); + // update aria attributes according to current active/selected item const refreshAria = () => { - const isMenuVisible = !$menu.is('.hidden') && !$menu.is('.animating.out'); - $focusable.attr('aria-expanded', isMenuVisible ? 'true' : 'false'); + $focusable.attr('aria-expanded', isMenuVisible() ? 'true' : 'false'); let $active = $menu.find('> .item.active'); if (!$active.length) $active = $menu.find('> .item.selected'); // it's strange that we need this fallback at the moment @@ -103,12 +104,52 @@ function attachOneDropdownAria($dropdown) { // use setTimeout to run the refreshAria in next tick (to make sure the Fomantic UI code has finished its work) // do not return any value, jQuery has return-value related behaviors. const deferredRefreshAria = () => { setTimeout(refreshAria, 0) }; - $focusable.on('focus', deferredRefreshAria); - $focusable.on('mouseup', deferredRefreshAria); - // Fomantic may stop propagation of blur event, use capture to make sure we can still get the event - $focusable[0].addEventListener('blur', deferredRefreshAria, true); - $dropdown.on('keyup', (e) => { if (e.key.startsWith('Arrow')) 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 + // * desktop event sequence: mousedown -> focus -> mouseup -> click + // * mobile event sequence: focus -> mousedown -> mouseup -> click + // Fomantic may stop propagation of blur event, use capture to make sure we can still get the event + // keep the debug code for developers who want to confirm&debug this code for different browsers (without attaching a remote debugger) + const showDebug = false; + const debug = (msg) => showDebug && $('.page-content').append($('
').text(`${$menu.attr('id')} ${msg}, menu visible=${isMenuVisible()}`)); + let ignoreClickPreEvents = 0, ignoreClickPreVisible = 0; + $dropdown[0].addEventListener('mousedown', (e) => { + debug(e.type); + ignoreClickPreVisible += isMenuVisible() ? 1 : 0; + ignoreClickPreEvents++; + }, true); + $dropdown[0].addEventListener('focus', (e) => { + debug(e.type); + ignoreClickPreVisible += isMenuVisible() ? 1 : 0; + ignoreClickPreEvents++; + deferredRefreshAria(); + }, true); + $dropdown[0].addEventListener('blur', (e) => { + debug(e.type); + ignoreClickPreVisible = ignoreClickPreEvents = 0; + deferredRefreshAria(); + }, true); + $dropdown[0].addEventListener('mouseup', (e) => { + debug(e.type); + setTimeout(() => { + debug(`${e.type} (deferred)`); + ignoreClickPreVisible = ignoreClickPreEvents = 0; + deferredRefreshAria(); + }, 0); + }, true); + $dropdown[0].addEventListener('click', (e) => { + debug(`${e.type}, pre-visible=${ignoreClickPreVisible}, pre-events=${ignoreClickPreEvents}`); + if (isMenuVisible() && + ignoreClickPreVisible !== 2 && // dropdown is switch from invisible to visible + ignoreClickPreEvents === 2 // the click event is related to mousedown+focus + ) { + debug(`${e.type}, stop click propagation`); + e.stopPropagation(); // if the dropdown menu has been opened by focus, do not trigger the next click event again + } + ignoreClickPreEvents = ignoreClickPreVisible = 0; + }, true); } export function attachDropdownAria($dropdowns) { From da39792b69594439a0ce66f484dcb1ef2529b6b1 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 13 Mar 2023 11:08:27 +0800 Subject: [PATCH 18/24] clarify the combobox/menu by w3.org --- web_src/js/features/aria.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/web_src/js/features/aria.md b/web_src/js/features/aria.md index a246a202afcc8..e96fc40d14467 100644 --- a/web_src/js/features/aria.md +++ b/web_src/js/features/aria.md @@ -48,7 +48,18 @@ There are different solutions: ## Fomantic UI Dropdown -When the dropdown has input elements, use `role=combobox`, otherwise use `role=menu` (see `aria.js`) +When the dropdown has input elements, use `role=combobox`, otherwise use `role=menu` (see `aria.js`) for actions. + +Reference: + +* Combobox: + * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ + * A combobox is an **input widget** with an associated popup that enables users to select a value for the combobox from + a collection of possible values. In some implementations, the popup presents allowed values, while in other implementations, + the popup presents suggested values, and users may either select one of the suggestions or type a value. +* Menu: + * https://www.w3.org/WAI/ARIA/apg/patterns/menubar/ + * A menu is a widget that offers a list of choices to the user, such as a set of **actions or functions**. ```html From c2086696c110e7b1f31e18cb33eccdbdafd9796e Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 13 Mar 2023 15:39:07 +0800 Subject: [PATCH 19/24] fix incorrect dropdown init and fix incorrect visible detection --- .../repo/issue/view_content/add_reaction.tmpl | 2 +- .../repo/issue/view_content/context_menu.tmpl | 2 +- web_src/js/features/aria.js | 2 +- web_src/js/features/common-global.js | 23 +++++++++---------- web_src/js/features/repo-legacy.js | 3 --- 5 files changed, 14 insertions(+), 18 deletions(-) diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index 692d09e67980b..94c1813bf7735 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -1,5 +1,5 @@ {{if .ctxData.IsSigned}} -
+
{{svg "octicon-smiley"}} diff --git a/templates/repo/issue/view_content/context_menu.tmpl b/templates/repo/issue/view_content/context_menu.tmpl index c073c74ea32f0..0cc207afd4d90 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/web_src/js/features/aria.js b/web_src/js/features/aria.js index 822a055f93284..3facb70e3da5d 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -77,7 +77,7 @@ function attachOneDropdownAria($dropdown) { 'aria-expanded': 'false', }); - const isMenuVisible = () => $menu.hasClass('visible') || $menu.is('.animating.in'); + const isMenuVisible = () => $menu.hasClass('visible') && !$menu.hasClass('out'); // when hiding, it has class: ".animating.out" // update aria attributes according to current active/selected item const refreshAria = () => { diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index 4fa6942467ee3..86054c41599ee 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -89,9 +89,12 @@ export function initGlobalCommon() { // Semantic UI modules. const $uiDropdowns = $('.ui.dropdown'); - $uiDropdowns.filter(':not(.custom)').dropdown({ - fullTextSearch: 'exact' - }); + + // do not init "custom" dropdowns, "custom" dropdowns are managed by their own code. + $uiDropdowns.filter(':not(.custom)').dropdown({fullTextSearch: 'exact'}); + + // "jump" means this dropdown is mainly used for "menu" purpose, clicking an item will jump to somewhere else or trigger an action/function. + // when a dropdown is used for non-refresh actions with tippy, it must have this "jump" class to hide the tippy when dropdown is closed. $uiDropdowns.filter('.jump').dropdown({ action: 'hide', onShow() { @@ -102,16 +105,12 @@ export function initGlobalCommon() { onHide() { this._tippy?.enable(); }, - fullTextSearch: 'exact' - }); - $uiDropdowns.filter('.slide.up').dropdown({ - transition: 'slide up', - fullTextSearch: 'exact' - }); - $uiDropdowns.filter('.upward').dropdown({ - direction: 'upward', - fullTextSearch: 'exact' }); + + // special animations/popup-directions + $uiDropdowns.filter('.slide.up').dropdown({transition: 'slide up'}); + $uiDropdowns.filter('.upward').dropdown({direction: 'upward'}); + attachDropdownAria($uiDropdowns); attachCheckboxAria($('.ui.checkbox')); diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index 70542ad883e9c..986fd0948fdb0 100644 --- a/web_src/js/features/repo-legacy.js +++ b/web_src/js/features/repo-legacy.js @@ -601,9 +601,6 @@ export function initRepository() { } function initRepoIssueCommentEdit() { - // Issue/PR Context Menus - $('.comment-header-right .context-dropdown').dropdown({action: 'hide'}); - // Edit issue or comment content $(document).on('click', '.edit-content', onEditContent); From e912d35c194c92ceea90f2abdbd6728c09b76936 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 13 Mar 2023 15:57:36 +0800 Subject: [PATCH 20/24] fix tippy bug --- web_src/js/features/common-global.js | 7 +++++++ web_src/js/modules/tippy.js | 3 ++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index 86054c41599ee..8258fa7477de7 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -104,6 +104,13 @@ export function initGlobalCommon() { }, onHide() { this._tippy?.enable(); + + // hide all tippy elements of items after a while. eg: keyboard Enter to trigger the "Copy Link" in the Issue Context Menu + setTimeout(() => { + $(this).find('.menu > .item').each((_, item) => { + item._tippy?.hide(); + }); + }, 2000); }, }); diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index ce8f0369f11c9..f57821204db89 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -52,10 +52,11 @@ export function showTemporaryTooltip(target, content) { onHidden: (tippy) => { if (oldContent) { tippy.setContent(oldContent); + tippy.setProps({onHidden: undefined}); } else { tippy.destroy(); + // after destroy, the `_tippy` is detached, it can't do "setProps (etc...)" anymore } - tippy.setProps({onHidden: undefined}); }, }); } From 1fbff84863a4d3edac6a1fd62fef7d10aadb651f Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 13 Mar 2023 23:00:36 +0800 Subject: [PATCH 21/24] always use combobox --- web_src/js/features/aria.js | 7 ++++--- web_src/js/features/aria.md | 16 +++++++++++++++- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js index 3facb70e3da5d..a1207909b1ed5 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -29,9 +29,8 @@ function attachOneDropdownAria($dropdown) { const $focusable = $textSearch.length ? $textSearch : $dropdown; // the primary element for focus, see comment above if (!$focusable.length) return; - // detect if the dropdown has an input, if yes, it works like a combobox, otherwise it works like a menu - // or use a special class to indicate it's a combobox/menu in the future - const isComboBox = $dropdown.find('input').length > 0; + // There are 2 possible solutions about the role: combobox or menu. Always use combobox, see "aria.md" for details. + const isComboBox = true; // $dropdown.find('input').length > 0; const focusableRole = isComboBox ? 'combobox' : 'button'; const listPopupRole = isComboBox ? 'listbox' : 'menu'; @@ -44,6 +43,7 @@ function attachOneDropdownAria($dropdown) { $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. } + // delegate the dropdown's template function to add aria attributes const dropdownTemplates = {...$dropdown.dropdown('setting', 'templates')}; const dropdownTemplatesMenuOld = dropdownTemplates.menu; dropdownTemplates.menu = function(response, fields, preserveHTML, className) { @@ -70,6 +70,7 @@ function attachOneDropdownAria($dropdown) { // 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, diff --git a/web_src/js/features/aria.md b/web_src/js/features/aria.md index e96fc40d14467..ffe525c04360c 100644 --- a/web_src/js/features/aria.md +++ b/web_src/js/features/aria.md @@ -48,7 +48,21 @@ There are different solutions: ## Fomantic UI Dropdown -When the dropdown has input elements, use `role=combobox`, otherwise use `role=menu` (see `aria.js`) for actions. +There are 2 possible solutions about the role: combobox or menu + +1. Detect if the dropdown has an input, if yes, it works like a combobox, otherwise it works like a menu +2. Always use "combobox", never use "menu" + +According to the public discussion with fsologureng in chat channel, we think it's better to use "combobox" for all dropdowns. + +> On the old web there were many menus implemented with an auto-submit select, +> but that didn't change the fact that they were selects for screen readers. +> That is the case with Fomantic dropdowns as used in Gitea. +> Implementations of auto-submit select menus fell behind in modern web design precisely because they are not usable or accessible." +> +> We can mark all "dropdown" as "combobox", never use "menu" in code. Do you think this solution is clear enough? +> +> Yes. I think it will provide better accessibility because is more coherent with the current fomantic based implementation. Reference: From b17a7672cc224650c5a3acdf0d8e4771142da3f9 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 13 Mar 2023 23:49:36 +0800 Subject: [PATCH 22/24] fix one more visible check --- web_src/js/features/aria.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js index a1207909b1ed5..ddf52e3b2b344 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -78,7 +78,9 @@ function attachOneDropdownAria($dropdown) { 'aria-expanded': 'false', }); - const isMenuVisible = () => $menu.hasClass('visible') && !$menu.hasClass('out'); // when hiding, it has class: ".animating.out" + // 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 = () => { From d0ac1f58e81f0dd9537c931895de848e1226f5c7 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 15 Mar 2023 12:54:56 +0800 Subject: [PATCH 23/24] revert extracted changes --- templates/base/footer_content.tmpl | 2 +- .../repo/issue/view_content/add_reaction.tmpl | 2 +- .../repo/issue/view_content/context_menu.tmpl | 2 +- web_src/js/features/aria.js | 146 ++++++------------ web_src/js/features/aria.md | 30 +--- web_src/js/features/common-global.js | 30 ++-- web_src/js/features/repo-legacy.js | 3 + web_src/js/modules/tippy.js | 3 +- 8 files changed, 65 insertions(+), 153 deletions(-) diff --git a/templates/base/footer_content.tmpl b/templates/base/footer_content.tmpl index 53d0a2c77cf18..c3b96a0245a9e 100644 --- a/templates/base/footer_content.tmpl +++ b/templates/base/footer_content.tmpl @@ -21,7 +21,7 @@ {{end}}
{{svg "octicon-globe"}} - {{.locale.LangName}} +
{{.locale.LangName}}
{{range .AllLangs}} {{.Name}} diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index 94c1813bf7735..692d09e67980b 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -1,5 +1,5 @@ {{if .ctxData.IsSigned}} -
+
{{svg "octicon-smiley"}} diff --git a/templates/repo/issue/view_content/context_menu.tmpl b/templates/repo/issue/view_content/context_menu.tmpl index 0cc207afd4d90..c073c74ea32f0 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/web_src/js/features/aria.js b/web_src/js/features/aria.js index ddf52e3b2b344..46944336adc10 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -6,16 +6,42 @@ function generateAriaId() { return `_aria_auto_id_${ariaIdCounter++}`; } +// make the item has role=option, and add an id if there wasn't one yet. +function prepareMenuItem($item) { + if (!$item.attr('id')) $item.attr('id', generateAriaId()); + $item.attr({'role': 'menuitem', '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. +} + +// when the menu items are loaded from AJAX requests, the items are created dynamically +const defaultCreateDynamicMenu = $.fn.dropdown.settings.templates.menu; +$.fn.dropdown.settings.templates.menu = function(response, fields, preserveHTML, className) { + const ret = defaultCreateDynamicMenu(response, fields, preserveHTML, className); + const $wrapper = $('
').append(ret); + const $items = $wrapper.find('> .item'); + $items.each((_, item) => { + prepareMenuItem($(item)); + }); + return $wrapper.html(); +}; + function attachOneDropdownAria($dropdown) { if ($dropdown.attr('data-aria-attached')) return; $dropdown.attr('data-aria-attached', 1); - // Dropdown has 2 different focusing behaviors - // * with search input: the input is focused, and it works with aria-activedescendant pointing another sibling element. + const $textSearch = $dropdown.find('input.search').eq(0); + const $focusable = $textSearch.length ? $textSearch : $dropdown; // see comment below + if (!$focusable.length) return; + + // prepare menu list + const $menu = $dropdown.find('> .menu'); + if (!$menu.attr('id')) $menu.attr('id', generateAriaId()); + + // dropdown has 2 different focusing behaviors + // * with search input: the input is focused, and it works perfectly with aria-activedescendant pointing another sibling element. // * without search input (but the readonly text), the dropdown itself is focused. then the aria-activedescendant points to the element inside dropdown - // Some desktop screen readers may change the focus, but dropdown requires that the focus must be on its primary element, then they don't work well. - // Expected user interactions for dropdown with aria support: + // expected user interactions for dropdown with aria support: // * user can use Tab to focus in the dropdown, then the dropdown menu (list) will be shown // * user presses Tab on the focused dropdown to move focus to next sibling focusable element (but not the menu item) // * user can use arrow key Up/Down to navigate between menu items @@ -25,66 +51,25 @@ function attachOneDropdownAria($dropdown) { // TODO: multiple selection is not supported yet. - 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. Always use combobox, see "aria.md" for details. - const isComboBox = true; // $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, and add an id if there wasn't one yet. - function prepareMenuItem($item) { - if (!$item.attr('id')) $item.attr('id', generateAriaId()); - $item.attr({'role': listItemRole, '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. - } - - // delegate the dropdown's template function to add aria attributes - 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(); - }; - $dropdown.dropdown('setting', 'templates', dropdownTemplates); + $focusable.attr({ + 'role': 'menu', + 'aria-haspopup': 'menu', + 'aria-controls': $menu.attr('id'), + 'aria-expanded': 'false', + }); - // 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')) { + if ($dropdown.attr('data-content') && !$dropdown.attr('aria-label')) { $dropdown.attr('aria-label', $dropdown.attr('data-content')); } - // 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'), - 'aria-expanded': 'false', - }); - - // 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 = () => { - $focusable.attr('aria-expanded', isMenuVisible() ? 'true' : 'false'); + const isMenuVisible = !$menu.is('.hidden') && !$menu.is('.animating.out'); + $focusable.attr('aria-expanded', isMenuVisible ? 'true' : 'false'); let $active = $menu.find('> .item.active'); if (!$active.length) $active = $menu.find('> .item.selected'); // it's strange that we need this fallback at the moment @@ -100,59 +85,16 @@ function attachOneDropdownAria($dropdown) { 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. // we can not click any item without check, because Fomantic code might also handle the Enter event. that would result in double click. - if ($item && ($item.is('a') || $item.hasClass('js-aria-clickable'))) $item[0].click(); + if ($item && ($item.is('a') || $item.is('.js-aria-clickable'))) $item[0].click(); } }); // use setTimeout to run the refreshAria in next tick (to make sure the Fomantic UI code has finished its work) - // do not return any value, jQuery has return-value related behaviors. - const deferredRefreshAria = () => { setTimeout(refreshAria, 0) }; + const deferredRefreshAria = () => { setTimeout(refreshAria, 0) }; // do not return any value, jQuery has return-value related behaviors. + $focusable.on('focus', deferredRefreshAria); + $focusable.on('mouseup', deferredRefreshAria); + $focusable.on('blur', deferredRefreshAria); $dropdown.on('keyup', (e) => { if (e.key.startsWith('Arrow')) 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 - // * desktop event sequence: mousedown -> focus -> mouseup -> click - // * mobile event sequence: focus -> mousedown -> mouseup -> click - // Fomantic may stop propagation of blur event, use capture to make sure we can still get the event - // keep the debug code for developers who want to confirm&debug this code for different browsers (without attaching a remote debugger) - const showDebug = false; - const debug = (msg) => showDebug && $('.page-content').append($('
').text(`${$menu.attr('id')} ${msg}, menu visible=${isMenuVisible()}`)); - let ignoreClickPreEvents = 0, ignoreClickPreVisible = 0; - $dropdown[0].addEventListener('mousedown', (e) => { - debug(e.type); - ignoreClickPreVisible += isMenuVisible() ? 1 : 0; - ignoreClickPreEvents++; - }, true); - $dropdown[0].addEventListener('focus', (e) => { - debug(e.type); - ignoreClickPreVisible += isMenuVisible() ? 1 : 0; - ignoreClickPreEvents++; - deferredRefreshAria(); - }, true); - $dropdown[0].addEventListener('blur', (e) => { - debug(e.type); - ignoreClickPreVisible = ignoreClickPreEvents = 0; - deferredRefreshAria(); - }, true); - $dropdown[0].addEventListener('mouseup', (e) => { - debug(e.type); - setTimeout(() => { - debug(`${e.type} (deferred)`); - ignoreClickPreVisible = ignoreClickPreEvents = 0; - deferredRefreshAria(); - }, 0); - }, true); - $dropdown[0].addEventListener('click', (e) => { - debug(`${e.type}, pre-visible=${ignoreClickPreVisible}, pre-events=${ignoreClickPreEvents}`); - if (isMenuVisible() && - ignoreClickPreVisible !== 2 && // dropdown is switch from invisible to visible - ignoreClickPreEvents === 2 // the click event is related to mousedown+focus - ) { - debug(`${e.type}, stop click propagation`); - e.stopPropagation(); // if the dropdown menu has been opened by focus, do not trigger the next click event again - } - ignoreClickPreEvents = ignoreClickPreVisible = 0; - }, true); } export function attachDropdownAria($dropdowns) { diff --git a/web_src/js/features/aria.md b/web_src/js/features/aria.md index ffe525c04360c..a55344de47d96 100644 --- a/web_src/js/features/aria.md +++ b/web_src/js/features/aria.md @@ -30,10 +30,11 @@ There is still a problem: Fomantic UI checkbox is not friendly to screen readers ## ARIA Dropdown There are different solutions: - * combobox + listbox + option * menu + menuitem +At the moment, `menu + menuitem` seems to work better with Fomantic UI Dropdown, so we only use it now. + ```html
@@ -48,33 +49,6 @@ There are different solutions: ## Fomantic UI Dropdown -There are 2 possible solutions about the role: combobox or menu - -1. Detect if the dropdown has an input, if yes, it works like a combobox, otherwise it works like a menu -2. Always use "combobox", never use "menu" - -According to the public discussion with fsologureng in chat channel, we think it's better to use "combobox" for all dropdowns. - -> On the old web there were many menus implemented with an auto-submit select, -> but that didn't change the fact that they were selects for screen readers. -> That is the case with Fomantic dropdowns as used in Gitea. -> Implementations of auto-submit select menus fell behind in modern web design precisely because they are not usable or accessible." -> -> We can mark all "dropdown" as "combobox", never use "menu" in code. Do you think this solution is clear enough? -> -> Yes. I think it will provide better accessibility because is more coherent with the current fomantic based implementation. - -Reference: - -* Combobox: - * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ - * A combobox is an **input widget** with an associated popup that enables users to select a value for the combobox from - a collection of possible values. In some implementations, the popup presents allowed values, while in other implementations, - the popup presents suggested values, and users may either select one of the suggestions or type a value. -* Menu: - * https://www.w3.org/WAI/ARIA/apg/patterns/menubar/ - * A menu is a widget that offers a list of choices to the user, such as a set of **actions or functions**. - ```html
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index 8258fa7477de7..4fa6942467ee3 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -89,12 +89,9 @@ export function initGlobalCommon() { // Semantic UI modules. const $uiDropdowns = $('.ui.dropdown'); - - // do not init "custom" dropdowns, "custom" dropdowns are managed by their own code. - $uiDropdowns.filter(':not(.custom)').dropdown({fullTextSearch: 'exact'}); - - // "jump" means this dropdown is mainly used for "menu" purpose, clicking an item will jump to somewhere else or trigger an action/function. - // when a dropdown is used for non-refresh actions with tippy, it must have this "jump" class to hide the tippy when dropdown is closed. + $uiDropdowns.filter(':not(.custom)').dropdown({ + fullTextSearch: 'exact' + }); $uiDropdowns.filter('.jump').dropdown({ action: 'hide', onShow() { @@ -104,20 +101,17 @@ export function initGlobalCommon() { }, onHide() { this._tippy?.enable(); - - // hide all tippy elements of items after a while. eg: keyboard Enter to trigger the "Copy Link" in the Issue Context Menu - setTimeout(() => { - $(this).find('.menu > .item').each((_, item) => { - item._tippy?.hide(); - }); - }, 2000); }, + fullTextSearch: 'exact' + }); + $uiDropdowns.filter('.slide.up').dropdown({ + transition: 'slide up', + fullTextSearch: 'exact' + }); + $uiDropdowns.filter('.upward').dropdown({ + direction: 'upward', + fullTextSearch: 'exact' }); - - // special animations/popup-directions - $uiDropdowns.filter('.slide.up').dropdown({transition: 'slide up'}); - $uiDropdowns.filter('.upward').dropdown({direction: 'upward'}); - attachDropdownAria($uiDropdowns); attachCheckboxAria($('.ui.checkbox')); diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index 986fd0948fdb0..70542ad883e9c 100644 --- a/web_src/js/features/repo-legacy.js +++ b/web_src/js/features/repo-legacy.js @@ -601,6 +601,9 @@ export function initRepository() { } function initRepoIssueCommentEdit() { + // Issue/PR Context Menus + $('.comment-header-right .context-dropdown').dropdown({action: 'hide'}); + // Edit issue or comment content $(document).on('click', '.edit-content', onEditContent); diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index f57821204db89..ce8f0369f11c9 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -52,11 +52,10 @@ export function showTemporaryTooltip(target, content) { onHidden: (tippy) => { if (oldContent) { tippy.setContent(oldContent); - tippy.setProps({onHidden: undefined}); } else { tippy.destroy(); - // after destroy, the `_tippy` is detached, it can't do "setProps (etc...)" anymore } + tippy.setProps({onHidden: undefined}); }, }); } From e7227999aa8fcb53a55dd2d495506298baef500b Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 15 Mar 2023 12:57:53 +0800 Subject: [PATCH 24/24] fix merge --- web_src/css/repository.css | 29 +++-------------------------- 1 file changed, 3 insertions(+), 26 deletions(-) diff --git a/web_src/css/repository.css b/web_src/css/repository.css index ad2ac49b9984a..7ed7195a3a3fe 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -3049,21 +3049,10 @@ tbody.commit-list { top: -2px; } -#topic_edit { - margin-top: 5px; -} - -#repo-topics { - margin-top: 5px; - display: flex; - align-items: center; - flex-wrap: wrap; -} - -.repo-topic { - font-weight: normal !important; +#repo-topics .repo-topic { + font-weight: normal; cursor: pointer; - margin: 2px !important; + margin: 2px; } #new-dependency-drop-list.ui.selection.dropdown { @@ -3079,18 +3068,6 @@ tbody.commit-list { overflow: hidden; } -#manage_topic { - font-size: 12px; -} - -.label + #manage_topic { - margin-left: 5px; -} - -.ui.small.label.topic { - margin-bottom: 4px; -} - .repo-header { display: flex; align-items: center;