Merge lp:~adiroiban/launchpad/bug-359180 into lp:launchpad

[Adi Roiban]

[Adi Roiban (adiroiban)]

= Bug 359180 =
Would be useful if the First - Previous - Next - Last link in the translation interface had a keyboard shortcut for fast accessing them. Don't need to be visible, but at least documented somewhere.

Maybe even the Save & Continue button.

== Pre-implementation notes ==

Talking with Danilo we agreed not to use tabindex as it may disturb screen readers.

HTML Accesskeys were used for links, while YUI3 key-event here used for navigation between input fields and copying the original text.

== Implementation details ==

Shift+Alt+a - First (using accesskey)
Shift+Alt+n - Next (using accesskey)
Shift+Alt+p - Previous (using accesskey)
Shift+Alt+l - Last (using accesskey)
Shift+Alt+S - Save and continue (using accesskey)
Shift+Alt+Down - Next field (using YUI3 key-event)
Shift+Alt+Up - Previous field (using YUI3 key-event)
Shift+Alt+C - Copy original text (both singular and plural) (using YUI3 key-event)

First field is autofocused.

I went for Shift+Alt as they are used for Acceskey, and I assume browsers will try to reserve them.

Once keybindings are agreed they should be documented on help.launchpad.net

Accesskeys were tested on Epiphany and Chromium.
Wikipedia says that Accesskeys in Firefox are enabled with Shift+Alt but I was not able to activate them on my Firefox.
http://en.wikipedia.org/wiki/Access_key

-----

The legacy JS code from canonical/launchpad/icing/build/lp/lp.js and from pofile-tranlate.pt was moved to javascript/translations/pofile.js.

Those functions from lp.js was rewritten using YUI3. Maybe we can no delete them from lp.js.

== Tests ==
I was not able to produce a reasonable windmill test since it is not trivial to find the current focused node or to see if a node is focused.
This requires adding onFocus and onBlur trigger for all DOM nodes.

== Demo and Q/A ==
Log in as admin or as a person with rights on adding translations to a pofile.

Go to a pofile translate page:
https://translations.launchpad.dev/ubuntu/hoary/+source/evolution/+pots/evolution-2.2/es/+translate?start=0

The first field should have focus and you can start translating right away.

Adding a new translation should automatically select the radio button in front of it.

Pressing Alt + Shift + C will copy the original text. Current text will be discarded.

Pressing Alt + Shift + Down will set the focus to the next input field. Last field is Save and Continue button.

Pressing Alt + Shift + Up will set the focus to the previous input field. Nothing will happen when pressing on the first field.

Pressing Alt + Shift + A from anywhere in the page will point the browser to the fist page in the batch navigation.

Pressing Alt + Shift + L from anywhere in the page will point the browser to the last page in the batch navigation.

Pressing Alt + Shift + N from anywhere in the page will point the browser to the next page in the batch navigation.

Pressing Alt + Shift + P from anywhere in the page will point the browser to the previous page in the batch navigation.

= Launchpad lint =

Checking for conflicts. and issues in doctests and templates.
Running jslint, xmllint, pyflakes, and pylint.
Using normal rules.

Linting changed files:
  lib/canon...

[Aaron Bentley (abentley)]

This looks mostly good. Please rename tabindex_chain to something else (we discussed "translations_order") since it doesn't affect tabbing.

The current interaction of autofocus_html_id and Y.lp.pofile.initializeKeyBindings means that javascript errors will happen if no autofocus_html_id is present. Please fix this (e.g. by addding empty variables, as you suggested).

review: Needs Fixing (code)

[Adi Roiban (adiroiban)]

Thanks for the review!

Here is the latest diff.

=== modified file 'lib/canonical/launchpad/javascript/translations/pofile.js'
--- lib/canonical/launchpad/javascript/translations/pofile.js 2009-12-21 11:36:04 +0000
+++ lib/canonical/launchpad/javascript/translations/pofile.js 2009-12-22 07:44:31 +0000
@@ -86,7 +86,7 @@
 };

