Skip to content

Commit

Permalink
[Editor] Add a dialog box in order to get alt-text data (bug 1844952)
Browse files Browse the repository at this point in the history 
Implement the specifications provided by UX for light, dark and HCM modes.
  • Loading branch information
@calixteman
calixteman committed Sep 18, 2023
1 parent 920e51a commit e362d16
Show file tree
Hide file tree
Showing 3 changed files with 308 additions and 0 deletions.
10 changes: 10 additions & 0 deletions l10n/en-US/viewer.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,3 +263,13 @@ editor_stamp_add_image.title=Add image
editor_free_text2_aria_label=Text Editor
editor_ink2_aria_label=Draw Editor
editor_ink_canvas_aria_label=User-created image

# Alt-text dialog
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
255 changes: 255 additions & 0 deletions web/annotation_editor_layer_builder.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,3 +307,258 @@
}
}
}

#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;

--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-border-color: #8f8f9d;
--textarea-bg-color: #42414d;

--radio-bg-color: #2b2a33;
--radio-checked-bg-color: #15141a;
--radio-border-color: #8f8f9d;
--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: 2px solid var(--focus-ring-color);
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 {
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: none;
border: 2px solid var(--focus-ring-color);
}
}
}
}

& #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;

&: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;
}
}
}
}
}
}
43 changes: 43 additions & 0 deletions web/viewer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -482,6 +482,49 @@
<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">
Expand Down

0 comments on commit e362d16

Please sign in to comment.