From 4425e0d16a9bf88292e56c7a3a764d99e244aa10 Mon Sep 17 00:00:00 2001 From: Bruno Prieto Date: Thu, 13 Mar 2025 21:24:30 +0100 Subject: [PATCH 01/11] Hide bubbles for SR users for now --- app/views/buckets/_bucket.html.erb | 4 +++- app/views/filters/_filter.html.erb | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/app/views/buckets/_bucket.html.erb b/app/views/buckets/_bucket.html.erb index 16550c55f..d6a589ac5 100644 --- a/app/views/buckets/_bucket.html.erb +++ b/app/views/buckets/_bucket.html.erb @@ -1,5 +1,7 @@
  • - <%= link_to bubbles_path(bucket_ids: [ bucket ]), class: "border border-radius margin-block-end-half bubbles__container flex justify-center align-center position-relative" do %> + <%= link_to bubbles_path(bucket_ids: [ bucket ]), + class: "border border-radius margin-block-end-half bubbles__container flex justify-center align-center position-relative", + aria: { hidden: true }, tabindex: -1 do %>
    <% bucket.bubbles.active.published_or_drafted_by(Current.user).ordered_by_activity.limit(10).each do |bubble| %>
    " style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>" diff --git a/app/views/filters/_filter.html.erb b/app/views/filters/_filter.html.erb index bcf6cd7da..d76e0a232 100644 --- a/app/views/filters/_filter.html.erb +++ b/app/views/filters/_filter.html.erb @@ -1,6 +1,8 @@ <% cache_if filter.cacheable?, filter do %>
  • - <%= link_to bubbles_path(**filter.as_params), class: "border border-radius margin-block-end-half bubbles__container flex justify-center align-center position-relative" do %> + <%= link_to bubbles_path(**filter.as_params), + class: "border border-radius margin-block-end-half bubbles__container flex justify-center align-center position-relative", + aria: { hidden: true }, tabindex: -1 do %>
    <% filter.bubbles.ordered_by_activity.limit(10).each do |bubble| %>
    " style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>" From bcda67e114dd3f5031c5d23093a9d71ac276a7c4 Mon Sep 17 00:00:00 2001 From: Bruno Prieto Date: Thu, 13 Mar 2025 21:25:26 +0100 Subject: [PATCH 02/11] Div is not a valid parent for list of li elements --- app/views/buckets/index.html.erb | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/buckets/index.html.erb b/app/views/buckets/index.html.erb index 9197893aa..41e8cd81a 100644 --- a/app/views/buckets/index.html.erb +++ b/app/views/buckets/index.html.erb @@ -22,11 +22,11 @@ <% end %> -
    +
      <%= render @buckets, cached: true %> -
    -
    + +
      <%= render @filters %> -
    + <%= render "notifications/tray" %> From 8a9d57e4c8189d01741c6682e9293da16e2d1b0b Mon Sep 17 00:00:00 2001 From: Bruno Prieto Date: Thu, 13 Mar 2025 21:53:53 +0100 Subject: [PATCH 03/11] Show filter inputs for screen readers --- app/views/filters/_dialog.html.erb | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/app/views/filters/_dialog.html.erb b/app/views/filters/_dialog.html.erb index 73e764c79..84c18eaff 100644 --- a/app/views/filters/_dialog.html.erb +++ b/app/views/filters/_dialog.html.erb @@ -41,7 +41,7 @@
  • Sort by
  • <%= label_tag "indexed_by_#{filter.default_indexed_by}", class: "btn filter__button" do %> - <%= radio_button_tag "indexed_by", filter.default_indexed_by, filter.default_indexed_by?, hidden: true %> + <%= radio_button_tag "indexed_by", filter.default_indexed_by, filter.default_indexed_by?, class: "for-screen-reader" %> Most active <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> <% end %> @@ -50,7 +50,7 @@ <% Filter::INDEXES.each do |index| %>
  • <%= label_tag "indexed_by_#{index}", class: "btn filter__button" do %> - <%= radio_button_tag "indexed_by", index, filter.indexed_by == index, hidden: true %> + <%= radio_button_tag "indexed_by", index, filter.indexed_by == index, class: "for-screen-reader" %> <%= index.humanize %> <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> <% end %> @@ -69,7 +69,7 @@ <% Current.user.buckets.order(:name).each do |bucket| %>
  • <%= label_tag "bucket_ids_#{bucket.id}", class: "btn filter__button" do %> - <%= check_box_tag "bucket_ids[]", bucket.id, filter.buckets.include?(bucket), id: "bucket_ids_#{bucket.id}", hidden: true %> + <%= check_box_tag "bucket_ids[]", bucket.id, filter.buckets.include?(bucket), id: "bucket_ids_#{bucket.id}", class: "for-screen-reader" %> <%= bucket.name %> <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> <% end %> @@ -82,7 +82,7 @@ <% Current.account.tags.order(:title).each do |tag| %>
  • <%= label_tag "tag_ids_#{tag.id}", class: "btn filter__button" do %> - <%= check_box_tag "tag_ids[]", tag.id, filter.tags.include?(tag), id: "tag_ids_#{tag.id}", hidden: true %> + <%= check_box_tag "tag_ids[]", tag.id, filter.tags.include?(tag), id: "tag_ids_#{tag.id}", class: "for-screen-reader" %> <%= tag.hashtag %> <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> <% end %> @@ -95,7 +95,7 @@
  • <%= label_tag "assignment_status_unassigned", class: "btn filter__button" do %> <%= check_box_tag "assignment_status", "unassigned", filter.assignment_status.unassigned?, id: "assignment_status_unassigned", - hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignee_ids[],assigner_ids[]" } %> + class: "for-screen-reader", data: { action: "filter-form#clearCategory", filter_form_name_param: "assignee_ids[],assigner_ids[]" } %> No one <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> <% end %> @@ -103,7 +103,7 @@
  • <%= label_tag "assignee_ids_me", class: "btn filter__button" do %> <%= check_box_tag "assignee_ids[]", Current.user.id, filter.assignees.include?(Current.user), id: "assignee_ids_me", - hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignment_status" } %> + class: "for-screen-reader", data: { action: "filter-form#clearCategory", filter_form_name_param: "assignment_status" } %> Me <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> <% end %> @@ -112,7 +112,7 @@
  • <%= label_tag "assignee_ids_#{user.id}", user.name, class: "btn filter__button" do %> <%= check_box_tag "assignee_ids[]", user.id, filter.assignees.include?(user), id: "assignee_ids_#{user.id}", - hidden: true, data: { action: "filter-form#clearCategory", filter_form_name_param: "assignment_status" } %> + class: "for-screen-reader", data: { action: "filter-form#clearCategory", filter_form_name_param: "assignment_status" } %> <%= user.name %> <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> <% end %> @@ -125,7 +125,7 @@
  • <%= label_tag "creator_ids_me", class: "btn filter__button" do %> <%= check_box_tag "creator_ids[]", Current.user.id, filter.creators.include?(Current.user), id: "creator_ids_me", - hidden: true %> + class: "for-screen-reader" %> Me <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> <% end %> @@ -134,7 +134,7 @@
  • <%= label_tag "creator_ids_#{user.id}", class: "btn filter__button" do %> <%= check_box_tag "creator_ids[]", user.id, filter.creators.include?(user), id: "creator_ids_#{user.id}", - hidden: true %> + class: "for-screen-reader" %> <%= user.name %> <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> <% end %> @@ -150,7 +150,7 @@ <% workflow.stages.order(:name).each do |stage| %>
  • <%= label_tag "stage_ids_#{stage.id}", class: "btn filter__button" do %> - <%= check_box_tag "stage_ids[]", stage.id, filter.stages.include?(stage), id: "stage_ids_#{stage.id}", hidden: true %> + <%= check_box_tag "stage_ids[]", stage.id, filter.stages.include?(stage), id: "stage_ids_#{stage.id}", class: "for-screen-reader" %> <%= stage.name %> <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> <% end %> From fdd3fb53c01cdd8afe6ce193413c92ebad2d8cc9 Mon Sep 17 00:00:00 2001 From: Bruno Prieto Date: Thu, 13 Mar 2025 22:20:40 +0100 Subject: [PATCH 04/11] Label tag don't need a for attribute if it has a input as a children Then input ids aren't required --- app/views/filters/_dialog.html.erb | 89 +++++++++++++++--------------- 1 file changed, 46 insertions(+), 43 deletions(-) diff --git a/app/views/filters/_dialog.html.erb b/app/views/filters/_dialog.html.erb index 84c18eaff..29b4888ca 100644 --- a/app/views/filters/_dialog.html.erb +++ b/app/views/filters/_dialog.html.erb @@ -40,20 +40,20 @@
  • Sort by
  • - <%= label_tag "indexed_by_#{filter.default_indexed_by}", class: "btn filter__button" do %> +
    • <% Filter::INDEXES.each do |index| %>
  • - <%= label_tag "indexed_by_#{index}", class: "btn filter__button" do %> +
    • <% end %>     @@ -68,11 +68,11 @@
    • <% Current.user.buckets.order(:name).each do |bucket| %>
  • - <%= label_tag "bucket_ids_#{bucket.id}", class: "btn filter__button" do %> - <%= check_box_tag "bucket_ids[]", bucket.id, filter.buckets.include?(bucket), id: "bucket_ids_#{bucket.id}", class: "for-screen-reader" %> +
    • <% end %> @@ -81,11 +81,11 @@
  • Tagged
    • <% Current.account.tags.order(:title).each do |tag| %>
  • - <%= label_tag "tag_ids_#{tag.id}", class: "btn filter__button" do %> - <%= check_box_tag "tag_ids[]", tag.id, filter.tags.include?(tag), id: "tag_ids_#{tag.id}", class: "for-screen-reader" %> +
    • <% end %> @@ -93,29 +93,33 @@
  • Assigned to…
  • - <%= label_tag "assignment_status_unassigned", class: "btn filter__button" do %> - <%= check_box_tag "assignment_status", "unassigned", filter.assignment_status.unassigned?, id: "assignment_status_unassigned", - class: "for-screen-reader", data: { action: "filter-form#clearCategory", filter_form_name_param: "assignee_ids[],assigner_ids[]" } %> - No one - <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> - <% end %> +
  • - <%= label_tag "assignee_ids_me", class: "btn filter__button" do %> - <%= check_box_tag "assignee_ids[]", Current.user.id, filter.assignees.include?(Current.user), id: "assignee_ids_me", - class: "for-screen-reader", data: { action: "filter-form#clearCategory", filter_form_name_param: "assignment_status" } %> - Me - <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> - <% end %> +
    • <% Current.account.users.active.without(Current.user).order(:name).each do |user| %>
  • - <%= label_tag "assignee_ids_#{user.id}", user.name, class: "btn filter__button" do %> - <%= check_box_tag "assignee_ids[]", user.id, filter.assignees.include?(user), id: "assignee_ids_#{user.id}", - class: "for-screen-reader", data: { action: "filter-form#clearCategory", filter_form_name_param: "assignment_status" } %> - <%= user.name %> - <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> - <% end %> +
    • <% end %>     @@ -123,21 +127,20 @@
  • Added by…
  • - <%= label_tag "creator_ids_me", class: "btn filter__button" do %> - <%= check_box_tag "creator_ids[]", Current.user.id, filter.creators.include?(Current.user), id: "creator_ids_me", - class: "for-screen-reader" %> - Me - <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> - <% end %> +
    • <% Current.account.users.active.without(Current.user).order(:name).each do |user| %>
  • - <%= label_tag "creator_ids_#{user.id}", class: "btn filter__button" do %> - <%= check_box_tag "creator_ids[]", user.id, filter.creators.include?(user), id: "creator_ids_#{user.id}", - class: "for-screen-reader" %> - <%= user.name %> - <%= image_tag "close.svg", aria: { hidden: true }, size: 24 %> - <% end %> +
    • <% end %>     @@ -149,11 +152,11 @@ <% workflow.stages.order(:name).each do |stage| %>
  • - <%= label_tag "stage_ids_#{stage.id}", class: "btn filter__button" do %> - <%= check_box_tag "stage_ids[]", stage.id, filter.stages.include?(stage), id: "stage_ids_#{stage.id}", class: "for-screen-reader" %> +
    • <% end %> <% end %> From cea43da13f2408956ac6a2adf1f1e13c57002acc Mon Sep 17 00:00:00 2001 From: Bruno Prieto Date: Thu, 13 Mar 2025 22:36:12 +0100 Subject: [PATCH 05/11] Organize filter inputs by group, similar to fieldset Menu tag is deprecated, li elements are only valid inside ul or ol elements --- app/views/filters/_dialog.html.erb | 82 +++++++++++++++--------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/app/views/filters/_dialog.html.erb b/app/views/filters/_dialog.html.erb index 29b4888ca..b2d20d6db 100644 --- a/app/views/filters/_dialog.html.erb +++ b/app/views/filters/_dialog.html.erb @@ -37,62 +37,62 @@ <% end %>
    - -
  • Sort by
    • -
  • +
    +
    Sort by
    +
    -
    • +
    <% Filter::INDEXES.each do |index| %> -
  • +
    -
    • + <% end %> - + - -
  • In Collection
    • +
    +
    In Collection
    -
  • +
    <%= button_tag type: :button, class: "btn filter__button", data: { action: "filter-form#clearCategory", filter_form_name_param: "bucket_ids[]" } do %> All Collections <% end %> -
    • +
    <% Current.user.buckets.order(:name).each do |bucket| %> -
  • +
    -
    • + <% end %> -     + - -
  • Tagged
    • +
    +
    Tagged
    <% Current.account.tags.order(:title).each do |tag| %> -
  • +
    -
    • +
    <% end %> -     + - -
  • Assigned to…
    • -
  • +
    +
    Assigned to…
    +
    -
    • -
  • + +
    -
    • + <% Current.account.users.active.without(Current.user).order(:name).each do |user| %> -
  • +
    -
    • + <% end %> -     + - -
  • Added by…
    • -
  • +
    +
    Added by…
    +
    -
    • + <% Current.account.users.active.without(Current.user).order(:name).each do |user| %> -
  • +
    -
    • + <% end %> -     + - -
  • In Stage
    • +
    +
    In Stage
    <% Current.account.workflows.order(:name).each do |workflow| %> -
  • <%= workflow.name %>
    • +
    <%= workflow.name %>
    <% workflow.stages.order(:name).each do |stage| %> -
  • +
    -
    • +
    <% end %> <% end %> -     + <% end %> From dfb49d0f87284ce22746afea0d4343e8cb382c7b Mon Sep 17 00:00:00 2001 From: Bruno Prieto Date: Thu, 13 Mar 2025 22:46:19 +0100 Subject: [PATCH 06/11] Add aria-label and aria-description to filter dialog Otherwise the browser will try to infer the properties. That process is slow for screen readers --- app/views/filters/_dialog.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/filters/_dialog.html.erb b/app/views/filters/_dialog.html.erb index b2d20d6db..4a03cbfbd 100644 --- a/app/views/filters/_dialog.html.erb +++ b/app/views/filters/_dialog.html.erb @@ -1,4 +1,4 @@ - +
    From 793a43ff270090a0842385e30dd2728dc8c025c5 Mon Sep 17 00:00:00 2001 From: Bruno Prieto Date: Thu, 13 Mar 2025 22:56:28 +0100 Subject: [PATCH 07/11] Add aria-label and aria-description to filter dialog Otherwise the browser will try to infer the properties. That process is slow for screen readers --- app/views/filters/_assignees.html.erb | 10 ++++++---- app/views/filters/_buckets.html.erb | 10 ++++++---- app/views/filters/_creators.html.erb | 9 +++++---- app/views/filters/_indexed_by.html.erb | 6 ++++-- app/views/filters/_stages.html.erb | 24 +++++++++++++----------- app/views/filters/_tags.html.erb | 10 ++++++---- 6 files changed, 40 insertions(+), 29 deletions(-) diff --git a/app/views/filters/_assignees.html.erb b/app/views/filters/_assignees.html.erb index ddf1399d0..580156429 100644 --- a/app/views/filters/_assignees.html.erb +++ b/app/views/filters/_assignees.html.erb @@ -11,14 +11,16 @@ - + Assigned to… <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", data: { controller: "form" } do |form| %> <% filter.as_params.except(:assignee_ids, :assignment_status).each do |key, value| %> <%= filter_hidden_field_tag key, value %> <% end %> - + <%= link_to bubbles_path(filter.as_params.except(:assignee_ids, :assignment_status)), class: "btn popup__item" do %> Clear all <% end %> @@ -33,7 +35,7 @@ <%= form.label :assignment_status, "No one", class: "overflow-ellipsis" %> <%= image_tag "check.svg", aria: { hidden: true }, size: 18, class: "checked flex-item-justify-end" %>
    - + <% Current.account.users.active.order(:name).each do |user| %>
    <%= form.check_box "assignee_ids[]", { @@ -48,4 +50,4 @@ <% end %> <% end %>
    - \ No newline at end of file + diff --git a/app/views/filters/_buckets.html.erb b/app/views/filters/_buckets.html.erb index 32c9fee56..bc2fb0d58 100644 --- a/app/views/filters/_buckets.html.erb +++ b/app/views/filters/_buckets.html.erb @@ -10,18 +10,20 @@ - + In collection <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", data: { controller: "form" } do |form| %> <% filter.as_params.except(:bucket_ids).each do |key, value| %> <%= filter_hidden_field_tag key, value %> <% end %> - + <%= link_to bubbles_path(filter.as_params.except(:bucket_ids)), class: "btn popup__item" do %> Clear all <% end %> - + <% filter.buckets.order(:name).each do |bucket| %>
    <%= form.check_box "bucket_ids[]", { @@ -37,4 +39,4 @@ <% end %>
    -<% end %> \ No newline at end of file +<% end %> diff --git a/app/views/filters/_creators.html.erb b/app/views/filters/_creators.html.erb index aa8befe24..b30bd52c0 100644 --- a/app/views/filters/_creators.html.erb +++ b/app/views/filters/_creators.html.erb @@ -12,14 +12,15 @@ + aria-label="Added by…" aria-description="Added by…" + data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close"> Added by… <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", data: { controller: "form" } do |form| %> <% filter.as_params.except(:creator_ids).each do |key, value| %> <%= filter_hidden_field_tag key, value %> <% end %> - + <%= link_to bubbles_path(filter.as_params.except(:creator_ids)), class: "btn popup__item" do %> Clear all <% end %> @@ -34,7 +35,7 @@ <%= form.label "creator_ids[]", "Me", for: dom_id(Current.user, :creator_filter), class: "overflow-ellipsis" %> <%= image_tag "check.svg", aria: { hidden: true }, size: 18, class: "checked flex-item-justify-end" %> - + <% Current.account.users.active.without(Current.user).order(:name).each do |user| %>
    <%= form.check_box "creator_ids[]", { @@ -50,4 +51,4 @@ <% end %>
    -<% end %> \ No newline at end of file +<% end %> diff --git a/app/views/filters/_indexed_by.html.erb b/app/views/filters/_indexed_by.html.erb index f42324bdf..34401948a 100644 --- a/app/views/filters/_indexed_by.html.erb +++ b/app/views/filters/_indexed_by.html.erb @@ -5,7 +5,9 @@ - + Sort by… <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", data: { controller: "form" } do |form| %> @@ -35,4 +37,4 @@ <% end %> <% end %> - \ No newline at end of file + diff --git a/app/views/filters/_stages.html.erb b/app/views/filters/_stages.html.erb index 0e6c01d3a..b3498a7f8 100644 --- a/app/views/filters/_stages.html.erb +++ b/app/views/filters/_stages.html.erb @@ -10,35 +10,37 @@ - + In stage… <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", data: { controller: "form" } do |form| %> <% filter.as_params.except(:stage_ids).each do |key, value| %> <%= filter_hidden_field_tag key, value %> <% end %> - + <%= link_to bubbles_path(filter.as_params.except(:stage_ids)), class: "btn popup__item" do %> Clear all <% end %> - + <% Current.account.workflows.order(:name).each do |workflow| %> - <%= workflow.name %> - - <% workflow.stages.order(:name).each do |stage| %> + <%= workflow.name %> + + <% workflow.stages.order(:name).each do |stage| %>
    - <%= form.check_box "stage_ids[]", { + <%= form.check_box "stage_ids[]", { checked: filter.stages.include?(stage), data: { action: "change->form#submit" }, include_hidden: false, }, stage.id %> - <%= form.label "stage_ids[]", stage.name, for: dom_id(stage, :filter), class: "overflow-ellipsis" %> - <%= image_tag "check.svg", aria: { hidden: true }, size: 18, class: "checked flex-item-justify-end" %> + <%= form.label "stage_ids[]", stage.name, for: dom_id(stage, :filter), class: "overflow-ellipsis" %> + <%= image_tag "check.svg", aria: { hidden: true }, size: 18, class: "checked flex-item-justify-end" %>
    - <% end %> + <% end %> <% end %> <% end %>     -<% end %> \ No newline at end of file +<% end %> diff --git a/app/views/filters/_tags.html.erb b/app/views/filters/_tags.html.erb index 9e7d087f9..5af5ba171 100644 --- a/app/views/filters/_tags.html.erb +++ b/app/views/filters/_tags.html.erb @@ -9,18 +9,20 @@ - + Tagged… <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", data: { controller: "form" } do |form| %> <% filter.as_params.except(:tag_ids).each do |key, value| %> <%= filter_hidden_field_tag key, value %> <% end %> - + <%= link_to bubbles_path(filter.as_params.except(:tag_ids)), class: "btn popup__item" do %> Clear all <% end %> - + <% Current.account.tags.order(:title).each do |tag| %>
    <%= form.check_box "tag_ids[]", { @@ -35,4 +37,4 @@ <% end %> <% end %>
    - \ No newline at end of file + From 63a098fcdbf15cc3a58247aec372a72550ecba7d Mon Sep 17 00:00:00 2001 From: Bruno Prieto Date: Thu, 13 Mar 2025 23:44:05 +0100 Subject: [PATCH 08/11] Fix filter input and label id assigments --- app/views/filters/_assignees.html.erb | 7 ++++--- app/views/filters/_buckets.html.erb | 5 +++-- app/views/filters/_creators.html.erb | 10 ++++++---- app/views/filters/_stages.html.erb | 5 +++-- app/views/filters/_tags.html.erb | 5 +++-- 5 files changed, 19 insertions(+), 13 deletions(-) diff --git a/app/views/filters/_assignees.html.erb b/app/views/filters/_assignees.html.erb index 580156429..8dfdc7f9d 100644 --- a/app/views/filters/_assignees.html.erb +++ b/app/views/filters/_assignees.html.erb @@ -26,7 +26,7 @@ <% end %>
    - <%= form.check_box "assignment_status", { + <%= form.check_box :assignment_status, { checked: filter.assignment_status.unassigned?, data: { action: "change->form#submit" }, include_hidden: false, @@ -38,13 +38,14 @@ <% Current.account.users.active.order(:name).each do |user| %>
    - <%= form.check_box "assignee_ids[]", { + <%= form.check_box :assignee_ids, { + multiple: true, checked: filter.assignees.include?(user), data: { action: "change->form#submit" }, include_hidden: false, }, user.id %> - <%= form.label "assignee_ids[]", user.name, for: dom_id(user, :filter), class: "overflow-ellipsis" %> + <%= form.label :assignee_ids, user.name, for: form.field_id(:assignee_ids, user.id), class: "overflow-ellipsis" %> <%= image_tag "check.svg", aria: { hidden: true }, size: 18, class: "checked flex-item-justify-end" %>
    <% end %> diff --git a/app/views/filters/_buckets.html.erb b/app/views/filters/_buckets.html.erb index bc2fb0d58..1142a9c96 100644 --- a/app/views/filters/_buckets.html.erb +++ b/app/views/filters/_buckets.html.erb @@ -26,13 +26,14 @@ <% filter.buckets.order(:name).each do |bucket| %>
    - <%= form.check_box "bucket_ids[]", { + <%= form.check_box :bucket_ids, { + multiple: true, checked: filter.buckets.include?(bucket), data: { action: "change->form#submit" }, include_hidden: false, }, bucket.id %> - <%= form.label "bucket_ids[]", bucket.name, for: dom_id(bucket, :filter), class: "overflow-ellipsis" %> + <%= form.label :bucket_ids, bucket.name, for: form.field_id(:bucket_ids, bucket.id), class: "overflow-ellipsis" %> <%= image_tag "check.svg", aria: { hidden: true }, size: 18, class: "checked flex-item-justify-end" %>
    <% end %> diff --git a/app/views/filters/_creators.html.erb b/app/views/filters/_creators.html.erb index b30bd52c0..83fc7c69f 100644 --- a/app/views/filters/_creators.html.erb +++ b/app/views/filters/_creators.html.erb @@ -26,25 +26,27 @@ <% end %>
    - <%= form.check_box "creator_ids[]", { + <%= form.check_box :creator_ids, { + multiple: true, checked: filter.creators.include?(Current.user), data: { action: "change->form#submit" }, include_hidden: false, }, Current.user.id %> - <%= form.label "creator_ids[]", "Me", for: dom_id(Current.user, :creator_filter), class: "overflow-ellipsis" %> + <%= form.label :creator_ids, "Me", for: form.field_id(:creator_ids, Current.user.id), class: "overflow-ellipsis" %> <%= image_tag "check.svg", aria: { hidden: true }, size: 18, class: "checked flex-item-justify-end" %>
    <% Current.account.users.active.without(Current.user).order(:name).each do |user| %>
    - <%= form.check_box "creator_ids[]", { + <%= form.check_box :creator_ids, { + multiple: true, checked: filter.creators.include?(user), data: { action: "change->form#submit" }, include_hidden: false, }, user.id %> - <%= form.label "creator_ids[]", user.name, for: dom_id(user, :creator_filter), class: "overflow-ellipsis" %> + <%= form.label :creator_ids, user.name, for: form.field_id(:creator_ids, user.id), class: "overflow-ellipsis" %> <%= image_tag "check.svg", aria: { hidden: true }, size: 18, class: "checked flex-item-justify-end" %>
    <% end %> diff --git a/app/views/filters/_stages.html.erb b/app/views/filters/_stages.html.erb index b3498a7f8..0583a8ffa 100644 --- a/app/views/filters/_stages.html.erb +++ b/app/views/filters/_stages.html.erb @@ -29,13 +29,14 @@ <% workflow.stages.order(:name).each do |stage| %>
    - <%= form.check_box "stage_ids[]", { + <%= form.check_box :stage_ids, { + multiple: true, checked: filter.stages.include?(stage), data: { action: "change->form#submit" }, include_hidden: false, }, stage.id %> - <%= form.label "stage_ids[]", stage.name, for: dom_id(stage, :filter), class: "overflow-ellipsis" %> + <%= form.label :stage_ids, stage.name, for: form.field_id(:stage_ids, stage.id), class: "overflow-ellipsis" %> <%= image_tag "check.svg", aria: { hidden: true }, size: 18, class: "checked flex-item-justify-end" %>
    <% end %> diff --git a/app/views/filters/_tags.html.erb b/app/views/filters/_tags.html.erb index 5af5ba171..083e390cc 100644 --- a/app/views/filters/_tags.html.erb +++ b/app/views/filters/_tags.html.erb @@ -25,13 +25,14 @@ <% Current.account.tags.order(:title).each do |tag| %>
    - <%= form.check_box "tag_ids[]", { + <%= form.check_box :tag_ids, { + multiple: true, checked: filter.tags.include?(tag), data: { action: "change->form#submit" }, include_hidden: false, }, tag.id %> - <%= form.label "tag_ids[]", tag.hashtag, for: dom_id(tag, :filter), class: "overflow-ellipsis" %> + <%= form.label :tag_ids, tag.hashtag, for: form.field_id(:tag_ids, tag.id), class: "overflow-ellipsis" %> <%= image_tag "check.svg", aria: { hidden: true }, size: 18, class: "checked flex-item-justify-end" %>
    <% end %> From 7354e744320d2b4ca153214a2288b90ad62e0a21 Mon Sep 17 00:00:00 2001 From: Bruno Prieto Date: Fri, 14 Mar 2025 01:35:40 +0100 Subject: [PATCH 09/11] Improve bubble readability for screen readers --- app/views/boosts/_boosts.html.erb | 5 ++-- app/views/bubbles/_assignments.html.erb | 4 +-- app/views/bubbles/_bubble.html.erb | 37 ++++++++++++++---------- app/views/bubbles/_comments.html.erb | 5 ++-- app/views/bubbles/_date.html.erb | 2 +- app/views/bubbles/_image.html.erb | 2 +- app/views/bubbles/list/_bubble.html.erb | 21 +++++++++----- app/views/bubbles/list/_divider.html.erb | 4 +-- app/views/bubbles/show.html.erb | 8 ++--- 9 files changed, 51 insertions(+), 37 deletions(-) diff --git a/app/views/boosts/_boosts.html.erb b/app/views/boosts/_boosts.html.erb index a8055b5ac..d6361200f 100644 --- a/app/views/boosts/_boosts.html.erb +++ b/app/views/boosts/_boosts.html.erb @@ -1,4 +1,5 @@ <%= tag.div class: "bubble__detail bubble__boosts", + role: "group", aria: { label: "Boosts" }, data: { controller: "animation toggle-class", animation_play_class: "boosting", @@ -8,7 +9,7 @@ <%= form_with url: bucket_bubble_boosts_path(bubble.bucket, bubble), class: "boost__form", data: { action: "toggle-class#toggle" } do %> - <%= text_field_tag :boost_count, bubble.boosts_count, min: 1, class: "input borderless boost__input", autocomplete: "off" %> - <%= tag.button "+", class: "btn btn--plain boost__btn", type: :submit %> + <%= text_field_tag :boost_count, bubble.boosts_count, min: 1, class: "input borderless boost__input", autocomplete: "off", aria: { label: "Boost count" } %> + <%= tag.button "+", class: "btn btn--plain boost__btn", type: :submit, aria: { label: "Boost" } %> <% end %> <% end %> diff --git a/app/views/bubbles/_assignments.html.erb b/app/views/bubbles/_assignments.html.erb index 6bdc12c6d..999afd098 100644 --- a/app/views/bubbles/_assignments.html.erb +++ b/app/views/bubbles/_assignments.html.erb @@ -1,8 +1,8 @@ <% bubble.assignees.each do |assignee| %>
    - <%= assignee.name %> - <%= avatar_image_tag assignee, loading: :lazy, class: "avatar flex-item-no-shrink" %> + + <%= avatar_image_tag assignee, loading: :lazy, class: "avatar flex-item-no-shrink", aria: { hidden: true } %> Assigned to <%= assignee.name %>
    diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb index 841ac2dbf..a5017954f 100644 --- a/app/views/bubbles/_bubble.html.erb +++ b/app/views/bubbles/_bubble.html.erb @@ -1,19 +1,22 @@ <% cache bubble do %> -
    " - style="view-transition-name: bubble-<%= bubble.id -%>; --bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>" - data-bubble-size-target="bubble" - data-activity-score="<%= bubble.activity_score %>" - data-activity-score-at="<%= bubble.activity_score_at.to_i %>" - data-controller="animation upload-preview" - data-animation-play-class="bubble--wobble" - data-animation-play-on-load-value="true" - data-action="mouseover->animation#play"> - + <%= tag.div class: [ "bubble", drafted: bubble.drafted?, popped: bubble.popped? ], + style: "view-transition-name: bubble-#{bubble.id}; --bubble-color: #{bubble.color}; #{bubble_rotation(bubble)}", + role: "group", aria: { label: bubble.title }, + data: { + bubble_size_target: "bubble", + activity_score: bubble.activity_score, + activity_score_at: bubble.activity_score_at.to_i, + controller: "animation upload-preview", + animation_play_class: "bubble--wobble", + animation_play_on_load_value: true, + action: "mouseover->animation#play" } do %>
    -

    +

    <% if bubble.published? %> <%= turbo_frame_tag bubble, :edit do %> - <%= link_to bubble_title(bubble), edit_bucket_bubble_path(bubble.bucket, bubble), class: "txt-undecorated bubble__title-rendered" %> + <%= link_to bubble_title(bubble), edit_bucket_bubble_path(bubble.bucket, bubble), + class: "txt-undecorated bubble__title-rendered", + role: "button", aria: { label: "Edit name: #{bubble.title}" } %> <% end %> <% else %> <%= form_with model: bubble, url: bucket_bubble_path(bubble.bucket, bubble), id: "bubble_form", data: { controller: "auto-save" } do |form| %> @@ -30,14 +33,16 @@
    - <%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "bubble__link" do %> - <%= bubble.title %> - <% end %> +

    + <%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "bubble__link" do %> + <%= bubble.title %> + <% end %> +

    <%= render "bubbles/assignments", bubble: bubble %> <%= render "bubbles/boosts", bubble: bubble %> <%= render "bubbles/comments", bubble: bubble %> <%= render "bubbles/date", bubble: bubble %> <%= render "bubbles/image", bubble: bubble %> -
    + <% end %> <% end %> diff --git a/app/views/bubbles/_comments.html.erb b/app/views/bubbles/_comments.html.erb index b2d3dad5d..6a60cdaeb 100644 --- a/app/views/bubbles/_comments.html.erb +++ b/app/views/bubbles/_comments.html.erb @@ -1,5 +1,6 @@ <% if bubble.messages.comments.any? %>
    - <%= bubble.messages.comments.count %> + + <%= pluralize(bubble.messages.comments.count, "comment") %>
    -<% end %> \ No newline at end of file +<% end %> diff --git a/app/views/bubbles/_date.html.erb b/app/views/bubbles/_date.html.erb index b9fb46a61..bbcc9d4c1 100644 --- a/app/views/bubbles/_date.html.erb +++ b/app/views/bubbles/_date.html.erb @@ -1,9 +1,9 @@ <% if bubble.due_on.present? %> <%= form_with model: bubble, url: bucket_bubble_path(bubble.bucket, bubble), data: { controller: "form" } do |form| %> <% end %> <% end %> diff --git a/app/views/bubbles/_image.html.erb b/app/views/bubbles/_image.html.erb index f92dfc107..8cab87923 100644 --- a/app/views/bubbles/_image.html.erb +++ b/app/views/bubbles/_image.html.erb @@ -1,3 +1,3 @@
    - <%= image_tag bubble.image.presence || "", data: { upload_preview_target: "image" } %> + <%= image_tag bubble.image.presence || "", data: { upload_preview_target: "image" }, aria: { hidden: true } %>
    diff --git a/app/views/bubbles/list/_bubble.html.erb b/app/views/bubbles/list/_bubble.html.erb index 7a6b4e2b4..2afa6d87f 100644 --- a/app/views/bubbles/list/_bubble.html.erb +++ b/app/views/bubbles/list/_bubble.html.erb @@ -1,6 +1,7 @@
  • " style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>" data-controller="animation" data-animation-play-class="bubble--wobble" data-animation-play-on-load-value="true" data-action="mouseover->animation#play"> - <%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "flex-item-no-shrink" do %> + <%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "flex-item-no-shrink", + aria: { hidden: true }, tabindex: -1 do %>
    <% end %> @@ -14,13 +15,18 @@ <% end %> <% if bubble.messages.comments.many? %> - (<%= bubble.messages.comments.count %>) + + +
    <%= pluralize(bubble.messages.comments.count, "comment") %>
    +     <% end %> - + <% bubble.assignees.each do |assignee| %> - <%= link_to bubbles_path(@filter.as_params.merge(assignee_ids: [ assignee.id ])), class: "btn avatar", style: "font-size: 0.4em;" do %> - <%= avatar_image_tag assignee, loading: :lazy %> + <%= link_to bubbles_path(@filter.as_params.merge(assignee_ids: [ assignee.id ])), + class: "btn avatar", style: "font-size: 0.4em;", + aria: { label: assignee.name } do %> + <%= avatar_image_tag assignee, loading: :lazy, aria: { hidden: true } %> <% end %> <% end %> @@ -31,7 +37,8 @@ <% if bubble.due_on.present? %> - <%= local_datetime_tag bubble.due_on, style: :shortdate %> +
    Due on <%= local_datetime_tag bubble.due_on, style: :shortdate %>
    +     <% end %>
    • @@ -41,4 +48,4 @@ <%= render "bubbles/tags", bubble: bubble %>
    - \ No newline at end of file + diff --git a/app/views/bubbles/list/_divider.html.erb b/app/views/bubbles/list/_divider.html.erb index d60b67de8..96cc95754 100644 --- a/app/views/bubbles/list/_divider.html.erb +++ b/app/views/bubbles/list/_divider.html.erb @@ -1,10 +1,10 @@
  • Drag up or down
    -
    + <%= image_tag "drag.svg", aria: { hidden: true }, size: 24, class: "colorize--white" %> 10 Bubbled up -
    +
    • diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb index 9c618e4d5..4033b1456 100644 --- a/app/views/bubbles/show.html.erb +++ b/app/views/bubbles/show.html.erb @@ -56,11 +56,11 @@ <%= form_with model: @bubble, url: bucket_bubble_path(@bubble.bucket, @bubble), data: { controller: "form" } do |form| %> <% end %> <% end %> From 10cdb8c1a83a41529f3a4c8b6912c26a06cf900f Mon Sep 17 00:00:00 2001 From: Bruno Prieto Date: Fri, 14 Mar 2025 02:29:44 +0100 Subject: [PATCH 10/11] Improve accessibility of comments and reactions --- app/helpers/avatars_helper.rb | 6 ++++-- app/helpers/messages_helper.rb | 1 + .../controllers/reaction_delete_controller.js | 12 +++++++----- app/views/comments/_body.html.erb | 14 +++++++++----- app/views/comments/_comment.html.erb | 6 +++--- app/views/comments/reactions/_reaction.html.erb | 17 +++++++++-------- .../comments/reactions/_reactions.html.erb | 4 ++-- app/views/comments/reactions/new.html.erb | 11 ++++++----- 8 files changed, 41 insertions(+), 30 deletions(-) diff --git a/app/helpers/avatars_helper.rb b/app/helpers/avatars_helper.rb index a3ebd619a..2a6d927f4 100644 --- a/app/helpers/avatars_helper.rb +++ b/app/helpers/avatars_helper.rb @@ -10,8 +10,10 @@ module AvatarsHelper AVATAR_COLORS[Zlib.crc32(user.to_param) % AVATAR_COLORS.size] end - def avatar_tag(user, **options) - link_to user_path(user), title: user.name, class: "btn avatar", data: { turbo_frame: "_top" } do + def avatar_tag(user, hidden_for_screen_reader: false, **options) + link_to user_path(user), title: user.name, class: "btn avatar", data: { turbo_frame: "_top" }, + aria: { hidden: hidden_for_screen_reader, label: user.name }, + tabindex: hidden_for_screen_reader ? -1 : nil do avatar_image_tag(user, **options) end end diff --git a/app/helpers/messages_helper.rb b/app/helpers/messages_helper.rb index 0fc940b37..bac9af789 100644 --- a/app/helpers/messages_helper.rb +++ b/app/helpers/messages_helper.rb @@ -3,6 +3,7 @@ module MessagesHelper turbo_frame_tag dom_id(bubble, :messages), class: "comments align-center center borderless margin flex flex-column gap-half", style: "--bubble-color: <%= bubble.color %>", + role: "group", aria: { label: "Messages" }, data: { controller: "created-by-current-user", created_by_current_user_mine_class: "comment--mine" diff --git a/app/javascript/controllers/reaction_delete_controller.js b/app/javascript/controllers/reaction_delete_controller.js index f4672d693..3c89ec00d 100644 --- a/app/javascript/controllers/reaction_delete_controller.js +++ b/app/javascript/controllers/reaction_delete_controller.js @@ -6,14 +6,15 @@ export default class extends Controller { static values = { reacterId: Number } connect() { - if (this.#currentUserIsreacter) { + if (this.#currentUserIsReacter) { this.#setAccessibleAttributes() } } reveal() { - if (this.#currentUserIsreacter) { + if (this.#currentUserIsReacter) { this.element.classList.toggle(this.revealClass) + this.contentTarget.ariaExpanded = this.element.classList.contains(this.revealClass) this.buttonTarget.focus() } } @@ -23,11 +24,12 @@ export default class extends Controller { } #setAccessibleAttributes() { - this.contentTarget.setAttribute('tabindex', '0') - this.contentTarget.setAttribute('aria-describedby', 'delete_reaction_accessible_label') + this.contentTarget.role = "button" + this.contentTarget.tabIndex = 0 + this.contentTarget.ariaExpanded = false } - get #currentUserIsreacter() { + get #currentUserIsReacter() { return Current.user.id === this.reacterIdValue } } diff --git a/app/views/comments/_body.html.erb b/app/views/comments/_body.html.erb index 14b976386..c9cebe0ff 100644 --- a/app/views/comments/_body.html.erb +++ b/app/views/comments/_body.html.erb @@ -2,12 +2,16 @@ <%= turbo_frame_tag dom_id(comment) do %>
    - <%= link_to comment.creator.name, user_path(comment.creator), class: "txt-ink btn btn--plain fill-transparent", data: { turbo_frame: "_top" } %> - <%= link_to bucket_bubble_path(comment.bubble.bucket, comment.bubble, anchor: "comment_#{comment.id}"), class: "txt-undecorated" do %> - <%= local_datetime_tag comment.created_at, style: :shortdate, class: "comment__timestamp" %> - <% end %> +

    + <%= link_to comment.creator.name, user_path(comment.creator), class: "txt-ink btn btn--plain fill-transparent", data: { turbo_frame: "_top" } %> + <%= link_to bucket_bubble_path(comment.bubble.bucket, comment.bubble, anchor: "comment_#{comment.id}"), class: "txt-undecorated" do %> + <%= local_datetime_tag comment.created_at, style: :shortdate, class: "comment__timestamp" %> + <% end %> +

    - <%= link_to edit_bucket_bubble_comment_path(comment.bubble.bucket, comment.bubble, comment), class: "btn txt-small btn--plain fill-transparent comment__edit", style: "font-size: 0.4em; opacity: 0.5;" do %> + <%= link_to edit_bucket_bubble_comment_path(comment.bubble.bucket, comment.bubble, comment), role: "button", + class: "btn txt-small btn--plain fill-transparent comment__edit", + style: "font-size: 0.4em; opacity: 0.5;" do %> <%= image_tag "menu-dots-horizontal.svg", class: "icon colorize--black" %> Edit <% end %> diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 932a5095b..4bbe0d96b 100644 --- a/app/views/comments/_comment.html.erb +++ b/app/views/comments/_comment.html.erb @@ -1,7 +1,7 @@ <%= comment_tag comment do %> -
    - <%= avatar_tag comment.creator, loading: :lazy %> + <%= render "comments/body", comment: comment %> -<% end %> \ No newline at end of file +<% end %> diff --git a/app/views/comments/reactions/_reaction.html.erb b/app/views/comments/reactions/_reaction.html.erb index 4004725b3..84d5f9b99 100644 --- a/app/views/comments/reactions/_reaction.html.erb +++ b/app/views/comments/reactions/_reaction.html.erb @@ -5,14 +5,16 @@ data-reaction-delete-reacter-id-value="<%= reaction.reacter.id %>" data-controller="reaction-delete" data-reaction-delete-perform-class="reaction--deleting" data-reaction-delete-reveal-class="expanded" data-reaction-delete-reacter-id-value="<%= reaction.reacter.id %>"> -
    - <%= avatar_tag reaction.reacter, aria: { label: "#{reaction.reacter.name} reacted #{reaction.content}" }, loading: :lazy %> + - <%= tag.span reaction.content, role: "button", - class: [ "txt-small", { "txt-medium": reaction.all_emoji? } ], - data: { action: "click->reaction-delete#reveal keydown.enter->reaction-delete#reveal:prevent", reaction_delete_target: "content" } %> - + <%= tag.span reaction.content, class: [ "txt-small", { "txt-medium": reaction.all_emoji? } ], + data: { + action: "click->reaction-delete#reveal keydown.enter->reaction-delete#reveal:prevent", + reaction_delete_target: "content" } do %> + <%= "#{reaction.reacter.name} reacted #{reaction.content}" %> + <% end %> <%= button_to bucket_bubble_comment_reaction_path(comment.bubble.bucket, comment.bubble, comment, reaction), method: :delete, class: "btn btn--negative flex-item-justify-end reaction__delete", @@ -21,5 +23,4 @@ Delete this reaction <% end %>
    - Press enter to delete this reaction -<% end %> \ No newline at end of file +<% end %> diff --git a/app/views/comments/reactions/_reactions.html.erb b/app/views/comments/reactions/_reactions.html.erb index 9f4fe4b4b..67bee5e9c 100644 --- a/app/views/comments/reactions/_reactions.html.erb +++ b/app/views/comments/reactions/_reactions.html.erb @@ -7,7 +7,7 @@ <%= turbo_frame_tag comment, :new_reaction do %>
    - <%= link_to new_bucket_bubble_comment_reaction_path(comment.bubble.bucket, comment.bubble, comment), + <%= link_to new_bucket_bubble_comment_reaction_path(comment.bubble.bucket, comment.bubble, comment), role: "button", class: "txt-small btn reaction__action", action: "soft-keyboard#open" do %> <%= image_tag "reaction.svg", size: 20, aria: { hidden: "true" } %> Add a reaction @@ -15,4 +15,4 @@
    <% end %>
    -<% end %> \ No newline at end of file +<% end %> diff --git a/app/views/comments/reactions/new.html.erb b/app/views/comments/reactions/new.html.erb index e2ca711d3..e22cd1db8 100644 --- a/app/views/comments/reactions/new.html.erb +++ b/app/views/comments/reactions/new.html.erb @@ -1,14 +1,15 @@ <%= turbo_frame_tag dom_id(@comment, :new_reaction) do %> <%= form_with url: bucket_bubble_comment_reactions_path(@comment.bubble.bucket, @comment.bubble, @comment), class: "reaction reaction__form flex-inline postion--relative max-width align-center fill-white gap expanded", + html: { aria: { label: "New reaction" } }, data: { controller: "form", turbo_frame: dom_id(@comment, :reacting), action: "keydown.esc->form#cancel" } do |form| %> -