From 40f18b057222316116aceb2bc25fcfd384b19a2d Mon Sep 17 00:00:00 2001 From: Dumazeau Date: Tue, 22 Feb 2022 12:17:00 +0100 Subject: [PATCH] Fix accesibilities bugs --- elm/CookiesRegulation.elm | 18 +++++++--- elm/Internal/Button.elm | 7 ++-- elm/Internal/CookiesRegulationBanner.elm | 28 ++++++++++----- elm/Internal/CookiesRegulationData.elm | 5 +-- elm/Internal/CookiesRegulationModal.elm | 45 +++++++++++++++++------- elm/Internal/Translations.elm | 15 ++++++-- package.json | 2 +- scss/cookies-regulation.scss | 13 ++++--- 8 files changed, 94 insertions(+), 39 deletions(-) diff --git a/elm/CookiesRegulation.elm b/elm/CookiesRegulation.elm index 8279a3b..6c7f8ff 100644 --- 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 index d0213d3..579c3b5 100644 --- 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 index 1103bc4..bc0eb23 100644 --- 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 index e77cb27..84c0be5 100644 --- 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 index 89e4fa0..3032172 100644 --- 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 index 70c5631..4314cfe 100644 --- 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" \ No newline at end of file + "Fermer" diff --git a/package.json b/package.json index 225c9b1..9c999cb 100644 --- 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 index 63e7232..652c9a6 100644 --- 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 {