[pgAdmin][RM4762] [Accessibility] Allow screenreader to read label & description of non-textable elements

Aditya Toshniwal <[email protected]> Tue, 10 Dec 2019 17:27:10 +0530

Newsgroups	gmane.comp.db.postgresql.pgadmin.devel
Message-ID	<CAM9w-_nK=X6JXFLax5DDZAa=uQUbvZOVSOd6XGDaFG-m9m6BDg@mail.gmail.com>

Hi Hackers,

Attached is the patch to add aria-label to the buttons in debugger. All
others were taken care in #4772.

Kindly review.

-- 
Thanks and Regards,
Aditya Toshniwal
Sr. Software Engineer | EnterpriseDB India | Pune
"Don't Complain about Heat, Plant a TREE"

RM4762.patch (application/octet-stream, 2.7 KB)

diff --git a/web/pgadmin/tools/debugger/static/js/direct.js b/web/pgadmin/tools/debugger/static/js/direct.js
index 96a0eaa50..992f3d7c6 100644
--- a/web/pgadmin/tools/debugger/static/js/direct.js
+++ b/web/pgadmin/tools/debugger/static/js/direct.js
@@ -1901,26 +1901,32 @@ define([
       /* Update the shortcuts of the buttons */
       self.toolbarView.$el.find('#btn-step-into')
         .attr('title', keyboardShortcuts.shortcut_accesskey_title('Step into',self.preferences.btn_step_into))
+        .attr('aria-label', keyboardShortcuts.shortcut_accesskey_title('Step into',self.preferences.btn_step_into))
         .attr('accesskey', keyboardShortcuts.shortcut_key(self.preferences.btn_step_into));
 
       self.toolbarView.$el.find('#btn-step-over')
         .attr('title', keyboardShortcuts.shortcut_accesskey_title('Step over',self.preferences.btn_step_over))
+        .attr('aria-label', keyboardShortcuts.shortcut_accesskey_title('Step over',self.preferences.btn_step_over))
         .attr('accesskey', keyboardShortcuts.shortcut_key(self.preferences.btn_step_over));
 
       self.toolbarView.$el.find('#btn-continue')
         .attr('title', keyboardShortcuts.shortcut_accesskey_title('Continue/Start',self.preferences.btn_start))
+        .attr('aria-label', keyboardShortcuts.shortcut_accesskey_title('Continue/Start',self.preferences.btn_start))
         .attr('accesskey', keyboardShortcuts.shortcut_key(self.preferences.btn_start));
 
       self.toolbarView.$el.find('#btn-toggle-breakpoint')
         .attr('title', keyboardShortcuts.shortcut_accesskey_title('Toggle breakpoint',self.preferences.btn_toggle_breakpoint))
+        .attr('aria-label', keyboardShortcuts.shortcut_accesskey_title('Toggle breakpoint',self.preferences.btn_toggle_breakpoint))
         .attr('accesskey', keyboardShortcuts.shortcut_key(self.preferences.btn_toggle_breakpoint));
 
       self.toolbarView.$el.find('#btn-clear-breakpoint')
         .attr('title', keyboardShortcuts.shortcut_accesskey_title('Clear all breakpoints',self.preferences.btn_clear_breakpoints))
+        .attr('aria-label', keyboardShortcuts.shortcut_accesskey_title('Clear all breakpoints',self.preferences.btn_clear_breakpoints))
         .attr('accesskey', keyboardShortcuts.shortcut_key(self.preferences.btn_clear_breakpoints));
 
       self.toolbarView.$el.find('#btn-stop')
         .attr('title', keyboardShortcuts.shortcut_accesskey_title('Stop',self.preferences.btn_stop))
+        .attr('aria-label', keyboardShortcuts.shortcut_accesskey_title('Stop',self.preferences.btn_stop))
         .attr('accesskey', keyboardShortcuts.shortcut_key(self.preferences.btn_stop));
     },
     // Register the panel with new debugger docker instance.