Fix accesibilities bugs

rich-id · Feb 22, 2022 · 40f18b0 · 40f18b0
1 parent 2a1de1a
commit 40f18b0
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 39 deletions.
diff --git a/elm/CookiesRegulation.elm b/elm/CookiesRegulation.elm
@@ -2,7 +2,7 @@ port module CookiesRegulation exposing (main)
 
 import Bool.Extra as Bool
 import Browser
-import Browser.Dom exposing (Error, Viewport, getViewportOf)
+import Browser.Dom as Dom exposing (Error, Viewport, getViewportOf)
 import Browser.Events exposing (onResize)
 import Dict exposing (Dict)
 import Html exposing (Attribute, Html, div)
@@ -90,15 +90,17 @@ init flags =
             needUserAction notMandatoryServices flags.preferences
 
         initialBannerState =
-            if (not (Dict.isEmpty notMandatoryServices)) && needUserAction_ then
+            if not (Dict.isEmpty notMandatoryServices) && needUserAction_ then
                 BannerNeedOpen
-            else if (not (Dict.isEmpty notMandatoryServices)) && not needUserAction_ then
+
+            else if not (Dict.isEmpty notMandatoryServices) && not needUserAction_ then
                 BannerClosed
+
             else if Dict.isEmpty notMandatoryServices && not flags.isCookiePresent then
                 BannerNeedOpen
+
             else
                 BannerClosed
