diff --git a/src/en/components/date-input/base.md b/src/en/components/date-input/base.md index 0603f4b9d..1b9197d6b 100644 --- a/src/en/components/date-input/base.md +++ b/src/en/components/date-input/base.md @@ -16,6 +16,6 @@ A date input is a space to enter a known date. {% enddocLinks %} {% componentPreview "Date input component preview" %} - + {% endcomponentPreview %} diff --git a/src/en/components/date-input/code.md b/src/en/components/date-input/code.md index a021569ed..c0685f9d6 100644 --- a/src/en/components/date-input/code.md +++ b/src/en/components/date-input/code.md @@ -10,7 +10,7 @@ date: "git Last Modified" Use a date input to collect a date from a person when you’re expecting them to enter a date they already know or can verify. -## Coding and accessibility for Date input +## Coding and accessibility for date inputs ### Apply required attributes For the date input to function properly, always use the following attributes with ``: diff --git a/src/en/components/date-input/design.md b/src/en/components/date-input/design.md index 47c2362e2..85d141738 100644 --- a/src/en/components/date-input/design.md +++ b/src/en/components/date-input/design.md @@ -9,19 +9,19 @@ date: "git Last Modified" ## Date input anatomy
    -
  1. The fieldset legend states the information a person should enter in the date input field. Text is left-aligned and in sentence case (only the initial letter is capitalized). For the date input component, the fieldset would typically be labelled as “date” or with the specific date type sought. The hint text shows the format of the date.
    2. -
  2. The month label for the month select field.
    3. -
  3. The month select field provides a predefined, chronological list of months for a person to select from.
    4. -
  4. The day label for the day input.
    5. -
  5. The day input field. Input can be 1 or 2 digits.
    6. -
  6. The year label for the year input field.
    7. -
  7. The year input field. Input is 4 digits only.
    8. +
  8. The fieldset legend states the information a person should enter in the date input field. Text is left-aligned and in sentence case (only the initial letter is capitalized). For the date input component, the fieldset is typically labelled as "date" or with the specific date type sought. The hint text shows the format of the date.
    9. +
  9. The month label identifies the month select field.
    10. +
  10. The month select field field provides a predefined, chronological list of months for a person to select from.
    11. +
  11. The day label identifies the day input.
    12. +
  12. The day input field can be 1 or 2 digits.
    13. +
  13. The year label identifies the year input field.
    14. +
  14. The year input field is limited to 4 digits.
-An image of the date input anatomy. +A date input anatomy represented by 6 elements: the fieldset legend, the month label, the month select field, the day label, the day input field, the year label, and the year input field. -## Accessibility and Design +## Design and accessibility for date inputs ### Support task success with hint text - Use the hint text in the fieldset legend to help a person understand the format they can use to enter the date. For example, showing a single digit number without a leading zero, like September 7, rather than September 07 shows that a leading zero is not needed. diff --git a/src/en/components/date-input/use-case.md b/src/en/components/date-input/use-case.md index 413063355..bce51364f 100644 --- a/src/en/components/date-input/use-case.md +++ b/src/en/components/date-input/use-case.md @@ -17,7 +17,7 @@ permalink: /en/components/date-input/ date: "git Last Modified" --- -## Problems component solves +## Problems date inputs solves Take a look at what date inputs do to see if they fit the problem you're solving for. Then select the best date input type for the use case you need to meet. @@ -32,10 +32,10 @@ Use a date input to gather a date from a person when you're expecting them to wr

Related components

Input when you want someone to input only a year or only a day of the month. + Select when you want someone to input only a month. -
- Date picker when you want someone to choose a not-yet-known date, like for appointment scheduling. + Date picker when you want someone to choose a not-yet-known date, like for appointment scheduling. ## Component types @@ -45,5 +45,5 @@ Use a date input to gather a date from a person when you're expecting them to wr ### Month, year format - For a date that does not have a day, like a driver’s licence expiry date. -- For an approximate date, like the date they lost their ID card (month and year) +- For an approximate date, like the date they lost their ID card (month and year). - For a date the person may not know the exact day of. diff --git a/src/fr/composants/champ-de-date/base.md b/src/fr/composants/champ-de-date/base.md index 9e5a738c3..965ba48a8 100644 --- a/src/fr/composants/champ-de-date/base.md +++ b/src/fr/composants/champ-de-date/base.md @@ -16,6 +16,6 @@ Le champ de date est un espace permettant de saisir une date connue. {% enddocLinks %} {% componentPreview "Aperçu du composant de champ de date" %} - + {% endcomponentPreview %} diff --git a/src/fr/composants/champ-de-date/cas-dutilisation.md b/src/fr/composants/champ-de-date/cas-dutilisation.md index 99ec2d000..2aec5f267 100644 --- a/src/fr/composants/champ-de-date/cas-dutilisation.md +++ b/src/fr/composants/champ-de-date/cas-dutilisation.md @@ -31,10 +31,11 @@ Utilisez un champ de date pour recueillir une date lorsque vous attendez d’une

Composants connexes

