Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP Fixes accessibility behavior for topic management in the repository home view #22631

Closed
wants to merge 2 commits into from
Closed

WIP Fixes accessibility behavior for topic management in the repository home view #22631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2567719
Fixes a11y behaviour for topic management in home repo view
fsologureng Nov 26, 2022
d9f0b67
Merge branch 'main' into gitea-fix-a11y-repo-topics
lafriks Jan 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions options/locale/locale_en-US.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2331,6 +2331,7 @@ tag.create_success = Tag '%s' has been created.

topic.manage_topics = Manage Topics
topic.done = Done
topic.delete = Delete
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Delete topic?
Or is it always clear for users what is supposed to be deleted?

Suggested change
topic.delete = Delete
topic.delete = Delete topic

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.

Expand Down
4 changes: 2 additions & 2 deletions templates/repo/home.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
</div>
<div class="mt-3" id="repo-topics">
{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic" class="muted">{{.locale.Tr "repo.topic.manage_topics"}}</a>{{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic" class="muted" tabindex="0">{{.locale.Tr "repo.topic.manage_topics"}}</a>{{end}}
</div>
{{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
Expand All @@ -40,7 +40,7 @@
<div class="ui fluid multiple search selection dropdown">
<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if lt (Add $i 1) (len $.Topics)}},{{end}}{{end}}">
{{range .Topics}}
<div class="ui small label topic transition visible" data-value="{{.Name}}" style="display: inline-block !important; cursor: default;">{{.Name}}{{svg "octicon-x" 16 "delete icon ml-3 mt-1"}}</div>
<div class="ui small label topic transition visible" data-value="{{.Name}}" style="display: inline-block !important; cursor: default;">{{.Name}}<span class="delete icon ml-3 mt-1" tabindex="0" aria-label="{{$.locale.Tr "repo.topic.delete"}} {{.Name}}">{{svg "octicon-x" 16}}</span></div>
{{end}}
<div class="text"></div>
</div>
Expand Down
6 changes: 6 additions & 0 deletions web_src/js/features/repo-home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@ export function initRepoTopicBar() {
viewDiv.hide();
editDiv.css('display', ''); // show Semantic UI Grid
});
mgrBtn.on('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
viewDiv.hide();
editDiv.css('display', ''); // show Semantic UI Grid
Comment on lines 16 to +22
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could think about extracting the function body (without condition) into a separate method…

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe use a button, then it can automatically handle enter as click.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here is an example about how to use button correctly, instead of duplicating code again.

}
});

function getPrompts() {
const hidePrompt = $('div.hide#validate_prompt');
Expand Down