Merge pull request #7700 from betagouv/refactor-rgaa-quickwins

Refactor: RGAA quickwins
This commit is contained in:
Colin Darie 2022-08-31 18:21:44 +02:00 committed by GitHub
commit e0b292e210
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 80 additions and 84 deletions

View file

@ -9,12 +9,7 @@ $contact-padding: $default-space * 2;
padding-bottom: $contact-padding;
}
.hidden {
display: none;
}
ul {
margin-bottom: $default-space;
}
}

View file

@ -30,7 +30,8 @@
color: $dark-red;
}
label {
label,
legend.form-label {
font-size: 18px;
margin-bottom: $default-padding;
display: block;

View file

@ -30,6 +30,12 @@ module ApplicationHelper
class_names.join(' ')
end
def flash_role(level)
return "status" if level == "notice"
'alert'
end
def react_component(name, props = {}, html = {})
tag.div(**html.merge(data: { controller: 'react', react_component_value: name, react_props_value: props.to_json }))
end

View file

@ -17,7 +17,12 @@ export function FlashMessage({
invariant(element, 'Flash messages root element not found');
return createPortal(
<div className="flash_message center">
<div className={flashClassName(level, sticky, fixed)}>{message}</div>
<div
className={flashClassName(level, sticky, fixed)}
role={roleName(level)}
>
{message}
</div>
</div>,
element
);
@ -35,3 +40,7 @@ function flashClassName(level: string, sticky = false, fixed = false) {
}
return className.join(' ');
}
function roleName(level: string) {
return level == 'notice' ? 'status' : 'alert';
}

View file

@ -1,5 +1,5 @@
//
// This content is inspired by w3c aria example
// This content is inspired by w3c aria example, rewritten for better RGAA compatibility.
// https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html
//
@ -20,22 +20,21 @@ class ButtonExpand {
this.controlledNode = document.getElementById(id);
}
this.domNode.setAttribute('aria-expanded', 'false');
this.radioInput = this.domNode.querySelector('input[type="radio"]');
this.hideContent();
this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
this.domNode.addEventListener('click', this.handleClick.bind(this));
this.domNode.addEventListener('focus', this.handleFocus.bind(this));
this.domNode.addEventListener('blur', this.handleBlur.bind(this));
}
showContent() {
this.domNode.setAttribute('aria-expanded', 'true');
this.domNode.classList.add('primary');
this.radioInput.checked = true;
if (this.controlledNode) {
this.controlledNode.setAttribute('aria-hidden', 'false');
this.controlledNode.classList.remove('hidden');
}
this.formInput.value = this.domNode.getAttribute('data-question-type');
this.allButtons.forEach((b) => {
if (b != this) {
@ -45,18 +44,22 @@ class ButtonExpand {
}
hideContent() {
this.domNode.setAttribute('aria-expanded', 'false');
this.domNode.classList.remove('primary');
this.radioInput.checked = false;
if (this.controlledNode) {
this.controlledNode.setAttribute('aria-hidden', 'true');
this.controlledNode.classList.add('hidden');
}
}
toggleExpand() {
if (this.domNode.getAttribute('aria-expanded') === 'true') {
this.hideContent();
} else {
if (
this.controlledNode &&
this.controlledNode.getAttribute('aria-hidden') === 'true'
) {
this.showContent();
} else {
this.hideContent();
}
}
@ -64,14 +67,10 @@ class ButtonExpand {
this.allButtons = buttons;
}
setFormInput(formInput) {
this.formInput = formInput;
}
handleKeydown() {
handleKeydown(event) {
switch (event.keyCode) {
case this.keyCode.RETURN:
this.toggleExpand();
this.showContent();
event.stopPropagation();
event.preventDefault();
@ -83,17 +82,11 @@ class ButtonExpand {
}
handleClick() {
event.stopPropagation();
event.preventDefault();
this.toggleExpand();
}
// NOTE: click event is also fired on input and label activations
// ie., not necessarily by a mouse click but any user inputs, like keyboard navigation with arrows keys.
// Cf https://www.w3.org/TR/2012/WD-html5-20121025/content-models.html#interactive-content
handleFocus = function () {
this.domNode.classList.add('focus');
};
handleBlur() {
this.domNode.classList.remove('focus');
this.showContent();
}
}
@ -103,18 +96,14 @@ if (document.querySelector('#contact-form')) {
window.addEventListener(
'DOMContentLoaded',
function () {
var buttons = document.querySelectorAll(
'button[aria-expanded][aria-controls], button.button-without-hint'
);
var buttons = document.querySelectorAll('fieldset[name=type] label');
var expandButtons = [];
var formInput = document.querySelector('form input#type');
buttons.forEach((button) => {
var be = new ButtonExpand(button);
expandButtons.push(be);
});
expandButtons.forEach((button) => button.setAllButtons(expandButtons));
expandButtons.forEach((button) => button.setFormInput(formInput));
},
false
);

View file

@ -1,6 +1,6 @@
.dropdown.header-menu-opener{ data: { controller: 'menu-button' } }
%button.button.dropdown-button.icon-only.header-menu-button{ title: "Mon compte", data: { menu_button_target: 'button' } }
.hidden Mon compte
%span.hidden= t("my_account", scope: [:layouts])
= image_tag "icons/account-circle.svg", alt: 'Mon compte', width: 24, height: 24, loading: 'lazy'
%ul.header-menu.dropdown-content#mon_compte_menu{ data: { menu_button_target: 'menu' } }
%li

View file

@ -5,10 +5,10 @@
- sticky = defined?(sticky) ? sticky : false
- fixed = defined?(fixed) ? fixed : false
- if value.class == Array
.alert{ class: flash_class(key, sticky: sticky, fixed: fixed) }
.alert{ class: flash_class(key, sticky: sticky, fixed: fixed), role: flash_role(key) }
- value.each do |message|
= sanitize(message)
%br
- else
.alert{ class: flash_class(key, sticky: sticky, fixed: fixed) }
.alert{ class: flash_class(key, sticky: sticky, fixed: fixed), role: flash_role(key) }
= sanitize(value)

View file

@ -1,7 +1,8 @@
.dropdown.locale-dropdown.header-menu-opener{ data: { controller: 'menu-button' } }
%button.button.dropdown-button.icon-only.header-menu-button{ title: t('.languages'), data: { menu_button_target: 'button' } }
.hidden t('.languages')
= image_tag "icons/translate-icon.svg", alt: t('.languages'), width: 24, height: 24, lazy: true, aria: { hidden: true }
%span.hidden
= t('.languages')
= image_tag "icons/translate-icon.svg", alt: t('.languages'), width: 24, height: 24, loading: :lazy, aria: { hidden: true }
%ul.header-menu.dropdown-content{ data: { menu_button_target: 'menu' } }
%li
= active_link_to save_locale_path(locale: :fr), method: :post, class: "menu-item menu-link", active: I18n.locale == :fr do

View file

@ -34,6 +34,8 @@
= vite_stylesheet_tag 'application', media: 'all'
= stylesheet_link_tag 'application', media: 'all'
= yield(:invisible_captcha_styles)
%body{ id: content_for(:page_id), class: browser.platform.ios? ? 'ios' : nil }
.page-wrapper
= render partial: "layouts/outdated_browser_banner"
@ -44,7 +46,7 @@
Env Test
= render partial: "layouts/header"
%main
%main{ role: :main }
= render partial: "layouts/flash_messages"
= content_for?(:content) ? yield(:content) : yield

View file

@ -1,5 +1,5 @@
.no-procedure
= image_tag "landing/hero/dematerialiser.svg", class: "paperless-logo", alt: "moins de papier"
= image_tag "landing/hero/dematerialiser.svg", class: "paperless-logo", alt: ""
.baseline.center
%p
%span.simple= t('.line1')

View file

@ -7,7 +7,7 @@
%h1.new-h1
= t('.contact')
= form_tag contact_path, method: :post, multipart: true, class: 'form' do |f|
= form_tag contact_path, method: :post, multipart: true, class: 'form' do
.description
%p= t('.intro_html')
@ -21,26 +21,24 @@
%span.mandatory *
= text_field_tag :email, params[:email], required: true, autocomplete: 'email'
.contact-champ
= label_tag :type do
%fieldset.radios.vertical{ name: "type" }
%legend.form-label
= t('.your_question')
= hidden_field_tag :type, params[:type]
%span.mandatory *
%dl
- @options.each do |(question, question_type, link)|
%dt
- if link.present?
%button.button{ 'aria-expanded': 'false', 'aria-controls': question_type, data: { 'question-type': question_type } }= question
- else
%button.button.button-without-hint{ data: { 'question-type': question_type } }= question
= label_tag "type_#{question_type}", { 'aria-controls': link ? "card-#{question_type}" : nil } do
= radio_button_tag :type, question_type, false, required: true
= question
- if link.present?
%dd
.support.card.featured.hidden{ id: question_type }
.card-title
= t('.our_answer')
.card-content
-# i18n-tasks-use t("support.index.#{question_type}.answer_html")
= t('answer_html', scope: [:support, :index, question_type], base_url: APPLICATION_BASE_URL, "link_#{question_type}": link)
.support.card.featured.mb-4.ml-5.hidden{ id: "card-#{question_type}", "aria-hidden": true }
.card-title
= t('.our_answer')
.card-content
-# i18n-tasks-use t("support.index.#{question_type}.answer_html")
= t('answer_html', scope: [:support, :index, question_type], base_url: APPLICATION_BASE_URL, "link_#{question_type}": link)
.contact-champ
= label_tag :dossier_id, t('file_number', scope: [:utils])

View file

@ -4,7 +4,7 @@
= render partial: 'root/footer'
#link-sent.container
= image_tag('user/confirmation-email.svg')
= image_tag('user/confirmation-email.svg', "aria-hidden": true)
%h1
= t('views.users.passwords.reset_link_sent.got_it')
%br

View file

@ -1,16 +0,0 @@
- if @dossier
.panel.panel-default
.panel-body
= link_to 'X', users_no_procedure_url, class: 'btn btn-xs', style: 'float: right;'
- if @dossier.procedure.euro_flag
#euro_flag.flag
= image_tag('drapeau_europe.png')
#logo_procedure.flag
= image_tag(dossier.procedure.logo_url)
%h2#titre-procedure.text-info
= @dossier.procedure.libelle
%p.procedure-description
= h string_to_html(@dossier.procedure.description)

View file

@ -4,7 +4,7 @@
= render partial: 'root/footer'
#link-sent.container
= image_tag('user/confirmation-email.svg')
= image_tag('user/confirmation-email.svg', "aria-hidden": true)
%h1 Encore une petite étape :)
%section.link-sent-info

View file

@ -1,4 +1,5 @@
= content_for(:page_id, 'auth')
= content_for(:title, t('metas.signin.title'))
#session-new.auth-form.sign-in-form
@ -8,7 +9,7 @@
= render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path }
= f.label :email, t('views.users.sessions.new.email')
= f.text_field :email, type: :email, autocomplete: 'username', autofocus: true
= f.text_field :email, type: :email, autocomplete: 'email', autofocus: true
= f.label :password, t('views.users.sessions.new.password', min_length: PASSWORD_MIN_LENGTH)
= f.password_field :password, autocomplete: 'current-password'

View file

@ -3,7 +3,7 @@ InvisibleCaptcha.setup do |config|
# config.visual_honeypots = false
# config.timestamp_threshold = 2
config.timestamp_enabled = !Rails.env.test?
# config.injectable_styles = false
config.injectable_styles = true
config.spinner_enabled = !Rails.env.test?
# Leave these unset if you want to use I18n (see below)

View file

@ -65,6 +65,7 @@ en:
line2: to manage dematerialized
line3: administrative forms.
are_you_new: First time on %{app_name}?
my_account: My account
locale_dropdown:
languages: "Languages"
notifications:

View file

@ -55,6 +55,7 @@ fr:
line2: pour gérer les formulaires
line3: administratifs dématérialisés.
are_you_new: Vous êtes nouveau sur %{app_name} ?
my_account: Mon compte
locale_dropdown:
languages: "Langues"
notifications:

View file

@ -0,0 +1,4 @@
en:
metas:
signin:
title: "Sign-in"

View file

@ -0,0 +1,4 @@
fr:
metas:
signin:
title: "Se connecter"