-
     in
     ( { website = flags.config.website
       , modal = flags.config.modal
@@ -166,10 +168,13 @@ needUserAction services preferences =
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
+        MsgFocus _ ->
+            ( model, Cmd.none )
+
         MsgOpenModal ->
             ( model
                 |> openModalAction
-            , Cmd.batch [ modalOpened (), modalBodySizeCmd ]
+            , Cmd.batch [ modalOpened (), modalBodySizeCmd, Dom.focus "cookies-regulation-modal" |> Task.attempt MsgFocus ]
             )
 
         MsgCloseModal ->
@@ -260,6 +265,7 @@ addCookie : Model -> Model
 addCookie model =
     { model | isCookiePresent = True }
 
+
 setAllServicesEnabledAction : Model -> Model
 setAllServicesEnabledAction model =
     { model | notMandatoryServices = Dict.map (\_ service -> { service | enabled = True }) model.notMandatoryServices }
@@ -305,6 +311,8 @@ applyServiceStatusChanges model =
     , Cmd.batch ([ setPreferences ( buildPreferencesForSave model, hasRejectedService_ ) ] ++ loadServicesCmds)
     )
 
+
+
 -- View
 
 

diff --git a/elm/Internal/Button.elm b/elm/Internal/Button.elm
@@ -1,7 +1,7 @@
 module Internal.Button exposing (ButtonType(..), view)
 
 import Html exposing (Attribute, Html, button, text)
-import Html.Attributes exposing (class)
+import Html.Attributes exposing (class, type_)
 import Html.Events exposing (onClick)
 import Internal.CookiesRegulationData exposing (Model, Msg)
 import Internal.Helpers exposing (..)
@@ -23,9 +23,10 @@ type ButtonType
 view : ButtonConfig Msg -> Html Msg
 view config =
     button
-        [ class "cookies-regulation-button"
+        [ type_ "button"
+        , class "cookies-regulation-button"
         , class "cookies-regulation-button-secondary" |> attrWhen (config.type_ == Secondary)
         , class "cookies-regulation-button-disabled" |> attrWhen config.disabled
-        , onClick config.msg
+        , onClick config.msg |> attrWhen (not config.disabled)
         ]
         [ text config.label ]
diff --git a/elm/Internal/CookiesRegulationBanner.elm b/elm/Internal/CookiesRegulationBanner.elm
@@ -1,16 +1,14 @@
 module Internal.CookiesRegulationBanner exposing (view)
 
-import Html exposing (Attribute, Html, a, div, span, text)
-import Html.Attributes exposing (class, href, target)
-import Html.Events as Events
+import Html exposing (Attribute, Html, a, button, div, span, text)
+import Html.Attributes exposing (attribute, class, href, id, target, type_)
+import Html.Events as Events exposing (onClick)
 import Internal.Button as Button
 import Internal.CookiesRegulationData exposing (BannerState(..), Model, Msg(..))
 import Internal.Helpers exposing (..)
+import Internal.Picto as Picto
 import Internal.Translations as Trans
 import Json.Decode as Decode
-import Html.Events exposing (onClick)
-import Internal.Picto as Picto
-import Html.Attributes exposing (id)
 
 
 view : Model -> Html Msg
@@ -36,7 +34,7 @@ view model =
                     ]
             , htmlWhen model.noConsent <|
                 div [ class "cookies-regulation-banner-contents" ]
-                    [ span [ class "cookies-regulation-description" ] [ text <| Trans.banner_cookies_no_consent model.locale]
+                    [ span [ class "cookies-regulation-description" ] [ text <| Trans.banner_cookies_no_consent model.locale ]
                     , Button.view { label = Trans.banner_cookies_button_details model.locale, type_ = Button.Secondary, disabled = False, msg = MsgOpenModal }
                     , a
                         [ class "cookies-regulation-privacy-policy"
@@ -45,7 +43,19 @@ view model =
                         ]
                         [ text model.privacyPolicy.label ]
                     ]
-                ,
-                Picto.close [ id "cookies-regulation-close-banner", onClick (if model.needUserAction then InternalMsgCloseBanner else MsgSave) ]
+            , htmlWhen model.noConsent <|
+                button
+                    [ id "cookies-regulation-close-banner"
+                    , type_ "button"
+                    , attribute "aria-label" (Trans.banner_close model.locale)
+                    , onClick
+                        (if model.needUserAction then
+                            InternalMsgCloseBanner
 
+                         else
+                            MsgSave
+                        )
+                    ]
+                    [ Picto.close []
+                    ]
             ]
diff --git a/elm/Internal/CookiesRegulationData.elm b/elm/Internal/CookiesRegulationData.elm
@@ -1,6 +1,6 @@
 module Internal.CookiesRegulationData exposing (BannerState(..), DecisionMetadata, Flags, FlagsConfiguration, ModalState(..), Model, Msg(..), Preferences, PrivacyPolicy, Service, ServiceId, Services, decodeLocale, serviceConfigurationDecoder)
 
-import Browser.Dom exposing (Error, Viewport)
+import Browser.Dom as Dom exposing (Error, Viewport)
 import Dict exposing (Dict)
 import Internal.Translations exposing (Locale(..))
 import Json.Decode as Decode
@@ -115,7 +115,8 @@ type BannerState
 
 
 type Msg
-    = MsgOpenModal
+    = MsgFocus (Result Dom.Error ())
+    | MsgOpenModal
     | MsgCloseModal
     | MsgBannerAcceptAll
     | MsgBannerRejectAll

diff --git a/elm/Internal/CookiesRegulationModal.elm b/elm/Internal/CookiesRegulationModal.elm
@@ -1,7 +1,7 @@
 module Internal.CookiesRegulationModal exposing (view)
 
 import Dict exposing (Dict)
-import Html exposing (Attribute, Html, a, b, div, p, span, text)
+import Html exposing (Attribute, Html, a, b, button, div, p, span, text)
 import Html.Attributes exposing (class, href, id, style, tabindex, target)
 import Html.Events as Events exposing (onClick)
 import Internal.Button as Button
@@ -17,7 +17,8 @@ view : Model -> Html Msg
 view model =
     div []
         [ div
-            [ class "cookies-regulation-modal"
+            [ id "cookies-regulation-modal"
+            , class "cookies-regulation-modal"
             , class "cookies-regulation-show" |> attrWhen (model.modalState == ModalOpened)
             , style "height" "0" |> attrWhen (model.modalState == ModalClosed)
             , Events.on "transitionend" (Decode.succeed InternalMsgCloseModal) |> attrWhen (model.modalState == ModalFadeClose)
@@ -45,7 +46,18 @@ modalHeaderView model =
     div [ class "cookies-regulation-modal-header" ]
         [ div [ class "cookies-regulation-h3" ] [ text (Trans.modal_title model.locale) ]
         , htmlWhenNot model.needUserAction <|
-            Picto.close [ id "cookies-regulation-close", onClick (if model.isCookiePresent then MsgCloseModal else MsgSave) ]
+            button
+                [ id "cookies-regulation-close"
+                , onClick
+                    (if model.isCookiePresent then
+                        MsgCloseModal
+
+                     else
+                        MsgSave
+                    )
+                ]
+                [ Picto.close []
+                ]
         ]
 
 
@@ -59,10 +71,11 @@ modalBodyView model =
         [ div [ class "cookies-regulation-modal-body-content" ]
             [ div [ class "cookies-regulation-modal-body-content-top" ]
                 [ p [ class "cookies-regulation-modal-body-content-header" ]
-                    [  if model.noConsent then
-                            text <| model.modal.headerWithoutConsent
-                        else
-                            text <| model.modal.header
+                    [ if model.noConsent then
+                        text <| model.modal.headerWithoutConsent
+
+                      else
+                        text <| model.modal.header
                     ]
                 , relatedCompaniesView model
                 , htmlWhen (not model.noConsent) <| cookieDurationView model
@@ -78,7 +91,8 @@ modalBodyView model =
 modalFooterView : Model -> Html Msg
 modalFooterView model =
     let
-        _ = Debug.log "test" (not (hasAcceptationChange model) && not model.needUserAction)
+        _ =
+            Debug.log "test" (not (hasAcceptationChange model) && not model.needUserAction)
     in
     div [ class "cookies-regulation-modal-footer" ]
         [ htmlWhen (not model.noConsent) <|
@@ -90,11 +104,16 @@ modalFooterView model =
                 }
         , htmlWhen model.noConsent <|
             Button.view
-                 { label = Trans.banner_cookies_modal_button_no_consent_close model.locale
-                 , type_ = Button.Primary
-                 , disabled = False
-                 , msg = if model.isCookiePresent then MsgCloseModal else MsgSave
-                 }
+                { label = Trans.banner_cookies_modal_button_no_consent_close model.locale
+                , type_ = Button.Primary
+                , disabled = False
+                , msg =
+                    if model.isCookiePresent then
+                        MsgCloseModal
+
+                    else
+                        MsgSave
+                }
         , htmlJust model.lastDecisionMetadata <|
             decisionMetadataView
         ]

diff --git a/elm/Internal/Translations.elm b/elm/Internal/Translations.elm
@@ -1,4 +1,4 @@
-module Internal.Translations exposing (Locale(..), banner_cookies_no_consent, banner_cookies_modal_button_no_consent_close, banner_cookies_button_details, banner_cookies_regulation, banner_customise, modal_accept_all, modal_cookie_conservation, modal_cookies_with_agreement, modal_cookies_without_agreement, modal_reject_all, modal_related_companies_link_label, modal_related_companies_use_cookies, modal_save_my_choices, modal_title, modal_user_choices_change, modal_user_choices_conservation_duration)
+module Internal.Translations exposing (Locale(..), banner_close, banner_cookies_button_details, banner_cookies_modal_button_no_consent_close, banner_cookies_no_consent, banner_cookies_regulation, banner_customise, modal_accept_all, modal_cookie_conservation, modal_cookies_with_agreement, modal_cookies_without_agreement, modal_reject_all, modal_related_companies_link_label, modal_related_companies_use_cookies, modal_save_my_choices, modal_title, modal_user_choices_change, modal_user_choices_conservation_duration)
 
 
 type Locale
@@ -16,6 +16,16 @@ banner_cookies_regulation locale =
             "Contrôlez les cookies que nous utilisons pour ce site..."
 
 
+banner_close : Locale -> String
+banner_close locale =
+    case locale of
+        En ->
+            "Close banner"
+
+        Fr ->
+            "Fermer"
+
+
 banner_customise : Locale -> String
 banner_customise locale =
     case locale of
@@ -169,6 +179,7 @@ banner_cookies_no_consent locale =
         Fr ->
             "Votre vie privée nous importe ! Nous n’utilisons aucun cookie indiscret nécessitant votre consentement."
 
+
 banner_cookies_button_details : Locale -> String
 banner_cookies_button_details locale =
     case locale of
@@ -186,4 +197,4 @@ banner_cookies_modal_button_no_consent_close locale =
             "Close"
 
         Fr ->
-            "Fermer"
+            "Fermer"
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rich-id/cookies-regulation",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "scripts": {
     "build": "parcel build js/cookies-regulation.js",
     "build-release": "parcel build --no-source-maps js/cookies-regulation.js",

diff --git a/scss/cookies-regulation.scss b/scss/cookies-regulation.scss
@@ -97,9 +97,12 @@
         z-index: 2147483644;
 
         #cookies-regulation-close-banner {
+            background: transparent;
+            border: none;
             position: absolute;
             right: 30px;
-            top: 24px;
+            top: 19px;
+            padding-top: 5px;
 
             #cookies-regulation-close-icon {
                 fill: var(--rich-id-cookies-regulation-white) !important;
@@ -239,10 +242,13 @@
                     text-align: center;
                     text-transform: uppercase;
 
-                    svg {
+                    #cookies-regulation-close {
+                        background: transparent;
+                        border: none;
+                        padding-top: 5px;
                         position: absolute;
                         right: 0;
-                        top: 24px;
+                        top: 19px;
                     }
                 }
 
@@ -415,7 +421,6 @@
             height: 24px;
             margin: 0;
             min-width: 36px;
-            outline: none !important;
             width: 36px;
 
             &:checked {