dialogs: Allow easier keyboard navigation

Set the focus on the default action for the end session and display change dialogs. Add styling to the theme for focused buttons. Dialogs with entries have the focus set on the entries by default which is what we already want. Closes: #12534
linuxmint · Nov 30, 2024 · 2ea818b · 2ea818b
1 parent e601286
commit 2ea818b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/data/theme/cinnamon-sass/_drawing.scss b/data/theme/cinnamon-sass/_drawing.scss
@@ -73,6 +73,7 @@
   $active_button_bg_color: $lightest_bg_color;
   $checked_button_bg_color: $lightest_bg_color;
   $insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor);
+  $focus_shadow_color: transparentize($fg_color, 0.6);
 
   // background color mix override for default button style
   @if $style == 'default' {
@@ -95,6 +96,7 @@
   @if $type == 'focus' {
     color: $tc;
     background-color: $button_bg_color;
+    box-shadow: inset 0 0 1px 1px $focus_shadow_color;
   }
 
   // hover button

diff --git a/js/ui/endSessionDialog.js b/js/ui/endSessionDialog.js
@@ -120,6 +120,7 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
 
         var [canSwitchUser, canStop, canRestart, canHybridSleep, canSuspend, canHibernate, canLogout] = result[0];
         var content = null;
+        let button;
 
         switch(this._mode) {
             case DialogMode.LOGOUT:
@@ -133,12 +134,13 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
                 }
 
                 this._defaultAction = this._dialogProxy.LogoutRemote.bind(this._dialogProxy);
-                this.addButton({
+                button = this.addButton({
                     label: _("Log Out"),
                     action: this._defaultAction,
                     destructive_action: true,
                     default: true
                 });
+                button.grab_key_focus();
 
                 this._messageDialogContent.title = _("Log Out");
 
@@ -172,12 +174,13 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
 
                 if (canStop) {
                     this._defaultAction = this._dialogProxy.ShutdownRemote.bind(this._dialogProxy);
-                    this.addButton({
+                    button = this.addButton({
                         label: _("Shut Down"),
                         action: this._defaultAction,
                         destructive_action: true,
                         default: true,
                     });
+                    button.grab_key_focus();
                 }
 
                 this._messageDialogContent.title = _("Shut Down");
@@ -194,12 +197,13 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
                 }
 
                 this._defaultAction = this._dialogProxy.RestartRemote.bind(this._dialogProxy);
-                this.addButton({
+                button = this.addButton({
                     label: _("Restart"),
                     action: this._defaultAction,
                     destructive_action: true,
                     default: true
                 });
+                button.grab_key_focus();
 
                 this._messageDialogContent.title = _("Restart");
 
@@ -297,12 +301,13 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
 
         this._addCancel();
 
-        this.addButton({
+        let button = this.addButton({
             label: _("Ignore and continue"),
             action: this._dialogProxy.IgnoreInhibitorsRemote.bind(this._dialogProxy),
             destructive_action: true,
             default: true
         });
+        button.grab_key_focus();
     }
 
     close() {

diff --git a/js/ui/windowManager.js b/js/ui/windowManager.js
@@ -86,9 +86,9 @@ class DisplayChangeDialog extends ModalDialog.ModalDialog {
         this._cancelButton = this.addButton({ label: _("Revert"),
                                               action: this._onFailure.bind(this),
                                               key: Clutter.KEY_Escape });
+        this._cancelButton.grab_key_focus();
         this._okButton = this.addButton({ label: _("Keep changes"),
-                                          action: this._onSuccess.bind(this),
-                                          default: true });
+                                          action: this._onSuccess.bind(this) });
 
         this._timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, ONE_SECOND, this._tick.bind(this));
         GLib.Source.set_name_by_id(this._timeoutId, '[cinnamon] this._tick');