From 77043f8469ba8e7b64af5b0192b0297ded5c615f Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Tue, 3 Jun 2014 19:13:54 +0200 Subject: Apply accessibility improvements to the settings section --- plugins/managesieve/skins/larry/managesieve.css | 8 +- program/include/rcmail.php | 7 +- program/localization/en_US/labels.inc | 4 + program/steps/settings/edit_folder.inc | 3 +- program/steps/settings/func.inc | 2 +- program/steps/settings/responses.inc | 2 +- skins/larry/includes/footer.html | 1 + skins/larry/includes/settingstabs.html | 8 +- skins/larry/settings.css | 101 ++++++++++++------------ skins/larry/templates/addressbook.html | 4 +- skins/larry/templates/folders.html | 25 +++--- skins/larry/templates/identities.html | 12 +-- skins/larry/templates/importcontacts.html | 2 +- skins/larry/templates/responses.html | 12 +-- skins/larry/templates/settings.html | 11 ++- skins/larry/ui.js | 4 +- 16 files changed, 117 insertions(+), 89 deletions(-) diff --git a/plugins/managesieve/skins/larry/managesieve.css b/plugins/managesieve/skins/larry/managesieve.css index 1f954caf2..2172c60b2 100644 --- a/plugins/managesieve/skins/larry/managesieve.css +++ b/plugins/managesieve/skins/larry/managesieve.css @@ -417,11 +417,13 @@ body.iframe.mail #filter-form /* vacation form */ -#settings-sections span.vacation a { - background: url(images/vacation_icons.png) no-repeat 7px 1px; +#settings-sections .vacation a { + background-image: url(images/vacation_icons.png); + background-repeat: no-repeat; + background-position: 7px 1px; } -#settings-sections span.vacation.selected a { +#settings-sections .vacation.selected a { background-position: 7px -23px; } diff --git a/program/include/rcmail.php b/program/include/rcmail.php index 8e66e85e7..5a5d4cb83 100644 --- a/program/include/rcmail.php +++ b/program/include/rcmail.php @@ -1088,14 +1088,17 @@ class rcmail extends rcube } else { foreach ($table_data as $row_data) { - $class = !empty($row_data['class']) ? $row_data['class'] : ''; + $class = !empty($row_data['class']) ? $row_data['class'] : null; + if (!empty($attrib['rowclass'])) + $class = trim($class . ' ' . $attrib['rowclass']); $rowid = 'rcmrow' . rcube_utils::html_identifier($row_data[$id_col]); $table->add_row(array('id' => $rowid, 'class' => $class)); // format each col foreach ($a_show_cols as $col) { - $table->add($col, $this->Q(is_array($row_data[$col]) ? $row_data[$col][0] : $row_data[$col])); + $val = is_array($row_data[$col]) ? $row_data[$col][0] : $row_data[$col]; + $table->add($col, empty($attrib['ishtml']) ? $this->Q($val) : $val); } } } diff --git a/program/localization/en_US/labels.inc b/program/localization/en_US/labels.inc index 2b44ac188..9d3863497 100644 --- a/program/localization/en_US/labels.inc +++ b/program/localization/en_US/labels.inc @@ -474,6 +474,7 @@ $labels['miscfolding'] = 'RFC 2047/2231 (MS Outlook)'; $labels['2047folding'] = 'Full RFC 2047 (other)'; $labels['force7bit'] = 'Use MIME encoding for 8-bit characters'; $labels['advancedoptions'] = 'Advanced options'; +$labels['toggleadvancedoptions'] = 'Toggle advanced options'; $labels['focusonnewmessage'] = 'Focus browser window on new message'; $labels['checkallfolders'] = 'Check all folders for new messages'; $labels['displaynext'] = 'After message delete/move display the next message'; @@ -605,6 +606,9 @@ $labels['arialabelattachmentpreview'] = 'Attachment preview'; $labels['ariasummarycomposecontacts'] = 'List of contacts and groups to select as recipients'; $labels['arialabelcontactexportoptions'] = 'Contact export options'; $labels['arialabelabookgroupoptions'] = 'Addressbook/group options'; +$labels['arialabelpreferencesform'] = 'Preferences form'; +$labels['arialabelidentityeditfrom'] = 'Identity edit form'; +$labels['arialabelresonseeditfrom'] = 'Response edit form'; $labels['helplistnavigation'] = 'List keyboard navigation'; $labels['helplistkeyboardnavigation'] = "Arrows up/down: Move row focus/selection. diff --git a/program/steps/settings/edit_folder.inc b/program/steps/settings/edit_folder.inc index 6b7bd08d2..c61ac6da9 100644 --- a/program/steps/settings/edit_folder.inc +++ b/program/steps/settings/edit_folder.inc @@ -132,6 +132,7 @@ function rcmail_folder_form($attrib) } $select = $RCMAIL->folder_selector(array( + 'id' => '_parent', 'name' => '_parent', 'noselection' => '---', 'realnames' => false, @@ -155,7 +156,7 @@ function rcmail_folder_form($attrib) // Settings: threading if ($threading_supported && ($mbox_imap == 'INBOX' || (!$options['noselect'] && !$options['is_root']))) { - $select = new html_select(array('name' => '_viewmode', 'id' => '_listmode')); + $select = new html_select(array('name' => '_viewmode', 'id' => '_viewmode')); $select->add($RCMAIL->gettext('list'), 0); $select->add($RCMAIL->gettext('threads'), 1); diff --git a/program/steps/settings/func.inc b/program/steps/settings/func.inc index bccd9caa8..5da01b757 100644 --- a/program/steps/settings/func.inc +++ b/program/steps/settings/func.inc @@ -343,7 +343,7 @@ function rcmail_user_prefs($current = null) if (is_array($meta) && $meta['name']) { $skinname = $meta['name']; $author_link = $meta['url'] ? html::a(array('href' => $meta['url'], 'target' => '_blank'), rcube::Q($meta['author'])) : rcube::Q($meta['author']); - $license_link = $meta['license-url'] ? html::a(array('href' => $meta['license-url'], 'target' => '_blank'), rcube::Q($meta['license'])) : rcube::Q($meta['license']); + $license_link = $meta['license-url'] ? html::a(array('href' => $meta['license-url'], 'target' => '_blank', 'tabindex' => '-1'), rcube::Q($meta['license'])) : rcube::Q($meta['license']); } $skinnames[] = mb_strtolower($skinname); diff --git a/program/steps/settings/responses.inc b/program/steps/settings/responses.inc index 06093b3b8..ddd1924fe 100644 --- a/program/steps/settings/responses.inc +++ b/program/steps/settings/responses.inc @@ -95,7 +95,7 @@ function rcmail_responses_list($attrib) { global $RCMAIL, $OUTPUT; - $attrib += array('id' => 'rcmresponseslist', 'tagname' => 'table', 'cols' => 1); + $attrib += array('id' => 'rcmresponseslist', 'tagname' => 'table'); $plugin = $RCMAIL->plugins->exec_hook('responses_list', array( 'list' => $RCMAIL->get_compose_responses(true), diff --git a/skins/larry/includes/footer.html b/skins/larry/includes/footer.html index f421ec5b0..6cd3e62d1 100644 --- a/skins/larry/includes/footer.html +++ b/skins/larry/includes/footer.html @@ -6,6 +6,7 @@ var UI = new rcube_mail_ui(); $(document).ready(function(){ UI.set('errortitle', ''); + UI.set('toggleoptions', ''); UI.init(); }); diff --git a/skins/larry/includes/settingstabs.html b/skins/larry/includes/settingstabs.html index e62695848..d43e8f075 100644 --- a/skins/larry/includes/settingstabs.html +++ b/skins/larry/includes/settingstabs.html @@ -1,7 +1,9 @@ -
-

