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

@@ -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;
+}

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"