changed font casing, revamped opacity slider and improved accessibility with aria labels and keyboard navigation

.github/workflows/docker-publish.yml

@@ -15,13 +15,13 @@ jobs:
     strategy:
       matrix:
         include:
-          - image: ghcr.io/${{ github.repository_owner }}/homelable-backend
+          - image: ghcr.io/pouzor/homelable-backend
             dockerfile: Dockerfile.backend
             build_args: ""
-          - image: ghcr.io/${{ github.repository_owner }}/homelable-frontend
+          - image: ghcr.io/pouzor/homelable-frontend
             dockerfile: Dockerfile.frontend
             build_args: ""
-          - image: ghcr.io/${{ github.repository_owner }}/homelable-frontend-standalone
+          - image: ghcr.io/pouzor/homelable-frontend-standalone
             dockerfile: Dockerfile.frontend
             build_args: "VITE_STANDALONE=true"
 

frontend/src/components/modals/GroupRectModal.module.css

@@ -0,0 +1,43 @@
+/* Custom colored slider track for accent color */
+.slider-accent::-webkit-slider-runnable-track {
+  height: 4px;
+  background: #00d4ff;
+  border-radius: 2px;
+}
+.slider-accent::-moz-range-track {
+  height: 4px;
+  background: #00d4ff;
+  border-radius: 2px;
+}
+.slider-accent::-ms-fill-lower,
+.slider-accent::-ms-fill-upper {
+  background: #00d4ff;
+  border-radius: 2px;
+}
+
+/* Ensure the slider bar is visible on dark backgrounds */
+.slider-thumb-sm {
+  background: transparent;
+}
+/* Custom slider thumb for smaller circle */
+.slider-thumb-sm::-webkit-slider-thumb {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #00d4ff;
+  border: 2px solid #21262d;
+}
+.slider-thumb-sm::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #00d4ff;
+  border: 2px solid #21262d;
+}
+.slider-thumb-sm::-ms-thumb {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #00d4ff;
+  border: 2px solid #21262d;
+}

frontend/src/components/modals/GroupRectModal.tsx

@@ -7,6 +7,7 @@ import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import type { TextPosition } from '@/types'
 import { hexToRgba, rgbaToHex8 } from '@/utils/colorUtils'
+import styles from './GroupRectModal.module.css' // Import custom CSS for slider thumb
 
 export type BorderStyle = 'solid' | 'dashed' | 'dotted' | 'double' | 'none'
 
@@ -138,9 +139,13 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
           <div className="flex flex-col gap-1.5">
             <Label className="text-xs text-muted-foreground">Font</Label>
             <Select value={form.font} onValueChange={(v: string | null) => set('font', v ?? 'inter')}>
-              <SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`}> 
+              <SelectTrigger
+                className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`}
+                aria-label="Font selector"
+              >
                 <SelectValue />
               </SelectTrigger>
+
               <SelectContent className="bg-[#21262d] border-[#30363d]">
                 {FONTS.map((f) => (
                   <SelectItem key={f.value} value={f.value} className="text-sm">
@@ -164,6 +169,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     title={value}
                     onClick={() => set('text_position', value)}
                     className={`h-8 rounded text-base transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    aria-label={`Text position ${label}`}
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -189,6 +195,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     type="button"
                     onClick={() => set('label_position', value)}
                     className={`flex items-center justify-center h-8 rounded text-xs transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    aria-label={`Label position ${label}`}
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -228,8 +235,9 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                       max={100}
                       value={alpha}
                       onChange={(e) => set(key, rgbaToHex8(hex6, Number(e.target.value)))}
-                      className="w-full h-1 accent-[#00d4ff] cursor-pointer"
+                      className={`w-full h-1 cursor-pointer mt-2 ${styles['slider-thumb-sm']} ${styles['slider-accent']}`}
                       title={`Opacity: ${alpha}%`}
+                      style={{ accentColor: '#00d4ff' }}
                     />
                     <span className="text-[9px] text-muted-foreground/60">{label} {alpha}%</span>
                   </div>
@@ -250,6 +258,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     type="button"
                     onClick={() => set('text_size', value)}
                     className={`flex items-center justify-center h-8 rounded transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    aria-label={`Text size ${label}`}
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -277,6 +286,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     title={label}
                     onClick={() => set('border_style', value)}
                     className={`flex flex-col items-center justify-center h-10 rounded text-xs gap-0.5 transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    aria-label={`Border style ${label}`}
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -303,6 +313,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
                     type="button"
                     onClick={() => set('border_width', value)}
                     className={`flex items-center justify-center h-8 rounded text-xs transition-colors cursor-pointer ${modalStyles['modal-interactive']}`}
+                    aria-label={`Border width ${label}`}
                     style={{
                       background: isSelected ? '#00d4ff22' : '#21262d',
                       border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
@@ -318,11 +329,23 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
 
           {/* Z-order */}
           <div className="flex flex-col gap-1.5">
-            <Label className="text-xs text-muted-foreground">Z-Order (1 = furthest back)</Label>
+            <Label className="text-xs text-muted-foreground">
-            <Select value={String(form.z_order)} onValueChange={(v: string | null) => set('z_order', v !== null ? Number(v) : 1)}>
+              Z-Order (1 = furthest back)
-              <SelectTrigger className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']}`}> 
+            </Label>
+
+            <Select
+              value={String(form.z_order)}
+              onValueChange={(v: string | null) =>
+                set('z_order', v !== null ? Number(v) : 1)
+              }
+            >
+              <SelectTrigger
+                className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']}`}
+                aria-label="Z-order selector"
+              >
                 <SelectValue />
               </SelectTrigger>
+
               <SelectContent className="bg-[#21262d] border-[#30363d]">
                 {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
                   <SelectItem key={n} value={String(n)} className="text-sm font-mono">