+ diff --git a/skins/larry/settings.css b/skins/larry/settings.css index 675ef9973..0517f3c3a 100644 --- a/skins/larry/settings.css +++ b/skins/larry/settings.css @@ -70,7 +70,7 @@ width: 20px; height: 18px; background: url('images/listicons.png') 0 -1157px no-repeat; - text-indent: 1000px; + text-indent: -5000px; overflow: hidden; } @@ -78,9 +78,10 @@ background-position: -24px -1137px; } -#sections-table tbody td.section, -#settings-sections span.listitem a, -#settings-sections span.tablink a { +#sections-table td.section, +#sections-table .listitem span, +#settings-sections .listitem a, +#settings-sections .tablink a { padding-left: 36px; background-image: url(images/listicons.png); background-position: -100px 0; @@ -88,120 +89,120 @@ } /* note: support span.tablink because this is used by plugins */ -#settings-sections span.listitem a, -#settings-sections span.tablink a { +#settings-sections .listitem a, +#settings-sections .tablink a { background-position: 6px -862px; } -#settings-sections span.selected a, -#settings-sections span.tablink.selected a { +#settings-sections .selected a, +#settings-sections .tablink.selected a { background-position: 6px -887px; } -#settings-sections span.preferences a { +#settings-sections .preferences a { background-position: 6px -431px; } -#settings-sections span.preferences.selected a { +#settings-sections .preferences.selected a { background-position: 6px -455px; } -#settings-sections span.folders a, -#sections-table #rcmrowfolders td.section { +#settings-sections .folders a, +#sections-table #rcmrowfolders .section { background-position: 6px 2px; } -#settings-sections span.folders.selected a, -#sections-table #rcmrowfolders.selected td.section { +#settings-sections .folders.selected a, +#sections-table #rcmrowfolders.selected .section { background-position: 6px -22px; } -#settings-sections span.identities a { +#settings-sections .identities a { background-position: 6px -478px; } -#settings-sections span.identities.selected a { +#settings-sections .identities.selected a { background-position: 6px -502px; } -#settings-sections span.filter a { +#settings-sections .filter a { background-position: 6px -1746px; } -#settings-sections span.filter.selected a { +#settings-sections .filter.selected a { background-position: 6px -1770px; } -#settings-sections span.password a { +#settings-sections .password a { background-position: 6px -1795px; } -#settings-sections span.password.selected a { +#settings-sections .password.selected a { background-position: 6px -1819px; } -#settings-sections span.responses a { +#settings-sections .responses a { background-position: 6px -1972px; } -#settings-sections span.responses.selected a { +#settings-sections .responses.selected a { background-position: 6px -1996px; } -#sections-table #rcmrowgeneral td.section { - background-position: 6px -573px; +#sections-table #rcmrowgeneral .section { + background-position: 4px -573px; } -#sections-table #rcmrowgeneral.selected td.section { - background-position: 6px -598px; +#sections-table #rcmrowgeneral.selected .section { + background-position: 4px -598px; } -#sections-table #rcmrowmailbox td.section { - background-position: 6px -621px; +#sections-table #rcmrowmailbox .section { + background-position: 4px -621px; } -#sections-table #rcmrowmailbox.selected td.section { - background-position: 6px -646px; +#sections-table #rcmrowmailbox.selected .section { + background-position: 4px -646px; } -#sections-table #rcmrowcompose td.section { - background-position: 6px -670px; +#sections-table #rcmrowcompose .section { + background-position: 4px -670px; } -#sections-table #rcmrowcompose.selected td.section { - background-position: 6px -695px; +#sections-table #rcmrowcompose.selected .section { + background-position: 4px -695px; } -#sections-table #rcmrowmailview td.section { - background-position: 6px -718px; +#sections-table #rcmrowmailview .section { + background-position: 4px -718px; } -#sections-table #rcmrowmailview.selected td.section { - background-position: 6px -742px; +#sections-table #rcmrowmailview.selected .section { + background-position: 4px -742px; } -#sections-table #rcmrowaddressbook td.section { - background-position: 6px -766px; +#sections-table #rcmrowaddressbook .section { + background-position: 4px -766px; } -#sections-table #rcmrowaddressbook.selected td.section { - background-position: 6px -791px; +#sections-table #rcmrowaddressbook.selected .section { + background-position: 4px -791px; } -#sections-table #rcmrowserver td.section { - background-position: 6px -814px; +#sections-table #rcmrowserver .section { + background-position: 4px -814px; } -#sections-table #rcmrowserver.selected td.section { - background-position: 6px -838px; +#sections-table #rcmrowserver.selected .section { + background-position: 4px -838px; } -#sections-table #rcmrowcalendar td.section { - background-position: 6px -526px; +#sections-table #rcmrowcalendar .section { + background-position: 4px -526px; } -#sections-table #rcmrowcalendar.selected td.section { - background-position: 6px -550px; +#sections-table #rcmrowcalendar.selected .section { + background-position: 4px -550px; } #folderslist, diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html index c9aa5acad..e1101e648 100644 --- a/skins/larry/templates/addressbook.html +++ b/skins/larry/templates/addressbook.html @@ -84,10 +84,10 @@
-
+
-
+
diff --git a/skins/larry/templates/folders.html b/skins/larry/templates/folders.html index 56396bf1d..ffb0a7ee1 100644 --- a/skins/larry/templates/folders.html +++ b/skins/larry/templates/folders.html @@ -10,9 +10,11 @@
+

