diff --git a/modules/templates/util_avatar.go b/modules/templates/util_avatar.go
index 73fde99f40..ee9994ab0b 100644
--- a/modules/templates/util_avatar.go
+++ b/modules/templates/util_avatar.go
@@ -35,7 +35,7 @@ func AvatarHTML(src string, size int, class, name string) template.HTML {
}
// use empty alt, otherwise if the image fails to load, the width will follow the "alt" text's width
- return template.HTML(`<img loading="lazy" alt="" class="` + class + `" src="` + src + `" title="` + html.EscapeString(name) + `" width="` + sizeStr + `" height="` + sizeStr + `"/>`)
+ return template.HTML(`<img loading="lazy" alt class="` + class + `" src="` + src + `" title="` + html.EscapeString(name) + `" width="` + sizeStr + `" height="` + sizeStr + `"/>`)
}
// Avatar renders user avatars. args: user, size (int), class (string)
diff --git a/templates/install.tmpl b/templates/install.tmpl
index 058822a6f6..0aec52f27b 100644
--- a/templates/install.tmpl
+++ b/templates/install.tmpl
@@ -351,5 +351,4 @@
</div>
</div>
</div>
-<img class="tw-hidden" src="{{AssetUrlPrefix}}/img/loading.png">
{{template "base/footer" .}}
diff --git a/templates/post-install.tmpl b/templates/post-install.tmpl
index fa10827295..0c9aa35c90 100644
--- a/templates/post-install.tmpl
+++ b/templates/post-install.tmpl
@@ -2,7 +2,7 @@
<div role="main" aria-label="{{.Title}}" class="page-content install post-install tw-h-full">
<div class="home tw-text-center tw-h-full tw-flex tw-flex-col tw-justify-center"><!-- the "home" class makes the links green -->
<!-- the "cup" has a handler, so move it a little leftward to make it visually in the center -->
- <div class="tw-ml-[-30px]"><img width="160" src="{{AssetUrlPrefix}}/img/loading.png" alt="" aria-hidden="true"></div>
+ <div class="tw-ml-[-30px]"><img width="160" src="{{AssetUrlPrefix}}/img/loading.png" alt aria-hidden="true"></div>
<div class="tw-my-[2em] tw-text-[18px]">
<a id="goto-user-login" href="{{AppSubUrl}}/user/login">{{ctx.Locale.Tr "install.installing_desc"}}</a>
</div>
diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
index bbd8d4a2ec..7557129c64 100644
--- a/templates/repo/diff/image_diff.tmpl
+++ b/templates/repo/diff/image_diff.tmpl
@@ -22,7 +22,7 @@
{{if .blobBase}}
<span class="side">
<p class="side-header">{{ctx.Locale.Tr "repo.diff.file_before"}}</p>
- <span class="before-container"><img class="image-before"></span>
+ <span class="before-container"><img alt class="image-before"></span>
<p>
<span class="bounds-info-before">
{{ctx.Locale.Tr "repo.diff.file_image_width"}}: <span class="text bounds-info-width"></span>
@@ -37,7 +37,7 @@
{{if .blobHead}}
<span class="side">
<p class="side-header">{{ctx.Locale.Tr "repo.diff.file_after"}}</p>
- <span class="after-container"><img class="image-after"></span>
+ <span class="after-container"><img alt class="image-after"></span>
<p>
<span class="bounds-info-after">
{{ctx.Locale.Tr "repo.diff.file_image_width"}}: <span class="text bounds-info-width"></span>
@@ -55,9 +55,9 @@
<div class="ui bottom attached tab image-diff-container" data-tab="diff-swipe-{{.file.NameHash}}">
<div class="diff-swipe">
<div class="swipe-frame">
- <span class="before-container"><img class="image-before"></span>
+ <span class="before-container"><img alt class="image-before"></span>
<span class="swipe-container">
- <span class="after-container"><img class="image-after"></span>
+ <span class="after-container"><img alt class="image-after"></span>
</span>
<span class="swipe-bar">
<span class="handle top-handle"></span>
@@ -70,8 +70,8 @@
<div class="diff-overlay">
<input type="range" min="0" max="100" value="50">
<div class="overlay-frame">
- <span class="before-container"><img class="image-before"></span>
- <span class="after-container"><img class="image-after"></span>
+ <span class="before-container"><img alt class="image-before"></span>
+ <span class="after-container"><img alt class="image-after"></span>
</div>
</div>
</div>
diff --git a/templates/repo/icon.tmpl b/templates/repo/icon.tmpl
index 3747d3a6f5..e4a904c46b 100644
--- a/templates/repo/icon.tmpl
+++ b/templates/repo/icon.tmpl
@@ -1,6 +1,6 @@
{{$avatarLink := (.RelAvatarLink ctx)}}
{{if $avatarLink}}
- <img class="ui avatar tw-align-middle" src="{{$avatarLink}}" width="24" height="24" alt="" aria-hidden="true">
+ <img class="ui avatar tw-align-middle" src="{{$avatarLink}}" width="24" height="24" alt aria-hidden="true">
{{else if $.IsMirror}}
{{svg "octicon-mirror" 24}}
{{else if $.IsFork}}
diff --git a/templates/repo/issue/labels/label_edit_modal.tmpl b/templates/repo/issue/labels/label_edit_modal.tmpl
index 06c397ba8d..364fc508f1 100644
--- a/templates/repo/issue/labels/label_edit_modal.tmpl
+++ b/templates/repo/issue/labels/label_edit_modal.tmpl
@@ -50,7 +50,7 @@
<div class="field">
<label for="color">{{ctx.Locale.Tr "repo.issues.label_color"}}</label>
<div class="column js-color-picker-input">
- <input name="color" value="#70c24a"placeholder="#c320f6" required maxlength="7">
+ <input name="color" value="#70c24a" placeholder="#c320f6" required maxlength="7">
{{template "repo/issue/label_precolors"}}
</div>
</div>
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
index e78b0a7c35..591820080f 100644
--- a/templates/repo/issue/milestone_issues.tmpl
+++ b/templates/repo/issue/milestone_issues.tmpl
@@ -28,8 +28,8 @@
{{end}}
<div class="tw-flex tw-flex-col tw-gap-2">
<progress class="milestone-progress-big" value="{{.Milestone.Completeness}}" max="100"></progress>
- <div class="tw-flex tw-gap-4">
- <div classs="tw-flex tw-items-center">
+ <div class="flex-text-block tw-gap-4">
+ <div class="flex-text-inline">
{{$closedDate:= DateUtils.TimeSince .Milestone.ClosedDateUnix}}
{{if .IsClosed}}
{{svg "octicon-clock"}} {{ctx.Locale.Tr "repo.milestones.closed" $closedDate}}
@@ -46,7 +46,7 @@
{{end}}
{{end}}
</div>
- <div class="tw-mr-2">{{ctx.Locale.Tr "repo.milestones.completeness" .Milestone.Completeness}}</div>
+ <div>{{ctx.Locale.Tr "repo.milestones.completeness" .Milestone.Completeness}}</div>
{{if .TotalTrackedTime}}
<div data-tooltip-content='{{ctx.Locale.Tr "tracked_time_summary"}}'>
{{svg "octicon-clock"}}
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index f2f3d1c9cc..8f49bcf07e 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -615,7 +615,7 @@
<div class="timeline-item-group">
<div class="timeline-item event" id="{{.HashTag}}">
<a class="timeline-avatar"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
- <img src="{{.Poster.AvatarLink ctx}}" width="40" height="40">
+ <img alt src="{{.Poster.AvatarLink ctx}}" width="40" height="40">
</a>
<span class="badge grey">{{svg "octicon-x" 16}}</span>
<span class="text grey muted-links">
diff --git a/templates/repo/migrate/migrating.tmpl b/templates/repo/migrate/migrating.tmpl
index 8b83816b9b..e73e3a9790 100644
--- a/templates/repo/migrate/migrating.tmpl
+++ b/templates/repo/migrate/migrating.tmpl
@@ -9,12 +9,12 @@
<div class="ui stackable middle very relaxed page grid">
<div id="repo_migrating" class="sixteen wide tw-text-center centered column" data-migrating-repo-link="{{.Link}}">
<div>
- <img src="{{AssetUrlPrefix}}/img/loading.png">
+ <img alt src="{{AssetUrlPrefix}}/img/loading.png">
</div>
</div>
<div id="repo_migrating_failed_image" class="sixteen wide tw-text-center centered column tw-hidden">
<div>
- <img src="{{AssetUrlPrefix}}/img/failed.png">
+ <img alt src="{{AssetUrlPrefix}}/img/failed.png">
</div>
</div>
</div>
diff --git a/templates/repo/settings/lfs_file.tmpl b/templates/repo/settings/lfs_file.tmpl
index 9f72d764ae..7698f77b2a 100644
--- a/templates/repo/settings/lfs_file.tmpl
+++ b/templates/repo/settings/lfs_file.tmpl
@@ -21,7 +21,7 @@
{{else if not .IsTextFile}}
<div class="view-raw">
{{if .IsImageFile}}
- <img src="{{$.RawFileLink}}">
+ <img alt="{{$.RawFileLink}}" src="{{$.RawFileLink}}">
{{else if .IsVideoFile}}
<video controls src="{{$.RawFileLink}}">
<strong>{{ctx.Locale.Tr "repo.video_not_supported_in_browser"}}</strong>
diff --git a/templates/repo/star_unstar.tmpl b/templates/repo/star_unstar.tmpl
index a58fca1fcc..dea965ab30 100644
--- a/templates/repo/star_unstar.tmpl
+++ b/templates/repo/star_unstar.tmpl
@@ -4,7 +4,7 @@
{{if $.IsStaringRepo}}{{$buttonText = ctx.Locale.Tr "repo.unstar"}}{{end}}
<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}} aria-label="{{$buttonText}}">
{{svg (Iif $.IsStaringRepo "octicon-star-fill" "octicon-star")}}
- <span aria-hidden="true">{{$buttonText}}</span>
+ <span class="not-mobile" aria-hidden="true">{{$buttonText}}</span>
</button>
<a hx-boost="false" class="ui basic label" href="{{$.RepoLink}}/stars">
{{CountFmt .Repository.NumStars}}
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index f01adccadc..dc789a2648 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -98,7 +98,7 @@
{{else if not .IsTextSource}}
<div class="view-raw">
{{if .IsImageFile}}
- <img src="{{$.RawFileLink}}">
+ <img alt="{{$.RawFileLink}}" src="{{$.RawFileLink}}">
{{else if .IsVideoFile}}
<video controls src="{{$.RawFileLink}}">
<strong>{{ctx.Locale.Tr "repo.video_not_supported_in_browser"}}</strong>
diff --git a/templates/repo/watch_unwatch.tmpl b/templates/repo/watch_unwatch.tmpl
index 4c16898730..6f2e5b7a19 100644
--- a/templates/repo/watch_unwatch.tmpl
+++ b/templates/repo/watch_unwatch.tmpl
@@ -4,7 +4,7 @@
{{if $.IsWatchingRepo}}{{$buttonText = ctx.Locale.Tr "repo.unwatch"}}{{end}}
<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}} aria-label="{{$buttonText}}">
{{svg "octicon-eye"}}
- <span aria-hidden="true">{{$buttonText}}</span>
+ <span class="not-mobile" aria-hidden="true">{{$buttonText}}</span>
</button>
<a hx-boost="false" class="ui basic label" href="{{.RepoLink}}/watchers">
{{CountFmt .Repository.NumWatches}}
diff --git a/templates/shared/webhook/icon.tmpl b/templates/shared/webhook/icon.tmpl
index 245ed16505..105212eb56 100644
--- a/templates/shared/webhook/icon.tmpl
+++ b/templates/shared/webhook/icon.tmpl
@@ -5,23 +5,23 @@
{{if eq .HookType "gitea"}}
{{svg "gitea-gitea" $size "img"}}
{{else if eq .HookType "gogs"}}
- <img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/gogs.ico">
+ <img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/gogs.ico">
{{else if eq .HookType "slack"}}
- <img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/slack.png">
+ <img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/slack.png">
{{else if eq .HookType "discord"}}
- <img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/discord.png">
+ <img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/discord.png">
{{else if eq .HookType "dingtalk"}}
- <img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/dingtalk.ico">
+ <img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/dingtalk.ico">
{{else if eq .HookType "telegram"}}
- <img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/telegram.png">
+ <img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/telegram.png">
{{else if eq .HookType "msteams"}}
- <img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/msteams.png">
+ <img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/msteams.png">
{{else if eq .HookType "feishu"}}
{{svg "gitea-feishu" $size "img"}}
{{else if eq .HookType "matrix"}}
{{svg "gitea-matrix" $size "img"}}
{{else if eq .HookType "wechatwork"}}
- <img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/wechatwork.png">
+ <img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/wechatwork.png">
{{else if eq .HookType "packagist"}}
- <img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/packagist.png">
+ <img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/packagist.png">
{{end}}
diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl
index 366bb80b42..97291fc42d 100644
--- a/templates/user/dashboard/feeds.tmpl
+++ b/templates/user/dashboard/feeds.tmpl
@@ -91,7 +91,7 @@
{{range $push.Commits}}
{{$commitLink := printf "%s/commit/%s" $repoLink .Sha1}}
<div class="flex-text-block">
- <img class="ui avatar" src="{{$push.AvatarLink ctx .AuthorEmail}}" title="{{.AuthorName}}" width="16" height="16">
+ <img alt class="ui avatar" src="{{$push.AvatarLink ctx .AuthorEmail}}" title="{{.AuthorName}}" width="16" height="16">
<a class="ui sha label" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
<span class="text truncate">
{{ctx.RenderUtils.RenderCommitMessage .Message ($repo.ComposeCommentMetas ctx)}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index e2daeb341a..204b6a1560 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2,7 +2,10 @@
/* fonts */
--fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
--fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
- --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
+ /* GitHub explicitly sets font names like: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
+ Actually "Twemoji Mozilla" emoji font is widely used by browsers like Firefox, Pale Moon, and it is more likely up-to-dated than the system emoji font.
+ So not setting emoji font seems to be the best choice, here we just use a non-existing dummy font name and let browsers choose. */
+ --fonts-emoji: -emoji-fallback;
/* font weights - use between 400 and 600 for general purposes. Avoid 700 as it is perceived too bold */
--font-weight-light: 300;
--font-weight-normal: 400;
diff --git a/web_src/js/features/repo-issue-list.ts b/web_src/js/features/repo-issue-list.ts
index 01d4bb6f78..8cd4483357 100644
--- a/web_src/js/features/repo-issue-list.ts
+++ b/web_src/js/features/repo-issue-list.ts
@@ -138,7 +138,7 @@ function initDropdownUserRemoteSearch(el: Element) {
// the content is provided by backend IssuePosters handler
processedResults.length = 0;
for (const item of resp.results) {
- let html = `<img class="ui avatar tw-align-middle" src="${htmlEscape(item.avatar_link)}" aria-hidden="true" alt="" width="20" height="20"><span class="gt-ellipsis">${htmlEscape(item.username)}</span>`;
+ let html = `<img class="ui avatar tw-align-middle" src="${htmlEscape(item.avatar_link)}" aria-hidden="true" alt width="20" height="20"><span class="gt-ellipsis">${htmlEscape(item.username)}</span>`;
if (item.full_name) html += `<span class="search-fullname tw-ml-2">${htmlEscape(item.full_name)}</span>`;
if (selectedUsername.toLowerCase() === item.username.toLowerCase()) selectedUsername = item.username;
processedResults.push({value: item.username, name: html});
diff --git a/web_src/js/features/tribute.ts b/web_src/js/features/tribute.ts
index de1c3e97cd..cf98377ae7 100644
--- a/web_src/js/features/tribute.ts
+++ b/web_src/js/features/tribute.ts
@@ -34,7 +34,7 @@ export async function attachTribute(element: HTMLElement) {
menuItemTemplate: (item: TributeItem) => {
return `
<div class="tribute-item">
- <img src="${htmlEscape(item.original.avatar)}" width="21" height="21"/>
+ <img alt src="${htmlEscape(item.original.avatar)}" width="21" height="21"/>
<span class="name">${htmlEscape(item.original.name)}</span>
${item.original.fullname && item.original.fullname !== '' ? `<span class="fullname">${htmlEscape(item.original.fullname)}</span>` : ''}
</div>