Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Bug 1068712 - email app: improved accessibility of the compose screen. #27364

Merged
merged 1 commit into from Jan 23, 2015
Merged

Bug 1068712 - email app: improved accessibility of the compose screen. #27364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 3 additions & 2 deletions apps/email/js/cards/cmp/attachment_item.html
View file
Open in desktop
@@ -1,8 +1,9 @@
<li class="cmp-attachment-item">
<span class="cmp-attachment-icon"></span>
<span class="cmp-attachment-icon" role="presentation"></span>
<span class="cmp-attachment-fileinfo">
<span dir="auto" class="cmp-attachment-filename"></span>
<span class="cmp-attachment-filesize"></span>
</span>
<span class="cmp-attachment-remove"></span>
<span class="cmp-attachment-remove" role="button"
data-l10n-id="compose-attachment-remove"></span>
</li>
2 changes: 1 addition & 1 deletion apps/email/js/cards/cmp/peep_bubble.html
View file
Open in desktop
@@ -1,4 +1,4 @@
<div class="cmp-peep-bubble peep-bubble" dir="auto">
<div class="cmp-peep-bubble peep-bubble" dir="auto" role="button">
<span class="cmp-peep-name"></span>
<span class="cmp-peep-address collapsed"></span>
</div>
51 changes: 32 additions & 19 deletions apps/email/js/cards/compose.html
View file
Open in desktop
@@ -1,15 +1,16 @@
<section class="cmp-compose-header" role="region" data-statuscolor="default">
<header data-prop="headerNode">
<a data-event="click:onBack" href="#" class="cmp-back-btn">
<a role="button" data-event="click:onBack" href="#" class="cmp-back-btn"
data-l10n-id="back-button">
<span class="icon icon-back">BacK</span>
</a>
<menu type="toolbar">
<a href="#" data-event="click:onAttachmentAdd"
class="cmp-attachment-btn">
<a role="button" href="#" data-event="click:onAttachmentAdd"
class="cmp-attachment-btn" data-l10n-id="compose-attachment-button">
<span class="icon icon-attachment">AttachmenT</span>
</a>
<a data-prop="sendButton" data-event="click:onSend"
href="#" class="cmp-send-btn">
<a role="button" data-prop="sendButton" data-event="click:onSend"
href="#" class="cmp-send-btn" data-l10n-id="compose-send-button">
<span class="icon icon-send">SenD</span>
</a>
</menu>
Expand All @@ -21,9 +22,10 @@
<div data-prop="addrBar" class="cmp-envelope-bar">
<div class="cmp-addr-bar">
<div data-event="click:onContainerClick"
class="cmp-envelope-line cmp-combo">
class="cmp-envelope-line cmp-combo"
role="group" data-l10n-id="to-group">
<span class="cmp-to-label cmp-addr-label"
data-l10n-id="compose-to">tO:</span>
data-l10n-id="compose-to" aria-hidden="true">tO:</span>
<div class="cmp-to-container cmp-addr-container">
<div class="cmp-bubble-container">
<input data-prop="toNode"
Copy link
Contributor

Choose a reason for hiding this comment

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

According to the whatwg spec, dir does not have a default value, and dir is kept for some other elements, so I would prefer to keep this attribute in unless there is other information that indicates it should be removed.

Expand All @@ -33,15 +35,18 @@
</div>
</div>
<div data-event="click:onContactAdd"
class="cmp-to-add cmp-contact-add"></div>
class="cmp-to-add cmp-contact-add"
role="button"
data-l10n-id="compose-contact-add"></div>
</div>
<!-- XXX: spec calls for showing cc/bcc merged until selected,
but there is also the case where replying itself might need
to expand, so we are deferring that feature -->
<div data-event="click:onContainerClick"
class="cmp-envelope-line cmp-combo">
class="cmp-envelope-line cmp-combo"
role="group" data-l10n-id="cc-group">
<span class="cmp-cc-label cmp-addr-label"
data-l10n-id="compose-cc">cC:</span>
data-l10n-id="compose-cc" aria-hidden="true">cC:</span>
Copy link
Contributor

