diff --git a/components/gc-chckbxrdio/_base.scss b/components/gc-chckbxrdio/_base.scss index cdabbe5573..8a809790d7 100644 --- a/components/gc-chckbxrdio/_base.scss +++ b/components/gc-chckbxrdio/_base.scss @@ -38,14 +38,9 @@ fieldset.gc-chckbxrdio { input[type="radio"], input[type="checkbox"] { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + margin-left: 10px; + opacity: 0; + z-index: 2; &[disabled] + label { cursor: not-allowed; @@ -77,6 +72,14 @@ fieldset.gc-chckbxrdio { } } + &:hover { + cursor: pointer; + + + label::before { + @include chckbxrdio-hover; + } + } + &:focus + label::before { @include chckbxrdio-focus; } @@ -150,3 +153,33 @@ fieldset.gc-chckbxrdio { } } } +@media (prefers-contrast: more) { + .gc-chckbxrdio { + input[type=checkbox] { + &:focus+label { + &::before { + border: 5px double #000; + } + } + } + input[type=radio] { + &:focus+label { + &::before { + border: 5px double #000; + } + } + } + input[type="radio"] { + &:checked { + + { + label { + &::before { + outline: 10px solid #444; + outline-offset: -20px; + } + } + } + } + } + } +} diff --git a/components/gc-chckbxrdio/gc-chckbxrdio-doc-en.html b/components/gc-chckbxrdio/gc-chckbxrdio-doc-en.html index 2ab87eb2fb..cf661af8d2 100644 --- a/components/gc-chckbxrdio/gc-chckbxrdio-doc-en.html +++ b/components/gc-chckbxrdio/gc-chckbxrdio-doc-en.html @@ -64,7 +64,7 @@

How to implement

Evaluation and report

There is no evaluation and report available for this component.

-

API (Version 1.0)

+

API (Version 1.0.1)

@@ -75,7 +75,7 @@

API (Version 1.0)

- +
CSS Class
Version 1.0 Version 1.0Version 1.0Version 1.0.1 n.a.
@@ -120,7 +120,7 @@

Variant: Tickbox (.checkbox.gc-chckbxrdio)

<label for="template">Template</label> </div> -

Visual rendering (v1.0)

+

Visual rendering (v1.0.1)

Default

Check box and radio
@@ -161,6 +161,13 @@

Tickbox

Version notes
+
Version 1.0.1
+
+
    +
  • Fixed radio buttons UI for users leveraging the high-contrast feature. Note: High-contrast functionality is not considered as essential component behavior (not included in the API).
  • +
  • Fixed display of hidden inputs so that they are accessible through Dragon Naturally Speak.
  • +
+
Version 1.0
    diff --git a/components/gc-chckbxrdio/gc-chckbxrdio-doc-fr.html b/components/gc-chckbxrdio/gc-chckbxrdio-doc-fr.html index f82d9e3a59..ed5c46bdf4 100644 --- a/components/gc-chckbxrdio/gc-chckbxrdio-doc-fr.html +++ b/components/gc-chckbxrdio/gc-chckbxrdio-doc-fr.html @@ -64,7 +64,7 @@

    Exemples pratiques

    Évaluation et rapport

    Il n'y a pas d'évaluation et de rapport disponible pour ce composant.

    -

    API (Version 1.0)

    +

    API (Version 1.0.1)

    @@ -75,7 +75,7 @@

    API (Version 1.0)

    - +
    Classe CSS
    Version 1.0 Version 1.0Version 1.0Version 1.0.1 s.o.
    @@ -117,7 +117,7 @@

    Variation : Tickbox (.checkbox.gc-chckbxrdio)

    <label for="gabarit">Gabarit</label> </div> -

    Rendu visuel (v1.0)

    +

    Rendu visuel (v1.0.1)

    Base

    Cases à cocher et boutons radio
    @@ -158,6 +158,13 @@

    Tickbox

    Notes sur les versions
    +
    Version 1.0.1
    +
    +
      +
    • Support de la fonctionnalité de contraste élevé pour les boutons radios. Note: la fonctionnalité de contraste élevé n'est pas considérée comme comportement essentiel de la composante (n'est pas inclut dans l'API).
    • +
    • Les boutons radios et cases à cocher invisibles sont maintenant accessibles via Dragon Naturally Speak.
    • +
    +
    Version 1.0