IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-21 16:38:15 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: add title attribute to composer preview image controls (#26301)

Browse Source
This commit is contained in:
Kris 2024-03-22 09:49:10 -04:00 committed by GitHub
parent 0d890e1f98
commit 9cadc402e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/assets/javascripts/discourse-markdown-it/src/features/image-controls.js
View File

@ -80,27 +80,25 @@ function rule(state) {
function buildScaleButton(selectedScale, scale) {
const activeScaleClass = selectedScale === scale ? " active" : "";
return (
"<span class='scale-btn" +
activeScaleClass +
"' data-scale='" +
scale +
"'>" +
scale +
"%</span>"
);
return `<span title="
${I18n.t("composer.image_scale_button", { percent: scale })}"
class='scale-btn${activeScaleClass}' data-scale='${scale}'
>
${scale}%
</span>`;
}
function buildImageShowAltTextControls(altText) {
return `
<span class="alt-text-readonly-container">
<span class="alt-text-edit-btn">
<svg aria-hidden="true" class="fa d-icon d-icon-pencil svg-icon svg-string"><use href="#pencil-alt"></use></svg>
</span>
<span class="alt-text" aria-label="${I18n.t(
"composer.image_alt_text.aria_label"
)}">${altText}</span>
<span class="alt-text-edit-btn"
title="${I18n.t("composer.image_alt_text.title")}"
>
<svg aria-hidden="true" class="fa d-icon d-icon-pencil svg-icon svg-string"><use href="#pencil-alt"></use></svg>
</span>
<span class="alt-text"
aria-label="${I18n.t("composer.image_alt_text.aria_label")}"
>${altText}</span>
</span>
`;
}
@ -121,13 +119,14 @@ function buildImageEditAltTextControls(altText) {
function buildImageDeleteButton() {
return `
<span class="delete-image-button" aria-label="${I18n.t(
"composer.delete_image_button"
)}">
<svg class="fa d-icon d-icon-trash-alt svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
<use href="#far-trash-alt"></use>
</svg>
</span>
<span class="delete-image-button"
title="${I18n.t("composer.delete_image_button")}"
aria-label="${I18n.t("composer.delete_image_button")}"
>
<svg class="fa d-icon d-icon-trash-alt svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
<use href="#far-trash-alt"></use>
</svg>
</span>
`;
}

2
config/locales/client.en.yml
View File

@ -2588,7 +2588,9 @@ en:
image_alt_text:
aria_label: Alt text for image
title: "Add image description"
image_scale_button: "Scale image to %{percent}%"
delete_image_button: Delete Image
toggle_image_grid: Toggle image grid