From c7f24fc8d2cfc64be9247472a7175a31d0239f53 Mon Sep 17 00:00:00 2001
From: VPS 4 Deploy Agent <deploy@clube67.com>
Date: Sat, 30 May 2026 23:27:00 +0200
Subject: [PATCH] =?UTF-8?q?fix(a11y):=20add=20id/name=20and=20htmlFor=20to?=
 =?UTF-8?q?=20all=20form=20fields=20=E2=80=94=20fix=20browser=20warnings?=
 =?UTF-8?q?=20about=20unlabeled=20inputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/PluginsModal.jsx           | 20 +++++++++----------
 .../src/components/SettingsModal.jsx          | 16 +++++++--------
 .../src/components/TransformModal.jsx         |  6 +++++-
 .../src/components/UserManagementModal.jsx    | 12 +++++------
 4 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/dental-server/dental-client/src/components/PluginsModal.jsx b/dental-server/dental-client/src/components/PluginsModal.jsx
index 94ea66c..eee839f 100644
--- a/dental-server/dental-client/src/components/PluginsModal.jsx
+++ b/dental-server/dental-client/src/components/PluginsModal.jsx
@@ -67,25 +67,25 @@ export default function PluginsModal({ isOpen, onClose }) {
         )}
 
         <div className="form-group">
-          <label>Access Key *</label>
-          <input type="text" className="form-control" placeholder="Ex: AIPL5M4G..." required value={config.wasabiAccessKey} onChange={set('wasabiAccessKey')} />
+          <label htmlFor="wasabi-access-key">Access Key *</label>
+          <input id="wasabi-access-key" name="wasabiAccessKey" type="text" className="form-control" placeholder="Ex: AIPL5M4G..." required autoComplete="off" value={config.wasabiAccessKey} onChange={set('wasabiAccessKey')} />
         </div>
         <div className="form-group">
-          <label>Secret Key *</label>
-          <input type="password" className="form-control" placeholder="Sua Secret Key" required value={config.wasabiSecretKey} onChange={set('wasabiSecretKey')} />
+          <label htmlFor="wasabi-secret-key">Secret Key *</label>
+          <input id="wasabi-secret-key" name="wasabiSecretKey" type="password" className="form-control" placeholder="Sua Secret Key" required autoComplete="off" value={config.wasabiSecretKey} onChange={set('wasabiSecretKey')} />
         </div>
         <div className="form-group">
-          <label>Bucket Ativo *</label>
-          <input type="text" className="form-control" placeholder="Ex: meu-bucket-rx" required value={config.wasabiBucket} onChange={set('wasabiBucket')} />
+          <label htmlFor="wasabi-bucket">Bucket Ativo *</label>
+          <input id="wasabi-bucket" name="wasabiBucket" type="text" className="form-control" placeholder="Ex: meu-bucket-rx" required value={config.wasabiBucket} onChange={set('wasabiBucket')} />
         </div>
         <div style={{ display: 'flex', gap: 12 }}>
           <div className="form-group" style={{ flex: 1 }}>
-            <label>Região</label>
-            <input type="text" className="form-control" placeholder="Ex: us-east-1" value={config.wasabiRegion} onChange={set('wasabiRegion')} />
+            <label htmlFor="wasabi-region">Região</label>
+            <input id="wasabi-region" name="wasabiRegion" type="text" className="form-control" placeholder="Ex: us-east-1" value={config.wasabiRegion} onChange={set('wasabiRegion')} />
           </div>
           <div className="form-group" style={{ flex: 1 }}>
-            <label>Endpoint</label>
-            <input type="text" className="form-control" placeholder="Ex: s3.wasabisys.com" value={config.wasabiEndpoint} onChange={set('wasabiEndpoint')} />
+            <label htmlFor="wasabi-endpoint">Endpoint</label>
+            <input id="wasabi-endpoint" name="wasabiEndpoint" type="text" className="form-control" placeholder="Ex: s3.wasabisys.com" value={config.wasabiEndpoint} onChange={set('wasabiEndpoint')} />
           </div>
         </div>
 
diff --git a/dental-server/dental-client/src/components/SettingsModal.jsx b/dental-server/dental-client/src/components/SettingsModal.jsx
index be80e1b..4f3c1cc 100644
--- a/dental-server/dental-client/src/components/SettingsModal.jsx
+++ b/dental-server/dental-client/src/components/SettingsModal.jsx
@@ -50,22 +50,22 @@ export default function SettingsModal({ isOpen, onClose }) {
     <Modal isOpen={isOpen} onClose={onClose} title="⚙️ Configurações da Conta" large={false}>
       <form onSubmit={handleSubmit}>
         <div className="form-group">
-          <label>Senha Atual (Obrigatório)*</label>
-          <input type="password" className="form-control" placeholder="Digite sua senha atual" required value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} />
+          <label htmlFor="settings-current-password">Senha Atual (Obrigatório)*</label>
+          <input id="settings-current-password" name="currentPassword" type="password" className="form-control" placeholder="Digite sua senha atual" required autoComplete="current-password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} />
         </div>
         <hr style={{ margin: '20px 0', border: 'none', borderTop: '1px solid #eee' }} />
         <p style={{ marginBottom: 15, color: '#666', fontSize: '0.9rem' }}>Preencha apenas os campos que deseja alterar:</p>
         <div className="form-group">
