From 2acf8501b4a7f74cc2a960b091a4d778170eb978 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Sat, 13 Apr 2024 12:05:07 +0200
Subject: [PATCH] feat(styles): enhance accessibility and UI hints

Improved the UI's informative elements by introducing accessible tooltips and clearer button hierarchy in the CSS. Specifically, focused on enhancing keyboard navigation accessibility by outlining `abbr` elements when focused, and adjusted the `.card-block > .btn` selector for better specificity, ensuring button styles apply more reliably. In the HTML template, added an abbreviation (abbr) element with a tooltip to explain the resolution input field, aiding user understanding and interaction without cluttering the UI.

These changes aim to make the platform more inclusive and user-friendly, particularly for users relying on keyboard navigation, and provide clearer, immediate guidance on the resolution setting process without overwhelming them with text.
---
 src/pix360core/static/css/style.css           | 26 ++++++++++++++++++-
 .../templates/pix360core/converter.html       |  6 ++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/pix360core/static/css/style.css b/src/pix360core/static/css/style.css
index 57fb9f5..4a3eb1c 100644
--- a/src/pix360core/static/css/style.css
+++ b/src/pix360core/static/css/style.css
@@ -61,7 +61,31 @@ form {
   height: 500px;
 }
 
-.card-block .btn {
+.card-block > .btn {
   width: 100%;
   margin-top: 1px;
 }
+
+.info-symbol {
+  display: inline-block;
+  text-decoration: none;
+  font-size: 18px;
+  line-height: 1;
+  cursor: help;
+  color: #17a2b8;
+}
+
+.info-symbol:hover {
+  color: #1397a3;
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: none;
+}
+
+/* Accessibility for keyboard navigation */
+abbr[title]:focus {
+  outline: 2px dashed #17a2b8;
+  outline-offset: 2px;
+}
\ No newline at end of file
diff --git a/src/pix360core/templates/pix360core/converter.html b/src/pix360core/templates/pix360core/converter.html
index adcd592..9a02a2d 100644
--- a/src/pix360core/templates/pix360core/converter.html
+++ b/src/pix360core/templates/pix360core/converter.html
@@ -50,7 +50,11 @@
                 />
               </div>
               <div class="form-group">
-                <label style="display: block">Resolution</label>
+                <label style="display: block">Resolution
+                  <abbr title="If no value is set for the resolution, the system will try to figure out the highest resolution possible and export that." tabindex="0">
+                    <span class="info-symbol" aria-hidden="true">&#x24D8;</span>
+                  </abbr>
+                </label>
                 <input
                   type=""
                   class="form-control"