-var setFocus = function(e, field) {
+self.setFocus = function(field) {
     //Y.log(e.type + ":" + e.keyCode + ': ' + field);
     // if there is nofield, do nothing
     if (Y.one('#' + field)) {
@@ -96,7 +96,7 @@

 var setNextFocus = function(e, field) {
- setFocus(e,field);
+ self.setFocus(field);
     // stopPropagation() and preventDefault()
     e.halt();
 };
@@ -106,8 +106,8 @@

     // Original singular test is focused first to make sure
     // it is visible when scrolling up
- setFocus(e, original);
- setFocus(e, field);
+ self.setFocus(original);
+ self.setFocus(field);
     // stopPropagation() and preventDefault()
     e.halt();
 };
@@ -116,7 +116,6 @@
 var copyOriginalTextOne = function(from_id, to_id, select_id) {
     var from = Y.one('#' + from_id);
     var to = Y.one('#' + to_id);
-
     // The replacement regex strips all tags from the html.
     to.set('value', unescapeHTML(
         from.get('innerHTML').replace(/<\/?[^>]+>/gi, "")));
@@ -182,7 +181,13 @@
  */
 self.initializeKeyBindings = function(e) {

- var fields = tabindex_chain.split(' ');
+ if (translations_order.length < 1) {
+ // If no translations fiels are displayed on the page
+ // don't initialize the translations order
+ return;
+ }
+
+ var fields = translations_order.split(' ');
     // The last field is Save & Continue button
     fields.push('save_and_continue_button');

@@ -192,7 +197,7 @@

         var html_parts = fields[key].split('_');
         var original_stem = html_parts[0] + '_' + html_parts[1];
- var translation_stem = original_stem + '_' + html_parts[2];
+ var translation_stem = fields[key].replace(/_translation_(\d)+_new/,"");
         var select_widget = (
             translation_stem + '_' + html_parts[3] + '_' +
             html_parts[4] + '_new_select');

=== modified file 'lib/lp/translations/browser/pofile.py'
--- lib/lp/translations/browser/pofile.py 2009-12-20 11:12:16 +0000
+++ lib/lp/translations/browser/pofile.py 2009-12-22 06:16:13 +0000
@@ -935,17 +935,17 @@
             first_field = first_message.translation_dictionaries[0]
             return first_field['html_id_translation']
         except IndexError:
- return False
+ return ""

     @property
- def tabindex_chain(self):
+ def translations_order(self):
         try:
- tabindex = []
+ order = []
             for message in self.translationmessage_views:
                 for dictionary in message.translation_dictionaries:
- tabindex.append(
+ order.append(
                         dictionary['html_id_translation'] + '_new')
- return ' '.join(tabindex)
+ return ' '.join(order)

         except IndexError:
             return ""

=== modified file 'lib/lp/translations/b...

[Aaron Bentley (abentley)]

review: Approve

=== modified file 'lib/canonical/launchpad/javascript/translations/pofile.js'
--- lib/canonical/launchpad/javascript/translations/pofile.js	2009-11-23 19:29:02 +0000
+++ lib/canonical/launchpad/javascript/translations/pofile.js	2009-12-25 11:06:20 +0000
@@ -1,7 +1,7 @@
 /** Copyright (c) 2009, Canonical Ltd. All rights reserved.
  *
  * @module lp.pofile
- * @requires event, node
+ * @requires event, event-key, node, cookie, anim
  */
 
 YUI.add('lp.pofile', function(Y) {
@@ -41,4 +41,196 @@
     }
 };
 
-}, "0.1", {"requires": ["event", "node"]});
+var hide_notification = function(node) {
+    var hide_anim = new Y.Anim({
+        node: node,
+        to: { height: 0,
+            marginTop: 0, marginBottom: 0,
+            paddingTop: 0, paddingBottom: 0 }
+    });
+    node.setStyle('border', 'none');
+    hide_anim.set('duration', 0.4);
+    hide_anim.on('end', function(e) {
+        node.setStyle('display', 'none');
+    });
+    hide_anim.run();
+};
+
+
+self.updateNotificationBox = function(e) {
+    var notice = Y.one('.important-notice-container');
+    if (notice === null) {
+        return;
+    }
+    var balloon = notice.one('.important-notice-balloon');
+    var dismiss_notice_cookie = ('translation-docs-for-' +
+                               documentation_cookie);
+
+    // Check the cookie to see if the user has already dismissed
+    // the notification box for this session.
+    var already_seen = Y.Cookie.get(dismiss_notice_cookie, Boolean);
+    if (already_seen) {
+     notice.setStyle('display', 'none');
+    }
+
+    var cancel_button = notice.one(
+      '.important-notice-cancel-button');
+    // Cancel button starts out hidden.  If user has JavaScript,
+    // then we want to show it.
+    cancel_button.setStyle('visibility', 'visible');
+    cancel_button.on('click', function(e) {
+      e.halt();
+      hide_notification(balloon);
+      Y.Cookie.set(dismiss_notice_cookie, true);
+    });
+};
+
+
+self.setFocus = function(field) {
+    //Y.log(e.type + ":" + e.keyCode + ': ' + field);
+    // if there is nofield, do nothing
+    if (Y.one('#' + field)) {
+        Y.one('#' + field).focus();
+    }
+};
+
+
+var setNextFocus = function(e, field) {
+    self.setFocus(field);
+    // stopPropagation() and preventDefault()
+    e.halt();
+};
+
+
+var setPreviousFocus = function(e, field, original) {
+
+    // Original singular test is focused first to make sure
+    // it is visible when scrolling up
+    self.setFocus(original);
+    self.setFocus(field);
+    // stopPropagation() and preventDefault()
+    e.halt();
+};
+
+
+var copyOriginalTextOne = function(from_id, to_id, select_id) {
+    var from = Y.one('#' + from_id);
+    var to = Y.one('#' + to_id);
+    // The replacement regex strips all tags from the html.
+    to.set('value', unescapeHTML(
+        from.get('innerHTML').replace(/<\/?[^>]+>/gi, "")));
+    selectWidget(select_id);
+};
+
+
+var copyOriginalTextPlural = function (from_id,
+                                              to_id_pattern, nplurals) {
+    // skip when x is 0, as that is the singular
+    for (var x = 1; x < nplurals; x++) {
+        var to_id = to_id_pattern + x + "_new";
+        var to_select = to_id_pattern + x + "_new_select";
+        copyOriginalTextOne(from_id, to_id, to_select);
+    }
+};
+
+
+var copyOriginalTextAll = function(e, original_stem, translation_stem) {
+
+    var original_singular = original_stem + '_singular';
+    var original_plural = original_stem + '_plural';
+    var singular_select = translation_stem + '_translation_0_new_select';
+    var translation_singular = translation_stem + '_translation_0_new';
+    var translation_plural = translation_stem + '_translation_';
+    //Y.log(e.type + ":" + e.keyCode + ': ' + singular_select);
+    // Copy singular text
+    copyOriginalTextOne(
+        original_singular, translation_singular, singular_select);
+
+    // Copy plural text if needed
+    if (Y.one('#' + translation_plural + '1')) {
+        copyOriginalTextPlural(
+            original_plural, translation_plural, plural_forms);
+    }
+    // stopPropagation() and preventDefault()
+    e.halt();
+};
+
+
+var selectWidget = function(widget) {
+    if (Y.one('#' + widget)) {
+        Y.one('#' + widget).set('checked', true);
+    }
+};
+
+
+var selectTranslation = function(e, widget) {
+    //Y.log(e.type + ":" + e.keyCode + ': ' + widget);
+    // Don't select when tabbing, navigating Up or Down and simply pressing
+    // enter to submit the form.
+    if (e.keyCode == 9 || e.keyCode == 13 ||
+        e.keyCode == 40 || e.keyCode == 38) {
+        return;
+    }
+    selectWidget(widget);
+};
+
+
+/**
+ * Initialize event-key bindings such as moving to the next or previous
+ * field, or copying original text
+ */
+self.initializeKeyBindings = function(e) {
+
+    if (translations_order.length < 1) {
+        // If no translations fiels are displayed on the page
+        // don't initialize the translations order
+        return;
+    }
+
+    var fields = translations_order.split(' ');
+    // The last field is Save & Continue button
+    fields.push('save_and_continue_button');
+
+    for (var key = 0; key < fields.length; key++) {
+        var next = key + 1;
+        var previous = key - 1;
+
+        var html_parts = fields[key].split('_');
+        var original_stem = html_parts[0] + '_' + html_parts[1];
+        var translation_stem = fields[key].replace(/_translation_(\d)+_new/,"");
+        var select_widget = (
+            translation_stem + '_' + html_parts[3] + '_' +
+            html_parts[4] + '_new_select');
+
+        Y.on(
+            'change', selectTranslation,
+            '#' + fields[key], Y, select_widget);
+        Y.on(
+            'keypress', selectTranslation,
+            '#' + fields[key], Y, select_widget);
+
+        // Set next field and copy text for all but last field
+        // (last is Save & Continue button)
+        if (key < fields.length - 1) {
+            Y.on(
+                'key', setNextFocus, '#' + fields[key],
+                'down:40+shift+alt', Y, fields[next]);
+            Y.on(
+                'key', copyOriginalTextAll, '#' + fields[key],
+                'down:67+shift+alt', Y, original_stem, translation_stem);
+        }
+
+        // Set previous field for all but first field
+        if (key > 0) {
+            var parts = fields[previous].split('_');
+            var singular_copy_text = (
+                parts[0] + '_' + parts[1] + '_singular_copy_text');
+            Y.on(
+                'key', setPreviousFocus, '#' + fields[key],
+                'down:38+shift+alt', Y, fields[previous],
+                singular_copy_text);
+        }
+    }
+};
+
+}, "0.1", {"requires": ["event", "event-key", "node", 'cookie', 'anim']});

=== modified file 'lib/canonical/launchpad/templates/batchnavigator-navigation-links.pt'
--- lib/canonical/launchpad/templates/batchnavigator-navigation-links.pt	2009-07-17 17:59:07 +0000
+++ lib/canonical/launchpad/templates/batchnavigator-navigation-links.pt	2009-12-25 11:06:20 +0000
@@ -29,6 +29,7 @@
           tal:attributes="href first_page_url"
           class="first"
           rel="first"
+          accesskey="A"
         >First</a>
         <span tal:condition="not:first_page_url" class="first inactive"
         >First</span>
@@ -38,6 +39,7 @@
           tal:attributes="href prev_page_url"
           class="previous"
           rel="previous"
+          accesskey="P"
         >Previous</a>
         <span tal:condition="not:prev_page_url" class="previous inactive"
         >Previous</span>
@@ -47,6 +49,7 @@
           tal:attributes="href next_page_url"
           class="next"
           rel="next"
+          accesskey="N"
         ><strong>Next</strong></a>
         <span tal:condition="not:next_page_url" class="next inactive"
         ><strong>Next</strong></span>
@@ -57,6 +60,7 @@
             tal:attributes="href last_page_url"
             class="last"
             rel="last"
+            accesskey="L"
           >Last</a>
           <span tal:condition="not:last_page_url" class="last inactive"
           >Last</span>

=== modified file 'lib/lp/app/templates/base-layout-macros.pt'
--- lib/lp/app/templates/base-layout-macros.pt	2009-12-16 19:59:06 +0000
+++ lib/lp/app/templates/base-layout-macros.pt	2009-12-25 11:06:20 +0000
@@ -80,6 +80,8 @@
     <script type="text/javascript"
             tal:attributes="src string:${yui}/event/event.js"></script>
     <script type="text/javascript"
+            tal:attributes="src string:${yui}/event/event-key.js"></script>            
+    <script type="text/javascript"
             tal:attributes="src string:${yui}/event-custom/event-custom.js"></script>
     <script type="text/javascript"
             tal:attributes="src string:${yui}/event-simulate/event-simulate.js"></script>

=== modified file 'lib/lp/translations/browser/pofile.py'
--- lib/lp/translations/browser/pofile.py	2009-09-17 19:05:29 +0000
+++ lib/lp/translations/browser/pofile.py	2009-12-25 11:06:20 +0000
@@ -503,8 +503,6 @@
 
     DEFAULT_BATCH_SIZE = 50
 
-    page_title = "Contributions"
-
     @property
     def _person_name(self):
         """Person's display name.  Graceful about unknown persons."""
@@ -930,6 +928,28 @@
     def completeness(self):
         return '%.0f%%' % self.context.translatedPercentage()
 
+    @property
+    def autofocus_html_id(self):
+        try:
+            first_message = self.translationmessage_views[0]
+            first_field = first_message.translation_dictionaries[0]
+            return first_field['html_id_translation']
+        except IndexError:
+            return ""
+
+    @property
+    def translations_order(self):
+        try:
+            order = []
+            for message in self.translationmessage_views:
+                for dictionary in message.translation_dictionaries:
+                    order.append(
+                        dictionary['html_id_translation'] + '_new')
+            return ' '.join(order)
+
+        except IndexError:
+            return ""
+
 
 class POExportView(BaseExportView):
 

=== modified file 'lib/lp/translations/browser/translationmessage.py'
--- lib/lp/translations/browser/translationmessage.py	2009-09-17 08:41:05 +0000
+++ lib/lp/translations/browser/translationmessage.py	2009-12-25 11:06:20 +0000
@@ -829,6 +829,28 @@
         self._redirectToNextPage()
         return True
 
+    @property
+    def autofocus_html_id(self):
+        try:
+            first_message = self.translationmessage_view
+            first_field = first_message.translation_dictionaries[0]
+            return first_field['html_id_translation']
+        except IndexError:
+            return ""
+
+    @property
+    def translations_order(self):
+        try:
+            order = []
+            message = self.translationmessage_view
+            for dictionary in message.translation_dictionaries:
+                order.append(dictionary['html_id_translation'] + '_new')
+            return ' '.join(order)
+
+        except IndexError:
+            return ""
+
+
 class CurrentTranslationMessageView(LaunchpadView):
     """Holds all data needed to show an ITranslationMessage.
 

=== modified file 'lib/lp/translations/stories/standalone/xx-pofile-translate-newlines-check.txt'
--- lib/lp/translations/stories/standalone/xx-pofile-translate-newlines-check.txt	2009-07-01 20:45:39 +0000
+++ lib/lp/translations/stories/standalone/xx-pofile-translate-newlines-check.txt	2009-12-25 11:06:20 +0000
@@ -43,7 +43,7 @@
     >>> print browser.url
     http://translations.launchpad.dev/ubuntu/hoary/+source/evolution/+pots/evolution-2.2/es/+translate?start=19&batch=1
     >>> print find_tag_by_id(browser.contents, 'msgset_149_es_translation_0_new')
-    <textarea ... name="msgset_149_es_translation_0_new" ...>
+    <textarea ... name="msgset_149_es_translation_0_new"...>
 
     foo
 
@@ -63,7 +63,7 @@
     >>> print find_tag_by_id(
     ...     browser.contents,
     ...     'msgset_149_es_translation_0_new') #doctest: -NORMALIZE_WHITESPACE
-    <textarea ... name="msgset_149_es_translation_0_new" ...>
+    <textarea ... name="msgset_149_es_translation_0_new"...>
     foo</textarea>
 
 Now, Check that even though the user forgot the trailing new line char,

=== modified file 'lib/lp/translations/stories/standalone/xx-pofile-translate.txt'
--- lib/lp/translations/stories/standalone/xx-pofile-translate.txt	2009-12-07 18:42:21 +0000
+++ lib/lp/translations/stories/standalone/xx-pofile-translate.txt	2009-12-25 11:06:20 +0000
@@ -158,7 +158,7 @@
     ...     print id
     msgset_130
     ...
-    msgset_130_singular
+    msgset_130_singular...
 
 HTML element identifiers for suggestions and translations on this form are
 constructed as an underscore-separated sequence of:
@@ -181,6 +181,7 @@
     msgset_130_es_suggestion_562_0_origin
     msgset_130_es_suggestion_562_0_radiobutton
     msgset_130_singular
+    msgset_130_singular_copy_text
 
 Radio buttons are grouped by their name attribute. The translate page shows
 each translatable message with one radiobutton to select the existing

=== modified file 'lib/lp/translations/templates/currenttranslationmessage-translate-one.pt'
--- lib/lp/translations/templates/currenttranslationmessage-translate-one.pt	2009-12-07 18:42:21 +0000
+++ lib/lp/translations/templates/currenttranslationmessage-translate-one.pt	2009-12-25 11:06:20 +0000
@@ -42,6 +42,7 @@
       <a href=""
          tal:condition="not:context/potmsgset/is_translation_credit"
          tal:attributes="
+           id string:${view/html_id}_singular_copy_text;
            onClick string:
              javascript:copyInnerHTMLById(
                '${view/html_id}_singular',
@@ -504,8 +505,6 @@
               lang context/pofile/language/dashedcode;
               dir context/pofile/language/abbreviated_text_dir;
               value translation_dictionary/submitted_translation;
-              onKeyPress string:javascript:selectWidget('${translation_dictionary/html_id_translation}_new_select', event);
-              onChange string:javascript:selectWidget('${translation_dictionary/html_id_translation}_new_select', event);
             "
             class="translate expandable"
           />
@@ -528,8 +527,6 @@
                   name string:${translation_dictionary/html_id_translation}_new;
                   lang context/pofile/language/dashedcode;
                   dir context/pofile/language/abbreviated_text_dir;
-                  onKeyPress string:javascript:selectWidget('${translation_dictionary/html_id_translation}_new_select', event);
-                  onChange string:javascript:selectWidget('${translation_dictionary/html_id_translation}_new_select', event);
                 ">
 <tal:content replace="translation_dictionary/submitted_translation" /></textarea>
             </tal:with-content>
@@ -548,8 +545,6 @@
                   name string:${translation_dictionary/html_id_translation}_new;
                   lang context/pofile/language/dashedcode;
                   dir context/pofile/language/abbreviated_text_dir;
-                  onKeyPress string:javascript:selectWidget('${translation_dictionary/html_id_translation}_new_select', event);
-                  onChange string:javascript:selectWidget('${translation_dictionary/html_id_translation}_new_select', event);
                 "></textarea>
             </tal:without-content>
           </tal:multi-line>

=== modified file 'lib/lp/translations/templates/pofile-translate.pt'
--- lib/lp/translations/templates/pofile-translate.pt	2009-12-10 13:08:33 +0000
+++ lib/lp/translations/templates/pofile-translate.pt	2009-12-25 11:06:20 +0000
@@ -17,53 +17,16 @@
       tal:condition="devmode"
       tal:define="lp_js string:${icingroot}/build"
       tal:attributes="src string:${lp_js}/translations/pofile.js"></script>
+
     <script type="text/javascript">
       registerLaunchpadFunction(insertAllExpansionButtons);
-
-      LPS.use('node', 'cookie', 'anim', 'lp.pofile', function(Y) {
-
-          var hide_notification = function(node) {
-              var hide_anim = new Y.Anim({
-                  node: node,
-                  to: { height: 0,
-                        marginTop: 0, marginBottom: 0,
-                        paddingTop: 0, paddingBottom: 0 }
-              });
-              node.setStyle('border', 'none');
-              hide_anim.set('duration', 0.4);
-              hide_anim.on('end', function(e) {
-                  node.setStyle('display', 'none');
-              });
-              hide_anim.run();
-          }
-
-          var updateNotificationBox = function(e) {
-              var notice = Y.one('.important-notice-container');
-              var balloon = notice.one('.important-notice-balloon');
-              var dismiss_notice_cookie = ('translation-docs-for-' +
-                                           documentation_cookie);
-
-              // Check the cookie to see if the user has already dismissed
-              // the notification box for this session.
-              var already_seen = Y.Cookie.get(dismiss_notice_cookie, Boolean);
-              if (already_seen) {
-                 notice.setStyle('display', 'none');
-              }
-
-              var cancel_button = notice.one(
-                  '.important-notice-cancel-button');
-              // Cancel button starts out hidden.  If user has JavaScript,
-              // then we want to show it.
-              cancel_button.setStyle('visibility', 'visible');
-              cancel_button.on('click', function(e) {
-                  e.halt();
-                  hide_notification(balloon);
-                  Y.Cookie.set(dismiss_notice_cookie, true);
-              });
-          };
-
+      LPS.use('lp.pofile', function(Y) {
           Y.on('domready', Y.lp.pofile.setupSuggestionDismissal);
-          Y.on('domready', updateNotificationBox);
+          Y.on('domready', Y.lp.pofile.initializeKeyBindings);
+          Y.on('domready', Y.lp.pofile.updateNotificationBox);
+          Y.on('domready', function(e) {
+            Y.lp.pofile.setFocus(autofocus_field);
+          });
       });
     </script>
     </div>
@@ -134,7 +97,7 @@
           <input type="hidden" name="batch" value=""
                  tal:attributes="value view/size" />
           <input type="hidden" name="show" value="all" />
-          <label for="search_box">Search:</label>
+          <label for="search_box" accesskey="F">Search:</label>
           <input id="search_box" type="text" name="search"
                  title="Enter text to search for"
                  tal:attributes="value view/search_text" />
@@ -262,6 +225,8 @@
                   <td style="text-align: right;">
                     <input type="submit"
                            name="submit_translations"
+                           accesskey="S"
+                           id="save_and_continue_button"
                            value="Save &amp; Continue"
                     />
                   </td>
@@ -269,7 +234,6 @@
               </tbody>
             </table>
           </form>
-
           <!-- Paging doodads. -->
           <tal:navigation
             replace="structure view/batchnav/@@+navigation-links-lower" />
@@ -277,6 +241,8 @@
         <tal:status replace="structure context/@@+access" />
         <tal:contributors replace="structure context/@@+contributors" />
       </tal:havepluralforms>
+      <metal:pofile-js-footer 
+            use-macro="context/@@+translations-macros/pofile-js-footer" />
     </div>
   </body>
 </html>

=== modified file 'lib/lp/translations/templates/translationmessage-translate.pt'
--- lib/lp/translations/templates/translationmessage-translate.pt	2009-12-10 13:08:33 +0000
+++ lib/lp/translations/templates/translationmessage-translate.pt	2009-12-25 11:06:20 +0000
@@ -20,6 +20,10 @@
     <script type="text/javascript">
       LPS.use('node', 'lp.pofile', function(Y) {
           Y.on('domready', Y.lp.pofile.setupSuggestionDismissal);
+          Y.on('domready', Y.lp.pofile.initializeKeyBindings);
+          Y.on('domready', function(e) {
+            Y.one('#' + autofocus_field).focus();
+          });
       });
     </script>
     </div>
@@ -76,12 +80,13 @@
                 <th colspan="5" style="text-align: right;">
                   <input type="submit"
                          name="submit_translations"
+                         accesskey="S"
+                         id="save_and_continue_button"
                          value="Save &amp; Continue" />
                 </th>
               </tr>
             </tfoot>
           </table>
-
         </form>
 
         <!-- Paging doodads. -->
@@ -89,8 +94,9 @@
           replace="structure view/batchnav/@@+navigation-links-lower" />
       <tal:status replace="structure context/pofile/@@+access" />
       </tal:havepluralforms>
+      <metal:pofile-js-footer 
+            use-macro="context/@@+translations-macros/pofile-js-footer" />
     </div>
-
   </body>
 
 </html>

=== modified file 'lib/lp/translations/templates/translations-macros.pt'
--- lib/lp/translations/templates/translations-macros.pt	2009-12-07 18:42:21 +0000
+++ lib/lp/translations/templates/translations-macros.pt	2009-12-25 11:06:20 +0000
@@ -129,6 +129,15 @@
       </ul>
 </metal:nav-pofile-subpages>
 
+<metal:pofile-js-footer define-macro="pofile-js-footer">
+    <script type="text/javascript"
+        tal:content="
+        structure string:<!-- 
+        var autofocus_field = '${view/autofocus_html_id}_new';
+        var translations_order = '${view/translations_order}';
+        var plural_forms = ${context/plural_forms};
+        // -->" />
+</metal:pofile-js-footer>
 
 </tal:root>