-          <label>Novo Nome de Usuário</label>
-          <input type="text" className="form-control" placeholder="Deixe em branco para não alterar" value={newUsername} onChange={(e) => setNewUsername(e.target.value)} />
+          <label htmlFor="settings-new-username">Novo Nome de Usuário</label>
+          <input id="settings-new-username" name="newUsername" type="text" className="form-control" placeholder="Deixe em branco para não alterar" autoComplete="username" value={newUsername} onChange={(e) => setNewUsername(e.target.value)} />
         </div>
         <div className="form-group">
-          <label>Novo E-mail de Acesso</label>
-          <input type="email" className="form-control" placeholder="Deixe em branco para não alterar" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} />
+          <label htmlFor="settings-new-email">Novo E-mail de Acesso</label>
+          <input id="settings-new-email" name="newEmail" type="email" className="form-control" placeholder="Deixe em branco para não alterar" autoComplete="email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} />
         </div>
         <div className="form-group">
-          <label>Nova Senha</label>
-          <input type="password" className="form-control" placeholder="Deixe em branco para não alterar" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
+          <label htmlFor="settings-new-password">Nova Senha</label>
+          <input id="settings-new-password" name="newPassword" type="password" className="form-control" placeholder="Deixe em branco para não alterar" autoComplete="new-password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
         </div>
         <div className="form-actions">
           <button type="button" className="btn btn-secondary" onClick={onClose}>Cancelar</button>
diff --git a/dental-server/dental-client/src/components/TransformModal.jsx b/dental-server/dental-client/src/components/TransformModal.jsx
index a7c0dbb..a7de3cc 100644
--- a/dental-server/dental-client/src/components/TransformModal.jsx
+++ b/dental-server/dental-client/src/components/TransformModal.jsx
@@ -399,8 +399,10 @@ export default function TransformModal({ isOpen, onClose, image, onSaved }) {
           {/* Área de ação */}
           <div className="transform-action-area">
             <div className="form-group">
-              <label>Nova Observação / Detalhes (Opcional):</label>
+              <label htmlFor="transform-remark">Nova Observação / Detalhes (Opcional):</label>
               <textarea
+                id="transform-remark"
+                name="remark"
                 className="form-control"
                 rows={2}
                 value={remark}
@@ -451,6 +453,7 @@ export default function TransformModal({ isOpen, onClose, image, onSaved }) {
             <h3 className="section-title">Cadastrar Nova GTO</h3>
             <div className="form-actions-inline" style={{ marginTop: 12 }}>
               <input
+                id="gto-number" name="gtoNumber"
                 type="text" className="form-control"
                 placeholder="Número/ID da GTO"
                 value={gtoNumber}
@@ -458,6 +461,7 @@ export default function TransformModal({ isOpen, onClose, image, onSaved }) {
                 style={{ flex: 1 }}
               />
               <input
+                id="gto-desc" name="gtoDesc"
                 type="text" className="form-control"
                 placeholder="Descrição (Opcional)"
                 value={gtoDesc}
diff --git a/dental-server/dental-client/src/components/UserManagementModal.jsx b/dental-server/dental-client/src/components/UserManagementModal.jsx
index a7c1168..78b72d0 100644
--- a/dental-server/dental-client/src/components/UserManagementModal.jsx
+++ b/dental-server/dental-client/src/components/UserManagementModal.jsx
@@ -69,16 +69,16 @@ export default function UserManagementModal({ isOpen, onClose }) {
           <h3 style={{ margin: '0 0 16px', fontSize: '1.05rem', fontWeight: 700, color: 'var(--text-primary)' }}>Cadastrar Novo Usuário</h3>
           <form onSubmit={createUser}>
             <div className="form-group">
-              <label>NOME DE USUÁRIO *</label>
-              <input type="text" required placeholder="Ex: dentista.ana" value={username} onChange={(e) => setUsername(e.target.value)} />
+              <label htmlFor="new-user-username">NOME DE USUÁRIO *</label>
+              <input id="new-user-username" name="username" type="text" required placeholder="Ex: dentista.ana" autoComplete="off" value={username} onChange={(e) => setUsername(e.target.value)} />
             </div>
             <div className="form-group">
-              <label>E-MAIL *</label>
-              <input type="email" required placeholder="ana@consultorio.com" value={email} onChange={(e) => setEmail(e.target.value)} />
+              <label htmlFor="new-user-email">E-MAIL *</label>
+              <input id="new-user-email" name="email" type="email" required placeholder="ana@consultorio.com" autoComplete="off" value={email} onChange={(e) => setEmail(e.target.value)} />
             </div>
             <div className="form-group">
-              <label>SENHA *</label>
-              <input type="password" required placeholder="Senha de acesso" value={password} onChange={(e) => setPassword(e.target.value)} />
+              <label htmlFor="new-user-password">SENHA *</label>
+              <input id="new-user-password" name="password" type="password" required placeholder="Senha de acesso" autoComplete="new-password" value={password} onChange={(e) => setPassword(e.target.value)} />
             </div>
             <div className="form-group" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
               <input type="checkbox" id="new_is_admin" checked={isAdmin} onChange={(e) => setIsAdmin(e.target.checked)} style={{ width: 16, height: 16 }} />