a11y: Enhance accessibility of form and interactive components using semantic HTML, ARIA attributes, and keyboard navigation.

This commit is contained in:
2026-02-25 16:17:40 -03:00
parent 59732f3706
commit 5b3fc800c7
6 changed files with 104 additions and 81 deletions
+10 -7
View File
@@ -58,16 +58,17 @@ export default function BrandingSettings() {
return (
<div className="space-y-8 max-w-4xl mx-auto">
<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 Identity
</h3>
<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 Identity
</legend>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Platform Name */}
<div className="col-span-full">
<label className="block text-sm font-medium text-gray-400 mb-2">Platform Name</label>
<label htmlFor="platform-name" className="block text-sm font-medium text-gray-400 mb-2">Platform Name</label>
<input
id="platform-name"
type="text"
value={formData.platform_name || ""}
onChange={(e) => setFormData({ ...formData, platform_name: e.target.value })}
@@ -94,6 +95,7 @@ export default function BrandingSettings() {
)}
</div>
<FileUpload
id="logo-upload"
accept="image/png,image/jpeg,image/svg+xml"
currentUrl={org.logo_url}
customUploadFn={async (file) => {
@@ -127,6 +129,7 @@ export default function BrandingSettings() {
)}
</div>
<FileUpload
id="favicon-upload"
accept="image/png,image/x-icon,image/svg+xml,image/jpeg"
currentUrl={org.favicon_url}
customUploadFn={async (file) => {
@@ -141,7 +144,7 @@ export default function BrandingSettings() {
<p className="text-xs text-gray-500">Recommended: ICO or PNG, 32x32px.</p>
</div>
</div>
</div>
</fieldset>
<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">
@@ -211,6 +214,6 @@ export default function BrandingSettings() {
{saving ? "Saving Changes..." : "Save Branding Settings"}
</button>
</div>
</div>
</div >
);
}