Choose a reason for hiding this comment

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

Same dir comment as above here.

<div class="cmp-cc-container cmp-addr-container">
<div class="cmp-bubble-container">
<input data-prop="ccNode"
Expand All @@ -51,12 +56,15 @@
</div>
</div>
<div data-event="click:onContactAdd"
class="cmp-cc-add cmp-contact-add"></div>
class="cmp-cc-add cmp-contact-add"
role="button"
data-l10n-id="compose-contact-add"></div>
</div>
<div data-event="click:onContainerClick"
class="cmp-envelope-line cmp-combo">
class="cmp-envelope-line cmp-combo"
Copy link
Contributor

Choose a reason for hiding this comment

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

Just flagging this one too, for my own notes on review.

role="group" data-l10n-id="bcc-group">
<span class="cmp-bcc-label cmp-addr-label"
data-l10n-id="compose-bcc">BcC:</span>
data-l10n-id="compose-bcc" aria-hidden="true">BcC:</span>
<div class="cmp-bcc-container cmp-addr-container">
<div class="cmp-bubble-container">
<input data-prop="bccNode"
Expand All @@ -66,19 +74,22 @@
</div>
</div>
<div data-event="click:onContactAdd"
class="cmp-bcc-add cmp-contact-add"></div>
class="cmp-bcc-add cmp-contact-add"
role="button"
data-l10n-id="compose-contact-add"></div>
</div>
</div>
<div class="cmp-envelope-line cmp-subject">
<span class="cmp-subject-label"
data-l10n-id="compose-subject">SubjecT:</span>
data-l10n-id="compose-subject" aria-hidden="true">SubjecT:</span>
<input data-prop="subjectNode"
dir="auto"
class="cmp-subject-text" type="text" />
class="cmp-subject-text" type="text" data-l10n-id="subject" />
</div>
<div data-prop="errorMessage" class="cmp-error-message collapsed"></div>
<div data-prop="attachmentTotal"
class="cmp-envelope-line cmp-attachment-total collapsed">
class="cmp-envelope-line cmp-attachment-total collapsed"
aria-hidden="true">
<span data-prop="attachmentLabel"
class="cmp-attachment-label cmp-addr-label"
data-l10n-id="compose-attachments[zero]">AttachmentS:</span>
Expand All @@ -87,10 +98,12 @@
<ul data-prop="attachmentsContainer" class="cmp-attachment-container">
</ul>
</div>
<div data-prop="textBodyNode" class="cmp-body-text" contenteditable="true" role="textbox" aria-multiline="true"></div>
<div data-prop="textBodyNode" class="cmp-body-text" contenteditable="true" role="textbox" aria-multiline="true"
data-l10n-id="compose-text"></div>
<div data-prop="htmlBodyContainer"
data-event="click:_focusEditorWithCursorAtEnd"
dir="auto"
class="cmp-body-html">
class="cmp-body-html"
data-l10n-id="message-body-container">
</div>
</div>
42 changes: 28 additions & 14 deletions apps/email/js/cards/compose.js
View file
Open in desktop
Expand Up @@ -674,15 +674,8 @@ return [
* will update the UI as a side-effect; you do not need to do it.
*/
addAttachmentsSubjectToSizeLimits: function(toAttach) {
var totalSize = 0;
// Tally the size of the already-attached attachments.
if (this.composer.attachments) {
// Using a for loop to avoid any closures that may capture
// the large attachments.
for (var i = 0; i < this.composer.attachments.length; i++) {
totalSize += this.composer.attachments[i].blob.size;
}
}
var totalSize = this.calculateTotalAttachmentsSize();

// Keep attaching until we find one that puts us over the limit. Then
// generate an error whose plurality is based on the number of attachments
Expand Down Expand Up @@ -749,6 +742,30 @@ return [
else {
this.attachmentsContainer.classList.add('collapsed');
}
this.updateAttachmentsAriaLabel();
},

/**
* Update the label used for accessibility that describes the attachments
* included.
*/
updateAttachmentsAriaLabel: function() {
// Only include total size in KB if there is more than 1 attachment.
var kilobytes = this.composer.attachments.length > 1 ?
Math.ceil(this.calculateTotalAttachmentsSize() / 1024) : 0;
mozL10n.setAttributes(this.attachmentsContainer,
'compose-attachments-container', { kilobytes: kilobytes });
},

/**
* Calculate the total size of all attachments included.
*/
calculateTotalAttachmentsSize: function() {
var totalSize = 0;
for (var i = 0; i < this.composer.attachments.length; i++) {
totalSize += this.composer.attachments[i].blob.size;
}
return totalSize;
},

/**
Expand All @@ -767,12 +784,8 @@ return [
this.attachmentsContainer.classList.add('collapsed');
}
else {
var totalSize = 0;
for (var i = 0; i < this.composer.attachments.length; i++) {
totalSize += this.composer.attachments[i].blob.size;
}

fileDisplay.fileSize(this.attachmentsSize, totalSize);
fileDisplay.fileSize(this.attachmentsSize,
this.calculateTotalAttachmentsSize());
}

// Only display the total size when the number of attachments is more
Expand All @@ -788,6 +801,7 @@ return [
node.parentNode.removeChild(node);
this.composer.removeAttachment(attachment);

this.updateAttachmentsAriaLabel();
this.updateAttachmentsSize();
},

Expand Down
60 changes: 60 additions & 0 deletions apps/email/locales/email.en-US.properties
View file
Open in desktop
Expand Up @@ -376,14 +376,69 @@ envelope-to=To
envelope-cc=Cc
envelope-bcc=Bcc

# LOCALIZATION NOTE(message-body-container): For compose/read cards, a label for
# a section with the pre-composed part of the message. The following string is
# spoken by screen readers and not shown on the screen.
message-body-container.ariaLabel=Message body

# LOCALIZATION NOTE(subject): For compose card, a label for an email subject
# text input or header. The following string is spoken by screen readers and not
# shown on the screen.
subject.ariaLabel=Subject

# LOCALIZATION NOTE(to-group): For email compose/read cards, a label for a
# section that has controls related to selecting 'to' recipients. The following
# string is spoken by screen readers and not shown on the screen.
to-group.ariaLabel=To
# LOCALIZATION NOTE(cc-group): For email compose/read cards, a label for a
# section that has controls related to selecting 'cc' recipients. The following
# string is spoken by screen readers and not shown on the screen.
cc-group.ariaLabel=cc
# LOCALIZATION NOTE(bcc-group): For email compose/read cards, a label for a
# section that has controls related to selecting 'bcc' recipients. The following
# string is spoken by screen readers and not shown on the screen.
bcc-group.ariaLabel=bcc

compose-header=Compose message
compose-header-short=Compose
compose-send=Send
# LOCALIZATION NOTE(compose-send-button): For compose card, a label for a send
# button rendered as an arrow. The following string is spoken by screen readers
# and not shown on the screen.
compose-send-button.ariaLabel=Send

compose-to=To
compose-cc=cc
compose-bcc=bcc

# LOCALIZATION NOTE(compose-contact-add): For compose card, a label for an add
# contact buttons rendered as a circled plus sign and used to add to, cc and bcc
# recipients. The following string is spoken by screen readers and not shown on
# the screen.
compose-contact-add.ariaLabel=Add contact

# LOCALIZATION NOTE(compose-attachments-container): For compose card, a
# label for a list of attachments included in the email being composed. When
# there is more than 1 attachment, it contains a total size in kilobytes of all
# attachments. The following string is spoken by screen readers and not shown on
# the screen.
compose-attachments-container.ariaLabel={[ plural(kilobytes) ]}
compose-attachments-container.ariaLabel[zero]=Attachments
compose-attachments-container.ariaLabel[one]=Attachments: {{kilobytes}}K
compose-attachments-container.ariaLabel[two]=Attachments: {{kilobytes}}K
compose-attachments-container.ariaLabel[few]=Attachments: {{kilobytes}}K
compose-attachments-container.ariaLabel[many]=Attachments: {{kilobytes}}K
compose-attachments-container.ariaLabel[other]=Attachments: {{kilobytes}}K

# LOCALIZATION NOTE(compose-attachment-remove): For compose card, a label for an
# attachement remove button. The following string is spoken by screen readers
# and not shown on the screen.
compose-attachment-remove.ariaLabel=Remove

# LOCALIZATION NOTE(compose-attachment-button): For compose card, a label for an
# attachment button rendered as a clip. The following string is spoken by screen
# readers and not shown on the screen.
compose-attachment-button.ariaLabel=Attach
compose-attachments={[ plural(n) ]}
compose-attachments[zero] = Attachments
compose-attachments[one] = {{ n }} attachment
Expand All @@ -392,6 +447,11 @@ compose-attachments[few] = {{ n }} attachments
compose-attachments[many] = {{ n }} attachments
compose-attachments[other] = {{ n }} attachments

# LOCALIZATION NOTE(compose-text): For compose card, a label for a section with
# a message text. The following string is spoken by screen readers and not shown
# on the screen.
compose-text.ariaLabel=Edit

# Shown when user taps on attachment icon in compose, but the app still
# needs a bit more time to finishing the add of the previous attachment.
compose-attachment-still-working=One moment, still working on the previous attachment...
Expand Down
21 changes: 8 additions & 13 deletions apps/email/style/compose_cards.css
View file
Open in desktop
Expand Up @@ -22,6 +22,8 @@
.cmp-bubble-container {
width: calc(100% - 1rem);
float: left;
display: inline-flex;
flex-wrap: wrap;
Copy link
Contributor

Choose a reason for hiding this comment

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

The changes in here seem to cause an undesirable outcome for address entry. If the line is taken up by bubbles and there is just a little bit space left to enter the address, it does not break to a new line as the address gets longer.

Picture here:

screen
The "@dnd" breaks to a new line as the text gets longer for that space.

Not sure what to do about it yet though. Tried some quick things in dev tools. Ideally we could keep the older CSS styles as they are known to work, but when talking in IRC these were done so the screen reader could see the bubbles, is that correct? Or was it so it could see the input field? Maybe there is something else we could do here instead to get that to work and keep the line break behavior from before.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was actually for the input field. I can see what i can do there with the old styles (but also see if something can be done with the above styles too)

}

html:-moz-dir(rtl) .cmp-bubble-container {
Expand All @@ -31,18 +33,15 @@ html:-moz-dir(rtl) .cmp-bubble-container {
/* Make sure these styles take precedence over the base msg-peep-bubble styles
by using both class names */
.cmp-peep-bubble.msg-peep-bubble {
float: left;
margin: 0.3rem 0.6rem;
border: 0;
border-radius: 1.4rem;
font-size: 1.6rem;
font-style: italic;
color: #2c2c2c;
background-color: white;
}

html:-moz-dir(rtl) .cmp-peep-bubble.msg-peep-bubble {
float: right;
flex-shrink: 0;
flex-grow: 0;
}

.cmp-peep-bubble.msg-peep-bubble:active {
Expand Down Expand Up @@ -75,21 +74,16 @@ input.cmp-addr-text, input.cmp-subject-text {
}

input.cmp-addr-text, input.cmp-dot-text {
float: left;
width: 0.5rem;
max-width: 100%;
flex-grow: 1;
flex-shrink: 1;
width: 0;
text-overflow: ellipsis;
overflow: hidden;
word-wrap: normal;
white-space: nowrap;
}

html:-moz-dir(rtl) input.cmp-addr-text, input.cmp-dot-text {
float: right;
}

input.cmp-subject-text {
display: table-cell;
font-size: 1.6rem;
text-overflow: ellipsis;
}
Expand Down Expand Up @@ -250,6 +244,7 @@ html:-moz-dir(rtl) .cmp-attachment-filesize {
background: url("images/icons/actionicon_email_removeattachment.png") no-repeat scroll center / 2rem;
width: 2rem;
border: 0.4rem solid transparent;
height: 100%;
}

.cmp-messages-sending p {
Expand Down