[Editor] Add a dialog box in order to get alt-text data (bug 1844952)
Implement the specifications provided by UX for light, dark and HCM modes.
This commit is contained in:
parent
c0ed7fff2c
commit
df0da86b64
@ -268,3 +268,11 @@ editor_ink_canvas_aria_label=User-created image
|
||||
# LOCALIZATION NOTE (alt_text_button_label): Alternative text (alt text) helps
|
||||
# when people can't see the image.
|
||||
alt_text_button_label=Alt text
|
||||
editor_alt_text_dialog_label=Choose an option
|
||||
editor_alt_text_dialog_description=Alternative text (alt text) helps when people can’t see the image or when it doesn’t load.
|
||||
editor_alt_text_enter_description_label=Enter a description
|
||||
editor_alt_text_enter_description_description=Aim for 1-2 sentences that describe the subject, setting, or actions.
|
||||
editor_alt_text_mark_decorative_label=Mark as decorative
|
||||
editor_alt_text_mark_decorative_description=This is best for images that aren’t informative, like borders or stylistic elements.
|
||||
editor_alt_text_cancel_button=Cancel
|
||||
editor_alt_text_save_button=Save
|
||||
|
@ -527,3 +527,271 @@
|
||||
mask-image: var(--alt-text-done-image);
|
||||
}
|
||||
}
|
||||
|
||||
#altTextDialog {
|
||||
--dialog-bg-color: white;
|
||||
--dialog-border-color: white;
|
||||
--dialog-shadow: 0 2px 14px 0 rgba(58, 57, 68, 0.2);
|
||||
--text-primary-color: #15141a;
|
||||
--text-secondary-color: #5b5b66;
|
||||
--hover-filter: brightness(0.9);
|
||||
--focus-ring-color: #0060df;
|
||||
--focus-ring-outline: 2px solid var(--focus-ring-color);
|
||||
|
||||
--textarea-border-color: #8f8f9d;
|
||||
--textarea-bg-color: white;
|
||||
--textarea-fg-color: var(--text-secondary-color);
|
||||
|
||||
--radio-bg-color: #f0f0f4;
|
||||
--radio-checked-bg-color: #fbfbfe;
|
||||
--radio-border-color: #8f8f9d;
|
||||
--radio-checked-border-color: #0060df;
|
||||
|
||||
--button-cancel-bg-color: #f0f0f4;
|
||||
--button-cancel-fg-color: var(--text-primary-color);
|
||||
--button-cancel-border-color: var(--button-cancel-bg-color);
|
||||
--button-cancel-hover-bg-color: var(--button-cancel-bg-color);
|
||||
--button-cancel-hover-fg-color: var(--button-cancel-fg-color);
|
||||
--button-cancel-hover-border-color: var(--button-cancel-hover-bg-color);
|
||||
|
||||
--button-save-bg-color: #0060df;
|
||||
--button-save-fg-color: #fbfbfe;
|
||||
--button-save-hover-bg-color: var(--button-save-bg-color);
|
||||
--button-save-hover-fg-color: var(--button-save-fg-color);
|
||||
--button-save-hover-border-color: var(--button-save-hover-bg-color);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--dialog-bg-color: #1c1b22;
|
||||
--dialog-border-color: #1c1b22;
|
||||
--dialog-shadow: 0 2px 14px 0 #15141a;
|
||||
--text-primary-color: #fbfbfe;
|
||||
--text-secondary-color: #cfcfd8;
|
||||
--focus-ring-color: #00ddff;
|
||||
--hover-filter: brightness(1.4);
|
||||
|
||||
--textarea-bg-color: #42414d;
|
||||
|
||||
--radio-bg-color: #2b2a33;
|
||||
--radio-checked-bg-color: #15141a;
|
||||
--radio-checked-border-color: #00ddff;
|
||||
|
||||
--button-cancel-bg-color: #2b2a33;
|
||||
--button-save-bg-color: #00ddff;
|
||||
--button-save-fg-color: #15141a;
|
||||
}
|
||||
|
||||
@media screen and (forced-colors: active) {
|
||||
--dialog-bg-color: Canvas;
|
||||
--dialog-border-color: CanvasText;
|
||||
--dialog-shadow: none;
|
||||
--text-primary-color: CanvasText;
|
||||
--text-secondary-color: CanvasText;
|
||||
--hover-filter: none;
|
||||
--focus-ring-color: ButtonBorder;
|
||||
|
||||
--textarea-border-color: ButtonBorder;
|
||||
--textarea-bg-color: Field;
|
||||
--textarea-fg-color: ButtonText;
|
||||
|
||||
--radio-bg-color: ButtonFace;
|
||||
--radio-checked-bg-color: ButtonFace;
|
||||
--radio-border-color: ButtonText;
|
||||
--radio-checked-border-color: ButtonText;
|
||||
|
||||
--button-cancel-bg-color: ButtonFace;
|
||||
--button-cancel-fg-color: ButtonText;
|
||||
--button-cancel-border-color: ButtonText;
|
||||
--button-cancel-hover-bg-color: AccentColor;
|
||||
--button-cancel-hover-fg-color: AccentColorText;
|
||||
|
||||
--button-save-bg-color: ButtonText;
|
||||
--button-save-fg-color: ButtonFace;
|
||||
--button-save-hover-bg-color: AccentColor;
|
||||
--button-save-hover-fg-color: AccentColorText;
|
||||
}
|
||||
|
||||
font: message-box;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
border-radius: 4px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--dialog-border-color);
|
||||
background: var(--dialog-bg-color);
|
||||
color: var(--text-primary-color);
|
||||
box-shadow: var(--dialog-shadow);
|
||||
|
||||
& #altTextContainer {
|
||||
width: 300px;
|
||||
height: fit-content;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
|
||||
& *:focus {
|
||||
outline: var(--focus-ring-outline);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
& .radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
|
||||
& .radioButton {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
|
||||
& input {
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--radio-bg-color);
|
||||
border: 1px solid var(--radio-border-color);
|
||||
|
||||
&:hover {
|
||||
filter: var(--hover-filter);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: var(--radio-checked-bg-color);
|
||||
border: 4px solid var(--radio-checked-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .radioLabel {
|
||||
display: flex;
|
||||
padding-inline-start: 24px;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
|
||||
& span {
|
||||
flex: 1 0 0;
|
||||
font-size: 0.9em;
|
||||
color: var(--text-secondary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& #overallDescription {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
align-self: stretch;
|
||||
|
||||
& span {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
& .title {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
& #addDescription {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
|
||||
& .descriptionArea {
|
||||
flex: 1;
|
||||
padding-inline: 24px 10px;
|
||||
|
||||
textarea {
|
||||
font: inherit;
|
||||
width: 100%;
|
||||
min-height: 75px;
|
||||
padding: 8px;
|
||||
resize: none;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--textarea-border-color);
|
||||
background: var(--textarea-bg-color);
|
||||
color: var(--textarea-fg-color);
|
||||
|
||||
&:focus {
|
||||
outline-offset: 0;
|
||||
border-color: transparent;
|
||||
}
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& #buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
align-self: stretch;
|
||||
|
||||
button {
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
font: menu;
|
||||
font-weight: 600;
|
||||
padding: 4px 16px;
|
||||
width: auto;
|
||||
height: 32px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
outline-offset: 0;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--focus-ring-outline);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
filter: var(--hover-filter);
|
||||
}
|
||||
|
||||
&#altTextCancel {
|
||||
color: var(--button-cancel-fg-color);
|
||||
background-color: var(--button-cancel-bg-color);
|
||||
border-color: var(--button-cancel-border-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--button-cancel-hover-fg-color);
|
||||
background-color: var(--button-cancel-hover-bg-color);
|
||||
border-color: var(--button-cancel-hover-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
&#altTextSave {
|
||||
color: var(--button-save-hover-fg-color);
|
||||
background-color: var(--button-save-hover-bg-color);
|
||||
border-color: var(--button-save-hover-border-color);
|
||||
opacity: 1;
|
||||
|
||||
&:hover {
|
||||
color: var(--button-save-hover-fg-color);
|
||||
background-color: var(--button-save-hover-bg-color);
|
||||
border-color: var(--button-save-hover-border-color);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -482,6 +482,49 @@ See https://github.com/adobe-type-tools/cmap-resources
|
||||
<button id="documentPropertiesClose" class="dialogButton"><span data-l10n-id="document_properties_close">Close</span></button>
|
||||
</div>
|
||||
</dialog>
|
||||
<dialog id="altTextDialog" aria-labelledby="dialogLabel" aria-describedby="dialogDescription">
|
||||
<div id="altTextContainer">
|
||||
<div id="overallDescription">
|
||||
<span id="dialogLabel" data-l10n-id="editor_alt_text_dialog_label" class="title">Choose an option</span>
|
||||
<span id="dialogDescription" data-l10n-id="editor_alt_text_dialog_description">
|
||||
Alternative text (alt text) helps when people can’t see the image or when it doesn’t load.
|
||||
</span>
|
||||
</div>
|
||||
<div id="addDescription">
|
||||
<div class="radio">
|
||||
<div class="radioButton">
|
||||
<input type="radio" id="descriptionButton" name="altTextOption" tabindex="0" checked>
|
||||
<label for="descriptionButton" data-l10n-id="editor_alt_text_enter_description_label">Enter a description</label>
|
||||
</div>
|
||||
<div class="radioLabel">
|
||||
<span id="descriptionAreaLabel" data-l10n-id="editor_alt_text_enter_description_description">
|
||||
Aim for 1-2 sentences that describe the subject, setting, or actions.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="descriptionArea">
|
||||
<textarea id="descriptionTextarea" aria-labelledby="descriptionAreaLabel" tabindex="0"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div id="markAsDecorative">
|
||||
<div class="radio">
|
||||
<div class="radioButton">
|
||||
<input type="radio" id="decorativeButton" name="altTextOption">
|
||||
<label for="decorativeButton" data-l10n-id="editor_alt_text_mark_decorative_label">Mark as decorative</label>
|
||||
</div>
|
||||
<div class="radioLabel">
|
||||
<span data-l10n-id="editor_alt_text_mark_decorative_description">
|
||||
This is best for images that aren’t informative, like borders or stylistic elements.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="buttons">
|
||||
<button id="altTextCancel" tabindex="0"><span data-l10n-id="editor_alt_text_cancel_button">Cancel</span></button>
|
||||
<button id="altTextSave" tabindex="0" disabled><span data-l10n-id="editor_alt_text_save_button">Save</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<!--#if !MOZCENTRAL-->
|
||||
<dialog id="printServiceDialog" style="min-width: 200px;">
|
||||
<div class="row">
|
||||
|
Loading…
Reference in New Issue
Block a user