- Champs de saisie lorsque vous voulez que la personne saisisse seulement une année ou un jour du mois. - Sélection lorsque vous voulez que la personne saisisse seulement un mois. -
- Sélecteur de date lorsque vous voulez que la personne choisisse une date qui n’est pas encore connue, par exemple pour planifier un rendez-vous. + Champs de saisie : lorsque vous voulez que la personne saisisse seulement une année ou un jour du mois. + + Sélection : lorsque vous voulez que la personne saisisse seulement un mois. + + Sélecteur de date : lorsque vous voulez que la personne choisisse une date qui n’est pas encore connue, par exemple pour planifier un rendez-vous.
diff --git a/src/fr/composants/champ-de-date/code.md b/src/fr/composants/champ-de-date/code.md index 34a0b3b82..5933bd0e5 100644 --- a/src/fr/composants/champ-de-date/code.md +++ b/src/fr/composants/champ-de-date/code.md @@ -9,7 +9,7 @@ date: "git Last Modified" ## Créer un champ de date Utilisez un champ de date pour recueillir une date lorsque vous attendez d’une personne une date qu’elle connaît déjà ou qu’elle peut vérifier. -## Accessibilité et codage des cases un champ de date +## Codage et accessibilité des champs de date ### Appliquez les attributs requis - Pour que le champ de date fonctionne correctement, utilisez toujours les attributs suivants avec `` : diff --git a/src/fr/composants/champ-de-date/design.md b/src/fr/composants/champ-de-date/design.md index c7f3ece9a..30309aa81 100644 --- a/src/fr/composants/champ-de-date/design.md +++ b/src/fr/composants/champ-de-date/design.md @@ -9,16 +9,16 @@ date: "git Last Modified" ## Structure de la champ de date
    -
  1. La légende du jeu de champs indique l’information qu’une personne doit saisir dans le champ de date. Le texte est aligné à gauche et porte une majuscule initiale. Pour le champ de date, la légende sera généralement intitulée « Date » ou mentionnera le type de date précis recherché. Le texte explicatif indique le format de la date.
    2. -
  2. Étiquette Mois associée au champ de sélection du mois.
    3. -
  3. Le champ de sélection du mois offre une liste prédéfinie et chronologique des mois, parmi lesquels une personne fait une sélection.
    4. -
  4. Étiquette Jour associée au champ de saisie du jour.
    5. -
  5. Champ de saisie du jour. Le jour peut comporter 1 ou 2 chiffres.
    6. -
  6. Étiquette Année associée au champ de saisie de l’année.
    7. -
  7. Champ de saisie de l’année. L’année comporte 4 chiffres.
    8. +
  8. La légende du jeu de champs indique l’information qu’une personne doit saisir dans le champ de date. Le texte est aligné à gauche et porte une majuscule initiale. Pour le champ de date, la légende sera généralement intitulée « Date » ou mentionnera le type de date précis recherché. Le texte explicatif indique le format de la date.
    9. +
  9. L’étiquette Jour identifie le champ de saisie du jour.
    10. +
  10. Le champ de saisie du jour peut comporter 1 ou 2 chiffres.
    11. +
  11. L’étiquette Mois identifie le champ de sélection du mois.
    12. +
  12. Le champ de sélection du mois offre une liste prédéfinie et chronologique des mois, parmi lesquels une personne fait une sélection.
    13. +
  13. L’étiquette Année identifie le champ de saisie de l’année.
    14. +
  14. Le champ de saisie de l’année comporte 4 chiffres.
-L'anatomie de la champ de date. +L’anatomie du champ de date représentée par 6 éléments: la légende du jeu de champs, l’étiquette Jour, le champ de saisir du jour, l’étiquette Mois, le champ de sélection du mois, l’étiquette année et le champ de saisie de l’année. ## Accessibilité et design des champ de date diff --git a/src/images/en/components/anatomy/gcds-date-input-anatomy.svg b/src/images/en/components/anatomy/gcds-date-input-anatomy.svg index e5d89327c..e51b76dbb 100644 --- a/src/images/en/components/anatomy/gcds-date-input-anatomy.svg +++ b/src/images/en/components/anatomy/gcds-date-input-anatomy.svg @@ -1,5 +1,5 @@ - + @@ -15,84 +15,84 @@ - - - - - + + + + + - + - + - + - + - + - + - + - + - + - + - + - + - - + + - - + + - + - + - + - + - + - + - + - + - + diff --git a/src/images/fr/components/anatomy/gcds-date-input-anatomy.svg b/src/images/fr/components/anatomy/gcds-date-input-anatomy.svg index 3ed317bd7..2ee53768c 100644 --- a/src/images/fr/components/anatomy/gcds-date-input-anatomy.svg +++ b/src/images/fr/components/anatomy/gcds-date-input-anatomy.svg @@ -1,9 +1,7 @@ - - - + @@ -15,84 +13,81 @@ - - - - - + + + + + - + - + - + - + - + - - + + - + - + - + - + - - - - - + + - - + + - + - + - + - + - + - + - + - + - +