13829138100

Committed 13 Mar 2025 07:18AM UTC coverage: 30.051%. Remained the same

Build # 13829138100

Build Type

push

github

Committed by

web-flow

Commit Message

Formulaire de mise à jour d'étiquette (#1311)

* feat(tag): formulaire de mise à jour

* fix(a11y): assigne un id automatiquement à un champ de formulaire

Erreur d'accessibilité repérée grâce aux tests unitaires.

---------

Co-authored-by: Thomas Parisot <thom4parisot@users.noreply.github.com>

Coverage Stats

429 of 641 branches covered (66.93%)

Branch coverage included in aggregate %.

3 of 43 new or added lines in 4 files covered. (6.98%)

27 existing lines in 3 files now uncovered.

4148 of 14590 relevant lines covered (28.43%)

2.06 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

85.51

/front/src/components/Field.jsx

import clsx from 'clsx'
import React, { forwardRef, useEffect, useId, useRef } from 'react'
import styles from './field.module.scss'

export default forwardRef(function Field(
  {
    hasError,
    className,
    prefix,
    children,
    label,
    id = useId(),
    type,
    autoFocus = false,
    ...otherProps
  },
  forwardedRef
) {
  const inputRef = forwardedRef ?? useRef()
  const classNames = clsx(
    styles.field,
    prefix && styles.withPrefix,
    'control-field',
    className && className,
    hasError && styles.error
  )

  const computedStyles = { '--chars-count': prefix?.length }
  useEffect(() => {
    if (autoFocus) {
      inputRef.current.focus()
    }
  }, [])

  return (
    <div className={classNames}>
      {label && <label htmlFor={id}>{label}</label>}
      <div
        className={clsx('control', otherProps.icon && 'has-icons-left')}
        style={computedStyles}
      >
        {children && { ...children }}
        {!children && (
          <>
            {prefix && <span className={styles.prefix}>{prefix}</span>}
            <input
              {...otherProps}
              className="input"
              type={type || 'text'}
              id={id}
              ref={inputRef}
            />
            {otherProps.icon && (
              <span className="icon is-small is-left">
                <otherProps.icon />
              </span>
            )}
          </>
        )}
      </div>
    </div>
  )
})

1	import clsx from 'clsx'	1✔
2	import React, { forwardRef, useEffect, useId, useRef } from 'react'	1✔
3	import styles from './field.module.scss'	1✔
4
5	export default forwardRef(function Field(	1✔
6	{	109✔
7	hasError,	109✔
8	className,	109✔
9	prefix,	109✔
10	children,	109✔
11	label,	109✔
12	id = useId(),	109✔
13	type,	109✔
14	autoFocus = false,	109✔
15	...otherProps	109✔
16	},	109✔
17	forwardedRef	109✔
18	) {	109✔
19	const inputRef = forwardedRef ?? useRef()	109✔
20	const classNames = clsx(	109✔
21	styles.field,	109✔
22	prefix && styles.withPrefix,	109!
23	'control-field',	109✔
24	className && className,	109✔
25	hasError && styles.error	109!
26	)	109✔
27
28	const computedStyles = { '--chars-count': prefix?.length }	109!
29	useEffect(() => {	109✔
30	if (autoFocus) {	20✔
31	inputRef.current.focus()	2✔
32	}	2✔
33	}, [])	109✔
34
35	return (	109✔
36	<div className={classNames}>	109✔
37	{label && <label htmlFor={id}>{label}</label>}	109✔
38	<div	109✔
39	className={clsx('control', otherProps.icon && 'has-icons-left')}	109!
40	style={computedStyles}	109✔
41	>
42	{children && { ...children }}	109!
43	{!children && (	109✔
44	<>	109✔
45	{prefix && <span className={styles.prefix}>{prefix}</span>}	109!
46	<input	109✔
47	{...otherProps}	109✔
48	className="input"	109✔
49	type={type \|\| 'text'}	109✔
50	id={id}	109✔
51	ref={inputRef}	109✔
52	/>	109✔
53	{otherProps.icon && (	109!
NEW 54	<span className="icon is-small is-left">	×
55	<otherProps.icon />	×
56	</span>	×
57	)}
58	</>	109✔
59	)}
60	</div>	109✔
61	</div>	109✔
62	)
63	})	109✔

EcrituresNumeriques / stylo / 13829138100

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous