Here are some issues I found with Aria labels in using Sogo groupware
recently.
The bug tracking site gave me a 404 error when I tried to search (No webpage
was found for the web address:
https://bugs.sogo.nu/view_all_bug_page.php?filter=6a70f6f863e4a
HTTP ERROR 404), so I don’t know if this is already in there, and it doesn't
look like I'm allowed to post there anyway so… In Sogo version 5.12.9 I'm
seeing a few accessibility bugs:
The “Junk” button has an aria label that says “not Junk” when an email in the
inbox is selected. It should say "Junk" and only switch to "not Junk" if the
email is in the "Junk" folder:
<button class="sg-icon-button md-button" type="button" ng-transclude="" ng-
click="mailbox.markOrUnMarkMessagesAsJunk()" aria-label="Not junk" md-labeled-
by-tooltip="md-tooltip-35">
<md-icon ng-hide="::mailbox.service.selectedFolder.type == 'junk'"
class="material-icons" role="img" aria-label="thumb_down" aria-
hidden="false">thumb_down</md-icon>
<md-icon ng-hide="::mailbox.service.selectedFolder.type != 'junk'"
class="material-icons ng-hide" role="img" aria-hidden="true">thumb_up</md-
icon>
</button>
Another incorrect aria label happens to the email pane’s expand/reduce button.
The aria label says “Reduce” when the tooltip says “expand” and the icon
displayed is “fullscreen”. The aria label should switch to “Expand” when the
button’s function is to expand the email view. On first load, the button is
correct, but if you click it to expand and then click it again to reduce. The
button gets stuck in its “reduce” mode instead of switching to the “Expand”
icon and aria label. The tooltip text changes correctly, but the aria-label
does not.
<button class="md-icon-button md-primary md-hue-1 hide show-gt-xs md-button"
type="button" ng-transclude="" ng-if="::!isPopup" ng-click="toggleCenter()"
aria-hidden="true" aria-label="Reduce" md-labeled-by-tooltip="md-tooltip-69">
<!---->
<md-icon class="material-icons" role="img" aria-
hidden="true">fullscreen</md-icon>
</button>
Also, the "Write a New Email" button is in a terrible location when it comes
to keyboard navigation with a screen reader. You have to tab through ALL
EMAILS in the list (two tabs for each email) before you can get to the new
email button in order to write a new email. It should be much closer to the
top of the tab order.
<button class="md-fab md-accent md-button" type="button" ng-transclude=""
aria-label="Write a new message">
<md-icon class="material-icons" role="img" aria-hidden="true">edit</
md-icon>
</button>
Also, why is it using an "edit" icon if its function is not to edit?
In the Preferences section, the "Save" button does not have an aria label.
Only the icon does. The button should have the label as most of the other
buttons do.
<button class="md-fab md-fab-bottom-right md-fab-overlap-bottom md-button"
type="button" ng-transclude="" ng-click="app.save(preferencesForm)" ng-
disabled="preferencesForm.$invalid || preferencesForm.$pristine">
<md-icon class="material-icons" role="img" aria-label="save">save</
md-icon>
</button>
The email pane's "open in new window button" has a weird aria label that seems
to be a bug: "'Open in New Mail Window'.asSafeJSString".
<button class="sg-icon-button hide show-gt-md md-button" type="button" ng-
transclude="" aria-label="'Open in New Mail Window'.asSafeJSString" ng-
click="viewer.openInPopup()" ng-hide="::isPopup" aria-hidden="false">
<md-icon class="material-icons" role="img" aria-
hidden="true">open_in_new</md-icon>
</button>
It shouldn't have that .asSafeJSString code in the aria label attribute.
In the new message form:
<form method="post" name="messageForm" class="ng-pristine ng-valid ng-valid-
minlength ng-valid-maxlength ng-valid-required ng-valid-md-max-chips"
style="">
<md-toolbar class="_md _md-toolbar-transitions">
<div class="md-toolbar-tools">
... only the "Expand" button has a proper aria-label. The other buttons have
aria labels applied to the md-icon tags instead of the button tags.
