25e9065913
In commit 9794ffbbf, we replaced "buttons" with icons in order to make
the admin interface consistent with the planned budget investments
redesign.
However, using icons has some issues. For once, icons like a trash for
the "delete" action might be obvious, but other icons like "confirm
moderation" or "send pending" might be a bit confusing.
It's true that we were adding tooltips on hover. We tried two
approaches: using Foundation's tooltips and using CSS tooltips.
Foundation tooltips are not activated on focus (only on hover), while
CSS tooltips always appear below the icon, which might be a problem when
the icons are at the bottom of the screen (one of our milestone tests
was failing because of that and we can now run it with JavaScript
enabled).
Both Foundation and CSS tooltips have other issues:
* They force users to make an extra step and move the mouse over the
link just to know what the link is about
* They aren't available on touch screens, so these users will have to
memorize what each icon does
* They are not hoverable, and making them hoverable would cause a
different issue because the tooltip might cover links below it, making
it impossible to click these links without moving the mouse away
first
* They are not dismissable, which is considered an accessibility issue
and a requirement in the Web Content Accessibility Guidelines [1]
For all these reasons, we're using both texts and icons. As Thomas
Byttebier said "The best icon is a text label [2]". Heydon Pickering
also makes a point towards providing text alongside icons in his book
"Inclusive Components" [3].
Note that, since we're now adding text and some of the colors we use for
actions are hard to read against a white/gray background, we're making a
few colors darker.
With these changes, actions take more space in the admin table compared
to the space they took in version 1.3, but they are more usable and
accessible while they still take less space than they did in version
1.2.
[1] https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus
[2] https://thomasbyttebier.be/blog/the-best-icon-is-a-text-label
[3] https://inclusive-components.design/tooltips-toggletips/
123 lines
3.8 KiB
Ruby
123 lines
3.8 KiB
Ruby
shared_examples "admin_milestoneable" do |factory_name, path_name|
|
|
it_behaves_like "admin_progressable", factory_name, path_name
|
|
|
|
describe "Admin milestones" do
|
|
let!(:milestoneable) { create(factory_name) }
|
|
let(:path) { send(path_name, milestoneable) }
|
|
|
|
context "Index" do
|
|
scenario "Displaying milestones" do
|
|
milestone = create(:milestone, :with_image, milestoneable: milestoneable)
|
|
document = create(:document, documentable: milestone)
|
|
|
|
visit path
|
|
|
|
expect(page).to have_content("Milestone")
|
|
expect(page).to have_content(milestone.title)
|
|
expect(page).to have_content(milestone.id)
|
|
expect(page).to have_content(milestone.publication_date.to_date)
|
|
expect(page).to have_content(milestone.status.name)
|
|
expect(page).to have_link "Show image"
|
|
expect(page).to have_link document.title
|
|
end
|
|
|
|
scenario "Displaying no_milestones text" do
|
|
visit path
|
|
|
|
expect(page).to have_content("Milestone")
|
|
expect(page).to have_content("Don't have defined milestones")
|
|
end
|
|
end
|
|
|
|
context "New" do
|
|
scenario "Add milestone" do
|
|
status = create(:milestone_status)
|
|
visit path
|
|
|
|
click_link "Create new milestone"
|
|
|
|
select status.name, from: "milestone_status_id"
|
|
fill_in "Description", with: "New description milestone"
|
|
fill_in "milestone_publication_date", with: Date.current
|
|
|
|
click_button "Create milestone"
|
|
|
|
expect(page).to have_content "New description milestone"
|
|
expect(page).to have_content Date.current
|
|
expect(page).to have_content status.name
|
|
end
|
|
|
|
scenario "Status select is disabled if there are no statuses available" do
|
|
visit path
|
|
|
|
click_link "Create new milestone"
|
|
expect(find("#milestone_status_id").disabled?).to be true
|
|
end
|
|
|
|
scenario "Show validation errors on milestone form" do
|
|
visit path
|
|
|
|
click_link "Create new milestone"
|
|
|
|
fill_in "Description", with: "New description milestone"
|
|
|
|
click_button "Create milestone"
|
|
|
|
within "#new_milestone" do
|
|
expect(page).to have_content "can't be blank", count: 1
|
|
expect(page).to have_content "New description milestone"
|
|
end
|
|
end
|
|
|
|
scenario "Show validation errors with no description nor status" do
|
|
visit path
|
|
click_link "Create new milestone"
|
|
|
|
fill_in "Date", with: Date.current
|
|
click_button "Create milestone"
|
|
|
|
within "#new_milestone" do
|
|
expect(page).to have_content "can't be blank", count: 1
|
|
end
|
|
end
|
|
end
|
|
|
|
context "Edit" do
|
|
scenario "Change title, description and document names" do
|
|
milestone = create(:milestone, :with_image, milestoneable: milestoneable)
|
|
document = create(:document, documentable: milestone)
|
|
|
|
visit path
|
|
expect(page).to have_link document.title
|
|
|
|
within("tr", text: milestone.title) { click_link "Edit" }
|
|
|
|
expect(page).to have_css("img[alt='#{milestone.image.title}']")
|
|
|
|
fill_in "Description", with: "Changed description"
|
|
fill_in "milestone_publication_date", with: Date.current
|
|
fill_in "milestone_documents_attributes_0_title", with: "New document title"
|
|
|
|
click_button "Update milestone"
|
|
|
|
expect(page).to have_content "Changed description"
|
|
expect(page).to have_content Date.current
|
|
expect(page).to have_link "Show image"
|
|
expect(page).to have_link "New document title"
|
|
end
|
|
end
|
|
|
|
context "Delete" do
|
|
scenario "Remove milestone" do
|
|
create(:milestone, milestoneable: milestoneable, title: "Title will it remove")
|
|
|
|
visit path
|
|
|
|
accept_confirm { click_link "Delete milestone" }
|
|
|
|
expect(page).not_to have_content "Title will it remove"
|
|
end
|
|
end
|
|
end
|
|
end
|