Merge pull request #7700 from betagouv/refactor-rgaa-quickwins
Refactor: RGAA quickwins
This commit is contained in:
commit
e0b292e210
20 changed files with 80 additions and 84 deletions
|
@ -9,12 +9,7 @@ $contact-padding: $default-space * 2;
|
||||||
padding-bottom: $contact-padding;
|
padding-bottom: $contact-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin-bottom: $default-space;
|
margin-bottom: $default-space;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,7 +30,8 @@
|
||||||
color: $dark-red;
|
color: $dark-red;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label,
|
||||||
|
legend.form-label {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin-bottom: $default-padding;
|
margin-bottom: $default-padding;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
@ -30,6 +30,12 @@ module ApplicationHelper
|
||||||
class_names.join(' ')
|
class_names.join(' ')
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def flash_role(level)
|
||||||
|
return "status" if level == "notice"
|
||||||
|
|
||||||
|
'alert'
|
||||||
|
end
|
||||||
|
|
||||||
def react_component(name, props = {}, html = {})
|
def react_component(name, props = {}, html = {})
|
||||||
tag.div(**html.merge(data: { controller: 'react', react_component_value: name, react_props_value: props.to_json }))
|
tag.div(**html.merge(data: { controller: 'react', react_component_value: name, react_props_value: props.to_json }))
|
||||||
end
|
end
|
||||||
|
|
|
@ -17,7 +17,12 @@ export function FlashMessage({
|
||||||
invariant(element, 'Flash messages root element not found');
|
invariant(element, 'Flash messages root element not found');
|
||||||
return createPortal(
|
return createPortal(
|
||||||
<div className="flash_message center">
|
<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>,
|
</div>,
|
||||||
element
|
element
|
||||||
);
|
);
|
||||||
|
@ -35,3 +40,7 @@ function flashClassName(level: string, sticky = false, fixed = false) {
|
||||||
}
|
}
|
||||||
return className.join(' ');
|
return className.join(' ');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function roleName(level: string) {
|
||||||
|
return level == 'notice' ? 'status' : 'alert';
|
||||||
|
}
|
||||||
|
|
|
@ -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
|
// 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.controlledNode = document.getElementById(id);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.domNode.setAttribute('aria-expanded', 'false');
|
this.radioInput = this.domNode.querySelector('input[type="radio"]');
|
||||||
|
|
||||||
this.hideContent();
|
this.hideContent();
|
||||||
|
|
||||||
this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
|
this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
|
||||||
this.domNode.addEventListener('click', this.handleClick.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() {
|
showContent() {
|
||||||
this.domNode.setAttribute('aria-expanded', 'true');
|
this.radioInput.checked = true;
|
||||||
this.domNode.classList.add('primary');
|
|
||||||
if (this.controlledNode) {
|
if (this.controlledNode) {
|
||||||
|
this.controlledNode.setAttribute('aria-hidden', 'false');
|
||||||
this.controlledNode.classList.remove('hidden');
|
this.controlledNode.classList.remove('hidden');
|
||||||
}
|
}
|
||||||
this.formInput.value = this.domNode.getAttribute('data-question-type');
|
|
||||||
|
|
||||||
this.allButtons.forEach((b) => {
|
this.allButtons.forEach((b) => {
|
||||||
if (b != this) {
|
if (b != this) {
|
||||||
|
@ -45,18 +44,22 @@ class ButtonExpand {
|
||||||
}
|
}
|
||||||
|
|
||||||
hideContent() {
|
hideContent() {
|
||||||
this.domNode.setAttribute('aria-expanded', 'false');
|
this.radioInput.checked = false;
|
||||||
this.domNode.classList.remove('primary');
|
|
||||||
if (this.controlledNode) {
|
if (this.controlledNode) {
|
||||||
|
this.controlledNode.setAttribute('aria-hidden', 'true');
|
||||||
this.controlledNode.classList.add('hidden');
|
this.controlledNode.classList.add('hidden');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleExpand() {
|
toggleExpand() {
|
||||||
if (this.domNode.getAttribute('aria-expanded') === 'true') {
|
if (
|
||||||
this.hideContent();
|
this.controlledNode &&
|
||||||
} else {
|
this.controlledNode.getAttribute('aria-hidden') === 'true'
|
||||||
|
) {
|
||||||
this.showContent();
|
this.showContent();
|
||||||
|
} else {
|
||||||
|
this.hideContent();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -64,14 +67,10 @@ class ButtonExpand {
|
||||||
this.allButtons = buttons;
|
this.allButtons = buttons;
|
||||||
}
|
}
|
||||||
|
|
||||||
setFormInput(formInput) {
|
handleKeydown(event) {
|
||||||
this.formInput = formInput;
|
|
||||||
}
|
|
||||||
|
|
||||||
handleKeydown() {
|
|
||||||
switch (event.keyCode) {
|
switch (event.keyCode) {
|
||||||
case this.keyCode.RETURN:
|
case this.keyCode.RETURN:
|
||||||
this.toggleExpand();
|
this.showContent();
|
||||||
|
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
@ -83,17 +82,11 @@ class ButtonExpand {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleClick() {
|
handleClick() {
|
||||||
event.stopPropagation();
|
// NOTE: click event is also fired on input and label activations
|
||||||
event.preventDefault();
|
// ie., not necessarily by a mouse click but any user inputs, like keyboard navigation with arrows keys.
|
||||||
this.toggleExpand();
|
// Cf https://www.w3.org/TR/2012/WD-html5-20121025/content-models.html#interactive-content
|
||||||
}
|
|
||||||
|
|
||||||
handleFocus = function () {
|
this.showContent();
|
||||||
this.domNode.classList.add('focus');
|
|
||||||
};
|
|
||||||
|
|
||||||
handleBlur() {
|
|
||||||
this.domNode.classList.remove('focus');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -103,18 +96,14 @@ if (document.querySelector('#contact-form')) {
|
||||||
window.addEventListener(
|
window.addEventListener(
|
||||||
'DOMContentLoaded',
|
'DOMContentLoaded',
|
||||||
function () {
|
function () {
|
||||||
var buttons = document.querySelectorAll(
|
var buttons = document.querySelectorAll('fieldset[name=type] label');
|
||||||
'button[aria-expanded][aria-controls], button.button-without-hint'
|
|
||||||
);
|
|
||||||
var expandButtons = [];
|
var expandButtons = [];
|
||||||
var formInput = document.querySelector('form input#type');
|
|
||||||
|
|
||||||
buttons.forEach((button) => {
|
buttons.forEach((button) => {
|
||||||
var be = new ButtonExpand(button);
|
var be = new ButtonExpand(button);
|
||||||
expandButtons.push(be);
|
expandButtons.push(be);
|
||||||
});
|
});
|
||||||
expandButtons.forEach((button) => button.setAllButtons(expandButtons));
|
expandButtons.forEach((button) => button.setAllButtons(expandButtons));
|
||||||
expandButtons.forEach((button) => button.setFormInput(formInput));
|
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
.dropdown.header-menu-opener{ data: { controller: 'menu-button' } }
|
.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' } }
|
%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'
|
= 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' } }
|
%ul.header-menu.dropdown-content#mon_compte_menu{ data: { menu_button_target: 'menu' } }
|
||||||
%li
|
%li
|
||||||
|
|
|
@ -5,10 +5,10 @@
|
||||||
- sticky = defined?(sticky) ? sticky : false
|
- sticky = defined?(sticky) ? sticky : false
|
||||||
- fixed = defined?(fixed) ? fixed : false
|
- fixed = defined?(fixed) ? fixed : false
|
||||||
- if value.class == Array
|
- 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|
|
- value.each do |message|
|
||||||
= sanitize(message)
|
= sanitize(message)
|
||||||
%br
|
%br
|
||||||
- else
|
- 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)
|
= sanitize(value)
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
.dropdown.locale-dropdown.header-menu-opener{ data: { controller: 'menu-button' } }
|
.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' } }
|
%button.button.dropdown-button.icon-only.header-menu-button{ title: t('.languages'), data: { menu_button_target: 'button' } }
|
||||||
.hidden t('.languages')
|
%span.hidden
|
||||||
= image_tag "icons/translate-icon.svg", alt: t('.languages'), width: 24, height: 24, lazy: true, aria: { hidden: true }
|
= 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' } }
|
%ul.header-menu.dropdown-content{ data: { menu_button_target: 'menu' } }
|
||||||
%li
|
%li
|
||||||
= active_link_to save_locale_path(locale: :fr), method: :post, class: "menu-item menu-link", active: I18n.locale == :fr do
|
= active_link_to save_locale_path(locale: :fr), method: :post, class: "menu-item menu-link", active: I18n.locale == :fr do
|
||||||
|
|
|
@ -34,6 +34,8 @@
|
||||||
= vite_stylesheet_tag 'application', media: 'all'
|
= vite_stylesheet_tag 'application', media: 'all'
|
||||||
= stylesheet_link_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 }
|
%body{ id: content_for(:page_id), class: browser.platform.ios? ? 'ios' : nil }
|
||||||
.page-wrapper
|
.page-wrapper
|
||||||
= render partial: "layouts/outdated_browser_banner"
|
= render partial: "layouts/outdated_browser_banner"
|
||||||
|
@ -44,7 +46,7 @@
|
||||||
Env Test
|
Env Test
|
||||||
|
|
||||||
= render partial: "layouts/header"
|
= render partial: "layouts/header"
|
||||||
%main
|
%main{ role: :main }
|
||||||
= render partial: "layouts/flash_messages"
|
= render partial: "layouts/flash_messages"
|
||||||
= content_for?(:content) ? yield(:content) : yield
|
= content_for?(:content) ? yield(:content) : yield
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.no-procedure
|
.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
|
.baseline.center
|
||||||
%p
|
%p
|
||||||
%span.simple= t('.line1')
|
%span.simple= t('.line1')
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
%h1.new-h1
|
%h1.new-h1
|
||||||
= t('.contact')
|
= 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
|
.description
|
||||||
%p= t('.intro_html')
|
%p= t('.intro_html')
|
||||||
|
@ -21,26 +21,24 @@
|
||||||
%span.mandatory *
|
%span.mandatory *
|
||||||
= text_field_tag :email, params[:email], required: true, autocomplete: 'email'
|
= text_field_tag :email, params[:email], required: true, autocomplete: 'email'
|
||||||
|
|
||||||
.contact-champ
|
%fieldset.radios.vertical{ name: "type" }
|
||||||
= label_tag :type do
|
%legend.form-label
|
||||||
= t('.your_question')
|
= t('.your_question')
|
||||||
= hidden_field_tag :type, params[:type]
|
%span.mandatory *
|
||||||
|
|
||||||
%dl
|
|
||||||
- @options.each do |(question, question_type, link)|
|
- @options.each do |(question, question_type, link)|
|
||||||
%dt
|
= label_tag "type_#{question_type}", { 'aria-controls': link ? "card-#{question_type}" : nil } do
|
||||||
- if link.present?
|
= radio_button_tag :type, question_type, false, required: true
|
||||||
%button.button{ 'aria-expanded': 'false', 'aria-controls': question_type, data: { 'question-type': question_type } }= question
|
= question
|
||||||
- else
|
|
||||||
%button.button.button-without-hint{ data: { 'question-type': question_type } }= question
|
|
||||||
- if link.present?
|
- if link.present?
|
||||||
%dd
|
.support.card.featured.mb-4.ml-5.hidden{ id: "card-#{question_type}", "aria-hidden": true }
|
||||||
.support.card.featured.hidden{ id: question_type }
|
.card-title
|
||||||
.card-title
|
= t('.our_answer')
|
||||||
= t('.our_answer')
|
.card-content
|
||||||
.card-content
|
-# i18n-tasks-use t("support.index.#{question_type}.answer_html")
|
||||||
-# 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)
|
||||||
= t('answer_html', scope: [:support, :index, question_type], base_url: APPLICATION_BASE_URL, "link_#{question_type}": link)
|
|
||||||
|
|
||||||
.contact-champ
|
.contact-champ
|
||||||
= label_tag :dossier_id, t('file_number', scope: [:utils])
|
= label_tag :dossier_id, t('file_number', scope: [:utils])
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
= render partial: 'root/footer'
|
= render partial: 'root/footer'
|
||||||
|
|
||||||
#link-sent.container
|
#link-sent.container
|
||||||
= image_tag('user/confirmation-email.svg')
|
= image_tag('user/confirmation-email.svg', "aria-hidden": true)
|
||||||
%h1
|
%h1
|
||||||
= t('views.users.passwords.reset_link_sent.got_it')
|
= t('views.users.passwords.reset_link_sent.got_it')
|
||||||
%br
|
%br
|
||||||
|
|
|
@ -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)
|
|
|
@ -4,7 +4,7 @@
|
||||||
= render partial: 'root/footer'
|
= render partial: 'root/footer'
|
||||||
|
|
||||||
#link-sent.container
|
#link-sent.container
|
||||||
= image_tag('user/confirmation-email.svg')
|
= image_tag('user/confirmation-email.svg', "aria-hidden": true)
|
||||||
%h1 Encore une petite étape :)
|
%h1 Encore une petite étape :)
|
||||||
|
|
||||||
%section.link-sent-info
|
%section.link-sent-info
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
= content_for(:page_id, 'auth')
|
= content_for(:page_id, 'auth')
|
||||||
|
= content_for(:title, t('metas.signin.title'))
|
||||||
|
|
||||||
#session-new.auth-form.sign-in-form
|
#session-new.auth-form.sign-in-form
|
||||||
|
|
||||||
|
@ -8,7 +9,7 @@
|
||||||
= render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path }
|
= render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path }
|
||||||
|
|
||||||
= f.label :email, t('views.users.sessions.new.email')
|
= 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.label :password, t('views.users.sessions.new.password', min_length: PASSWORD_MIN_LENGTH)
|
||||||
= f.password_field :password, autocomplete: 'current-password'
|
= f.password_field :password, autocomplete: 'current-password'
|
||||||
|
|
|
@ -3,7 +3,7 @@ InvisibleCaptcha.setup do |config|
|
||||||
# config.visual_honeypots = false
|
# config.visual_honeypots = false
|
||||||
# config.timestamp_threshold = 2
|
# config.timestamp_threshold = 2
|
||||||
config.timestamp_enabled = !Rails.env.test?
|
config.timestamp_enabled = !Rails.env.test?
|
||||||
# config.injectable_styles = false
|
config.injectable_styles = true
|
||||||
config.spinner_enabled = !Rails.env.test?
|
config.spinner_enabled = !Rails.env.test?
|
||||||
|
|
||||||
# Leave these unset if you want to use I18n (see below)
|
# Leave these unset if you want to use I18n (see below)
|
||||||
|
|
|
@ -65,6 +65,7 @@ en:
|
||||||
line2: to manage dematerialized
|
line2: to manage dematerialized
|
||||||
line3: administrative forms.
|
line3: administrative forms.
|
||||||
are_you_new: First time on %{app_name}?
|
are_you_new: First time on %{app_name}?
|
||||||
|
my_account: My account
|
||||||
locale_dropdown:
|
locale_dropdown:
|
||||||
languages: "Languages"
|
languages: "Languages"
|
||||||
notifications:
|
notifications:
|
||||||
|
|
|
@ -55,6 +55,7 @@ fr:
|
||||||
line2: pour gérer les formulaires
|
line2: pour gérer les formulaires
|
||||||
line3: administratifs dématérialisés.
|
line3: administratifs dématérialisés.
|
||||||
are_you_new: Vous êtes nouveau sur %{app_name} ?
|
are_you_new: Vous êtes nouveau sur %{app_name} ?
|
||||||
|
my_account: Mon compte
|
||||||
locale_dropdown:
|
locale_dropdown:
|
||||||
languages: "Langues"
|
languages: "Langues"
|
||||||
notifications:
|
notifications:
|
||||||
|
|
4
config/locales/metas.en.yml
Normal file
4
config/locales/metas.en.yml
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
en:
|
||||||
|
metas:
|
||||||
|
signin:
|
||||||
|
title: "Sign-in"
|
4
config/locales/metas.fr.yml
Normal file
4
config/locales/metas.fr.yml
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
fr:
|
||||||
|
metas:
|
||||||
|
signin:
|
||||||
|
title: "Se connecter"
|
Loading…
Reference in a new issue