DGNum/demarches-normaliennes
11
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

fix display of labels for datetime on screenreaders

Browse source
This commit is contained in:
clemkeirua 2020-07-20 10:46:09 +02:00
parent bc34905742
commit c0cf8b1341
3 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/assets/stylesheets/new_design/labels.scss
View file

@ -55,3 +55,17 @@
@extend .without-continuation;
}
}
// Labels that we only want for screen readers
// https://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/
.screen-reader-text {
border: none;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
width: 1px;
overflow: hidden;
position: absolute !important;
word-wrap: normal !important;
}

2
config/initializers/date_select.rb
View file

@ -25,7 +25,7 @@ module ActionView
end
field_for = "#{prefix.join('_')}_#{@options[:field_name]}"
"<span class='hidden'><label for='#{field_for}_#{n}i'>#{label}</label></span>"
"<label class='screen-reader-text' for='#{field_for}_#{n}i'>#{label}</label>"
end
# Returns the separator for a given datetime component.

8
spec/features/accessibilite/wcag_usager_spec.rb
View file

@ -62,7 +62,7 @@ feature 'wcag rules for usager', js: true do
fill_in('individual_nom', with: 'nom')
click_on 'Continuer'
expect(page).to be_accessible.skipping :'aria-input-field-name', :label
expect(page).to be_accessible.skipping :'aria-input-field-name'
end
end
@ -93,7 +93,7 @@ feature 'wcag rules for usager', js: true do
scenario 'dossier' do
visit dossier_path(dossier)
expect(page).to be_accessible.skipping :label, :'aria-input-field-name'
expect(page).to be_accessible.skipping :'aria-input-field-name'
end
scenario 'merci' do
@ -113,12 +113,12 @@ feature 'wcag rules for usager', js: true do
scenario 'modifier' do
visit modifier_dossier_path(dossier)
expect(page).to be_accessible.skipping :'aria-input-field-name', :label
expect(page).to be_accessible.skipping :'aria-input-field-name'
end
scenario 'brouillon' do
visit brouillon_dossier_path(dossier)
expect(page).to be_accessible.skipping :'aria-input-field-name', :label
expect(page).to be_accessible.skipping :'aria-input-field-name'
end
end
end