Merge ~nteodosio/software-properties:attach-url into software-properties:ubuntu/master

[Nathan Teodosio]

Currently if you go to the "Enable Ubuntu Pro" dialog of software-properties-gtk, there is a mention to ubuntu.com/pro/attach, but that mention is not an hyperlink due to limitations in the label of a radio button in GTK. Just setting markup on the child label of the GtkRadioButton is not enough; The URI would nonetheless be not clickable because the radio button activation action takes precedence.

The here proposed change could in principle confuse users of screen readers, because it removes the child label of the radio buttons and instead separates them as independent widgets. But as such, it also includes accessibility directives to fix that.

I'd like to kindly request someone from the User Interface team to review that the screen reader reads that dialog correctly. For what it's worth, I tested this on my side and it seems fine.

This merge request is an alternative to https://code.launchpad.net/~xnox/software-properties/+git/software-properties/+merge/443188.

To test without building and installing package: Clone the repository, cd into it, run ./software-properties-gtk --data-dir=$PWD/data, make sure screen reader is on[1].

[1] https://help.ubuntu.com/stable/ubuntu-help/a11y-screen-reader.html.en

[Sebastien Bacher (seb128)]

Thanks Nathan. The issue with the change suggested by Dimitri here (and the reason GTK isn't providing the option to have an activable URL) is that with the change you need to click on the small circle to change the selection (instead of being able to click anywhere on the line include the text description of the options).

I would like to have input of design and/or Oliver on the right tradeoff. Another option would be to slightly change the design to have the URL as a subtitle/other line and not part of the label...

review: Needs Information

[Nathan Teodosio (nteodosio)]

For visual reference for Oliver: I posted an image of that in https://chat.canonical.com/canonical/pl/g5iwf5muqbg3z87hq8hmay56yc

Unmerged commits

4702484... by Nathan Teodosio on 2023-10-31

Accessibility: Help screen reader to read radio buttons.

6bd13d0... by Nathan Teodosio on 2023-10-31

Make ubuntu.com URL apparent and clickable.

Just setting markup on the child label of the GtkRadioButton is not enough;
The URI would nonetheless be not clickable because the radio button activation
action takes precedence.

diff --git a/data/gtkbuilder/dialog-ua-attach.ui b/data/gtkbuilder/dialog-ua-attach.ui
index 1445b82..f8c3fad 100644
--- a/data/gtkbuilder/dialog-ua-attach.ui
+++ b/data/gtkbuilder/dialog-ua-attach.ui
@@ -30,18 +30,36 @@
         <object class="GtkBox" id="radio_net_control_box">
           <property name="visible">True</property>
           <property name="orientation">vertical</property>
-        <child>
-          <object class="GtkRadioButton" id="magic_radio">
-            <property name="label" translatable="yes">Enter code on ubuntu.com/pro/attach</property>
-            <property name="visible">True</property>
-            <property name="can-focus">True</property>
-            <property name="receives-default">False</property>
-            <property name="margin-top">30</property>
-            <property name="xalign">0</property>
-            <property name="group">magic_radio</property>
-            <signal name="clicked" handler="on_magic_radio_clicked" swapped="no"/>
-          </object>
-        </child>
+            <child>
+              <object class="GtkBox">
+                <property name="visible">True</property>
+                <property name="orientation">horizontal</property>
+                <property name="spacing">4</property>
+                <property name="margin-top">30</property>
+                <child>
+                  <object class="GtkRadioButton" id="magic_radio">
+                    <property name="visible">True</property>
+                    <property name="can-focus">True</property>
+                    <property name="receives-default">False</property>
+                    <property name="xalign">0</property>
+                    <property name="group">magic_radio</property>
+                    <signal name="clicked" handler="on_magic_radio_clicked" swapped="no"/>
+                    <child internal-child="accessible">
+                      <object class="AtkObject">
+                        <property name="AtkObject::accessible-name" translatable="yes">Enter code on ubuntu.com/pro/attach</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="label" translatable="yes">Enter code on &lt;a href="https://ubuntu.com/pro/attach"&gt;ubuntu.com/pro/attach&lt;/a&gt;</property>
+                    <property name="visible">True</property>
+                    <property name="use-markup">True</property>
+                  </object>
+                </child>
+              </object>
+            </child>
         <child>
           <object class="GtkBox">
             <property name="visible">True</property>
@@ -93,15 +111,33 @@
           </object>
         </child>
         <child>
-          <object class="GtkRadioButton" id="token_radio">
-            <property name="label" translatable="yes">Or add token manually</property>
+          <object class="GtkBox">
             <property name="visible">True</property>
-            <property name="can-focus">True</property>
-            <property name="receives-default">False</property>
+            <property name="can-focus">False</property>
+            <property name="orientation">horizontal</property>
             <property name="margin-top">6</property>
-            <property name="xalign">0</property>
-            <property name="group">magic_radio</property>
-            <signal name="toggled" handler="on_radio_toggled" swapped="no"/>
+            <property name="spacing">4</property>
+            <child>
+              <object class="GtkRadioButton" id="token_radio">
+                <property name="visible">True</property>
+                <property name="can-focus">True</property>
+                <property name="receives-default">False</property>
+                <property name="xalign">0</property>
+                <property name="group">magic_radio</property>
+                <signal name="toggled" handler="on_radio_toggled" swapped="no"/>
+                <child internal-child="accessible">
+                  <object class="AtkObject">
+                    <property name="AtkObject::accessible-name" translatable="yes">Add token manually</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label" translatable="yes">Or add token manually</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
           </object>
         </child>
         <child>