:

+ -
+

@@ -20,11 +22,22 @@
+ + +
@@ -37,14 +50,6 @@
-
-
    -
    • -
    • - -
-
- diff --git a/skins/larry/templates/identities.html b/skins/larry/templates/identities.html index e3d2cc842..91f7f8f71 100644 --- a/skins/larry/templates/identities.html +++ b/skins/larry/templates/identities.html @@ -10,23 +10,25 @@
+

:

+ -
+
-

+

- +
- +
- +
diff --git a/skins/larry/templates/importcontacts.html b/skins/larry/templates/importcontacts.html index a670d0354..2bc1d4a26 100644 --- a/skins/larry/templates/importcontacts.html +++ b/skins/larry/templates/importcontacts.html @@ -15,7 +15,7 @@
-

+

diff --git a/skins/larry/templates/responses.html b/skins/larry/templates/responses.html index 8e6884539..503ed2177 100644 --- a/skins/larry/templates/responses.html +++ b/skins/larry/templates/responses.html @@ -10,23 +10,25 @@
+

:

+ -
+
-

+

- +
- +
- +
diff --git a/skins/larry/templates/settings.html b/skins/larry/templates/settings.html index 08df7686e..406b9c9b3 100644 --- a/skins/larry/templates/settings.html +++ b/skins/larry/templates/settings.html @@ -10,19 +10,22 @@
+

:

+
-
+ -
+
- +
diff --git a/skins/larry/ui.js b/skins/larry/ui.js index ff0b2e41a..6385e73b1 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -273,7 +273,9 @@ function rcube_mail_ui() orientation:'v', relative:true, start:266, min:180, size:12 }).init(); } else if (rcmail.env.action == 'edit-prefs') { - $('▼') + $('') + .text(env.toggleoptions) + .attr('title', env.toggleoptions) .addClass('advanced-toggle') .appendTo('#preferences-details fieldset.advanced legend'); -- cgit v1.2.3