Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve accessibility with semantic HTML, ARIA attributes, and visible focus states across components.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-02-25 16:09:54 -03:00
parent 1868f64415
commit 59732f3706
7 changed files with 123 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/studio/src/components/BrandingSettings.tsx
+20 -12
View File
@@ -79,7 +79,7 @@ export default function BrandingSettings() {
{/* Logo Section */}
<div className="space-y-4">
<label className="block text-sm font-medium text-gray-400">Logo</label>
<span className="block text-sm font-medium text-gray-400">Logo</span>
<div className="p-4 bg-black/20 rounded-xl border border-white/5 flex items-center justify-center min-h-[120px] relative">
{org.logo_url ? (
<Image
@@ -110,7 +110,7 @@ export default function BrandingSettings() {
{/* Favicon Section */}
<div className="space-y-4">
<label className="block text-sm font-medium text-gray-400">Favicon</label>
<span className="block text-sm font-medium text-gray-400">Favicon</span>
<div className="p-4 bg-black/20 rounded-xl border border-white/5 flex items-center justify-center min-h-[120px] relative">
{org.favicon_url ? (
<div className="w-8 h-8 relative">
@@ -143,56 +143,64 @@ export default function BrandingSettings() {
</div>
</div>
<div className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm">
<h3 className="text-xl font-bold mb-6 flex items-center gap-2">
<span>🌈</span> Brand Colors
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<fieldset className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm">
<legend className="px-2 text-xl font-bold flex items-center gap-2">
<span aria-hidden="true">🌈</span> Brand Colors
</legend>
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Primary Color */}
<div>
<label className="block text-sm font-medium text-gray-400 mb-2">Primary Color</label>
<label htmlFor="primary-color" className="block text-sm font-medium text-gray-400 mb-2">Primary Color</label>
<div className="flex items-center gap-4">
<input
id="primary-color-picker"
type="color"
value={formData.primary_color}
onChange={(e) => setFormData({ ...formData, primary_color: e.target.value })}
aria-label="Primary color picker"
className="w-12 h-12 rounded-lg cursor-pointer bg-transparent border-none p-0"
/>
<div className="flex-1">
<input
id="primary-color"
type="text"
value={formData.primary_color}
onChange={(e) => setFormData({ ...formData, primary_color: e.target.value })}
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white font-mono uppercase"
aria-describedby="primary-color-desc"
/>
</div>
</div>
<p className="text-xs text-gray-500 mt-2">Used for main buttons, active states, and highlights.</p>
<p id="primary-color-desc" className="text-xs text-gray-500 mt-2">Used for main buttons, active states, and highlights.</p>
</div>
{/* Secondary Color */}
<div>
<label className="block text-sm font-medium text-gray-400 mb-2">Secondary Color</label>
<label htmlFor="secondary-color" className="block text-sm font-medium text-gray-400 mb-2">Secondary Color</label>
<div className="flex items-center gap-4">
<input
id="secondary-color-picker"
type="color"
value={formData.secondary_color}
onChange={(e) => setFormData({ ...formData, secondary_color: e.target.value })}
aria-label="Secondary color picker"
className="w-12 h-12 rounded-lg cursor-pointer bg-transparent border-none p-0"
/>
<div className="flex-1">
<input
id="secondary-color"
type="text"
value={formData.secondary_color}
onChange={(e) => setFormData({ ...formData, secondary_color: e.target.value })}
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white font-mono uppercase"
aria-describedby="secondary-color-desc"
/>
</div>
</div>
<p className="text-xs text-gray-500 mt-2">Used for accents and gradients.</p>
<p id="secondary-color-desc" className="text-xs text-gray-500 mt-2">Used for accents and gradients.</p>
</div>
</div>
</div>
</fieldset>
<div className="flex justify-end">
<button