import { Meta, Story } from '@storybook/addon-docs'
import * as Stories from '../PasswordField.stories.ts'
import '@/stories/styles/shared.css'

<Meta of={Stories} />

<div className="header">
  <h1>Accessibilité</h1>
</div>


Informations sur l’accessibilité du composant **PasswordField**.


<div class="mt-2">
<p>Rapport d’audit manuel : <a href="/audits/PasswordField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/898" target="_blank" style={{color:'#0C41BD'}}>issue #898</a>)</p>
	</div>


                <div class="mt-6">
                  <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>Spécificité - Source technique</h3>
                  
                  <div style={{ backgroundColor: '#f5f5f5', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
                    <p style={{ fontWeight: 'bold', marginBottom: '8px' }}>Les champs de formulaires doivent avoir une étiquette</p>
                    <p style={{ marginBottom: '8px' }}>Techniquement, il est communément utilisé la balise "label" avec les attributs "for" et "id".
                    Celle-ci doit être pertinente et accolée au champ associé.</p>
                    <p>
                      <a href="https://www.accede-web.com/notices/html-et-css/formulaires/utiliser-la-balise-label-ainsi-que-les-attributs-for-et-id-pour-etiqueter-les-champs-avec-intitule-visible/" 
                         target="_blank" style={{ color:'#0C41BD' }}>
                        Documentation accede-web
                      </a>
                    </p>
                  </div>
                  
                  <div style={{ backgroundColor: '#f5f5f5', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
                    <p style={{ fontWeight: 'bold', marginBottom: '8px' }}>Remplissage automatique des champs</p>
                    <p style={{ marginBottom: '8px' }}>Selon la finalité du champ, le remplissage automatique est possible (attribut "autocomplete").</p>
                    <p style={{ fontSize: '13px', color: '#0C41BD' }}>
                      <a href="https://www.accede-web.com/notices/html-et-css/formulaires/utiliser-lattribut-autocomplete-pour-faciliter-le-remplissage-automatique-des-champs/" 
                         target="_blank" style={{color:'#0C41BD'}}>
                        Documentation accede-web
                      </a>
                    </p>
                  </div>
                  
                  <div style={{ backgroundColor: '#f5f5f5', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
                    <p style={{ fontWeight: 'bold', marginBottom: '8px' }}>Aide à la saisie</p>
                    <p style={{ marginBottom: '8px' }}>En cas d'aide à la saisie, l'inscription est visible dans un message ou présente dans l'étiquette. Il doit être rattaché au libellé ou situé dans le passage de texte associé au champ.</p>
                    <p style={{ fontSize: '13px', color: '#0C41BD' }}>
                      <a href="https://www.accede-web.com/notices/html-et-css/formulaires/integrer-les-aides-a-la-saisie-directement-dans-les-balises-label/" 
                         target="_blank" style={{color:'#0C41BD'}}>
                        Documentation accede-web
                      </a>
                    </p>
                  </div>
                  
                  <div style={{ backgroundColor: '#f5f5f5', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
                    <p style={{ fontWeight: 'bold', marginBottom: '8px' }}>Champs obligatoires</p>
                    <p style={{ marginBottom: '8px' }}>Les champs obligatoires possèdent l'une et/ou l'autre condition :</p>
                    <ul style={{ marginBottom: '8px', paddingLeft: '20px' }}>
                      <li>un intitulé visible permettant de l'identifier comme tel</li>
                      <li>un attribut "required" ou 'aria-required="true"'</li>
                    </ul>
                    <p style={{ marginBottom: '8px' }}>Il doit être rattaché au libellé ou situé dans le passage de texte associé au champ.</p>
                    <p style={{ fontSize: '13px', color: '#0C41BD' }}>
                      <a href="https://www.accede-web.com/notices/html-et-css/formulaires/integrer-required-ou-aria-requiredtrue-dans-les-champs-obligatoires/" 
                         target="_blank" style={{color:'#0C41BD'}}>
                        Documentation accede-web
                      </a>
                    </p>
                  </div>
                  
                  <div style={{ backgroundColor: '#f5f5f5', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
                    <p style={{ fontWeight: 'bold', marginBottom: '8px' }}>Gestion des erreurs</p>
                    <p style={{ marginBottom: '8px' }}>En cas d'erreur, le champ possède l'une et/ou l'autre condition :</p>
                    <ul style={{ marginBottom: '8px', paddingLeft: '20px' }}>
                      <li>un message visible permet de l'identifier comme tel</li>
                      <li>un attribut 'aria-invalid="true"'</li>
                    </ul>
                    <p style={{ marginBottom: '8px' }}>Il doit être rattaché au libellé ou situé dans le passage de texte associé au champ.</p>
                    <p style={{ marginBottom: '8px' }}>Par ailleurs, s'il s'agit d'une erreur de type ou format, l'information est retranscrite dans le message d'erreur avec des exemples de valeurs attendues autre que celle de l'aide à la saisie.</p>
                    <p style={{ fontSize: '13px', color: '#0C41BD' }}>
                      <a href="https://www.accede-web.com/notices/html-et-css/formulaires/integrer-les-messages-derreur-et-les-suggestions-de-correction-directement-dans-les-balises-label/" 
                         target="_blank" style={{color:'#0C41BD'}}>
                        Documentation accede-web
                      </a>
                    </p>
                  </div>
                  
                  <div style={{ backgroundColor: '#f5f5f5', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
                    <p style={{ fontWeight: 'bold', marginBottom: '8px' }}>Spécificités des champs de mot de passe</p>
                    <p style={{ marginBottom: '8px' }}>Le copier-coller doit être possible dans un champ d'authentification. Cela permet notamment de faciliter l'utilisation d'un gestionnaire de mot de passe.</p>
                    <p style={{ marginBottom: '16px', fontSize: '13px', color: '#0C41BD' }}>
                      <a href="https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html" 
                         target="_blank" style={{color:'#0C41BD'}}>
                        Documentation W3C
                      </a>
                    </p>
                    <p style={{ marginBottom: '8px' }}>Il faut pouvoir démasquer le mot de passe lors de la saisie. Cela permet d'améliorer les chances de réussite pour certaines personnes souffrant de troubles cognitifs ou ayant des difficultés à saisir correctement un mot de passe.</p>
                    <p style={{ fontSize: '13px', color: '#0C41BD' }}>
                      <a href="https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html" 
                         target="_blank" style={{color:'#0C41BD'}}>
                        Documentation W3C
                      </a>
                    </p>
                  </div>
                </div>