Add checkbox labels to bulk edit UI

Adds checkbox labels as all form controls must have labels
for assistive technologies. Also improves the bulk edit
feature specs.

Changelog: fixed

app/assets/javascripts/issuable_list/components/issuable_item.vue

@@ -169,7 +169,9 @@ export default {
           :checked="checked"
           :data-id="issuable.id"
           @input="$emit('checked-input', $event)"
-        />
+        >
+          <span class="gl-sr-only">{{ issuable.title }}</span>
+        </gl-form-checkbox>
       </div>
       <div class="issuable-main-info">
         <div data-testid="issuable-title" class="issue-title title">

app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue

@@ -324,7 +324,9 @@ export default {
       class="gl-align-self-center"
       :checked="checkboxChecked"
       @input="$emit('checked-input', $event)"
-    />
+    >
+      <span class="gl-sr-only">{{ __('Select all') }}</span>
+    </gl-form-checkbox>
     <gl-filtered-search
       ref="filteredSearchInput"
       v-model="filterValue"

app/views/projects/issues/_issue.html.haml

@@ -3,7 +3,9 @@
   .issuable-info-container
     - if @can_bulk_update
       .issue-check.hidden
-        = check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected-issuable"
+        - checkbox_id = dom_id(issue, "selected")
+        %label.gl-sr-only{ for: checkbox_id }= issue.title
+        = check_box_tag checkbox_id, nil, false, 'data-id' => issue.id, class: "selected-issuable"
     .issuable-main-info
       .issue-title.title
         %span.issue-title-text.js-onboarding-issue-item{ dir: "auto" }

app/views/projects/merge_requests/_merge_request.html.haml

 %li{ id: dom_id(merge_request), class: mr_css_classes(merge_request), data: { labels: merge_request.label_ids, id: merge_request.id } }
   - if @can_bulk_update
     .issue-check.hidden
-      = check_box_tag dom_id(merge_request, "selected"), nil, false, 'data-id' => merge_request.id, class: "selected-issuable"
+      - checkbox_id = dom_id(merge_request, "selected")
+      %label.gl-sr-only{ for: checkbox_id }= merge_request.title
+      = check_box_tag checkbox_id, nil, false, 'data-id' => merge_request.id, class: "selected-issuable"
 
   .issuable-info-container
     .issuable-main-info

app/views/shared/issuable/_search_bar.html.haml

@@ -20,7 +20,9 @@
           = hidden_field_tag :search, params[:search]
         - if @can_bulk_update
           .check-all-holder.d-none.d-sm-block.hidden
-            = check_box_tag "check-all-issues", nil, false, class: "check-all-issues left"
+            - checkbox_id = 'check-all-issues'
+            %label.gl-sr-only{ for: checkbox_id }= _('Select all')
+            = check_box_tag checkbox_id, nil, false, class: "check-all-issues left"
         - if Feature.enabled?(:boards_filtered_search, @group) && is_epic_board
           #js-board-filtered-search{ data: { full_path: @group&.full_path } }
         - else

ee/app/views/groups/epics/_epic.html.haml

@@ -2,7 +2,9 @@
   .issuable-info-container
     - if @can_bulk_update
       .issue-check.hidden
-        = check_box_tag dom_id(epic, "selected"), nil, false, 'data-id' => epic.id, class: "selected-issuable"
+        - checkbox_id = dom_id(epic, "selected")
+        %label.gl-sr-only{ for: checkbox_id }= epic.title
+        = check_box_tag checkbox_id, nil, false, 'data-id' => epic.id, class: "selected-issuable"
     .issuable-main-info
       .issue-title.title
         %span.issue-title-text{ data: { qa_selector: 'epic_title_text' } }

ee/app/views/shared/epic/_search_bar.html.haml

@@ -27,7 +27,9 @@
         = hidden_field_tag :search, params[:search]
       - if @can_bulk_update
         .check-all-holder.d-none.d-sm-block.hidden
-          = check_box_tag "check-all-issues", nil, false, class: "check-all-issues left"
+          - checkbox_id = 'check-all-issues'
+          %label.gl-sr-only{ for: checkbox_id }= _('Select all')
+          = check_box_tag checkbox_id, nil, false, class: "check-all-issues left"
       .epics-other-filters.filtered-search-wrapper.d-flex.flex-column.flex-md-row
         .filtered-search-box
           = dropdown_tag(_('Recent searches'),

ee/spec/features/issues/user_bulk_edits_issues_spec.rb

@@ -17,11 +17,11 @@ RSpec.describe 'Issues > Bulk edit issues' do
   shared_examples 'bulk edit option in sidebar' do |context|
     it 'is present when bulk edit is enabled' do
       enable_bulk_update(context)
-      expect(page).to have_css('.issuable-sidebar')
+      expect(page).to have_css('aside[aria-label="Bulk update"]')
     end
 
     it 'is not present when bulk edit is disabled' do
-      expect(page).not_to have_css('.issuable-sidebar')
+      expect(page).not_to have_css('aside[aria-label="Bulk update"]')
     end
   end
 
@@ -33,8 +33,10 @@ RSpec.describe 'Issues > Bulk edit issues' do
     context 'epic', :js do
       context 'to all issues' do
         before do
-          check 'check-all-issues'
-          open_epic_dropdown [epic.title]
+          check 'Select all'
+          click_button 'Select epic'
+          wait_for_requests
+          click_button epic.title
           update_issues
         end
 
@@ -46,8 +48,10 @@ RSpec.describe 'Issues > Bulk edit issues' do
 
       context 'to a issue' do
         before do
-          check "selected_issue_#{issue1.id}"
-          open_epic_dropdown [epic.title]
+          check issue1.title
+          click_button 'Select epic'
+          wait_for_requests
+          click_button epic.title
           update_issues
         end
 
@@ -67,8 +71,9 @@ RSpec.describe 'Issues > Bulk edit issues' do
     context 'health_status', :js do
       context 'to all issues' do
         before do
-          check 'check-all-issues'
-          open_health_status_dropdown ['On track']
+          check 'Select all'
+          click_button 'Select health status'
+          click_button 'On track'
           update_issues
         end
 
@@ -80,8 +85,9 @@ RSpec.describe 'Issues > Bulk edit issues' do
 
       context 'to an issue' do
         before do
-          check "selected_issue_#{issue1.id}"
-          open_health_status_dropdown ['At risk']
+          check issue1.title
+          click_button 'Select health status'
+          click_button 'At risk'
           update_issues
         end
 
@@ -100,8 +106,10 @@ RSpec.describe 'Issues > Bulk edit issues' do
       end
       context 'to all issues' do
         before do
-          check 'check-all-issues'
-          open_iteration_dropdown ['Iteration 1']
+          check 'Select all'
+          click_button 'Select iteration'
+          wait_for_requests
+          click_button 'Iteration 1'
           update_issues
         end
 
@@ -142,8 +150,8 @@ RSpec.describe 'Issues > Bulk edit issues' do
   shared_examples 'bulk edit health_status with insufficient permissions' do
     it 'cannot bulk assign health_status', :aggregate_failures do
       expect(page).not_to have_button 'Edit issues'
-      expect(page).not_to have_css '.check-all-issues'
-      expect(page).not_to have_css '.issue-check'
+      expect(page).not_to have_unchecked_field 'Select all'
+      expect(page).not_to have_unchecked_field issue1.title
     end
   end
 
@@ -200,33 +208,6 @@ RSpec.describe 'Issues > Bulk edit issues' do
     end
   end
 
-  def open_epic_dropdown(items = [])
-    page.within('.issues-bulk-update') do
-      click_button 'Select epic'
-      items.map do |item|
-        find('.gl-new-dropdown-item', text: item).click
-      end
-    end
-  end
-
-  def open_health_status_dropdown(items = [])
-    page.within('.issues-bulk-update') do
-      click_button 'Select health status'
-      items.map do |item|
-        find('[data-testid="health-status-dropdown-item"]', text: item).click
-      end
-    end
-  end
-
-  def open_iteration_dropdown(items = [])
-    page.within('.issues-bulk-update') do
-      click_button 'Select iteration'
-      items.map do |item|
-        find('.dropdown-item', text: item).click
-      end
-    end
-  end
-
   def update_issues
     click_button 'Update all'
     wait_for_requests
@@ -241,6 +222,8 @@ RSpec.describe 'Issues > Bulk edit issues' do
       visit issues_group_path(group)
     end
 
+    wait_for_requests
+
     click_button 'Edit issues'
   end
 end

spec/features/issues/user_bulk_edits_issues_labels_spec.rb

@@ -20,17 +20,13 @@ RSpec.describe 'Issues > Labels bulk assignment' do
     end
 
     context 'sidebar' do
-      before do
-        enable_bulk_update
-      end
-
       it 'is present when bulk edit is enabled' do
-        expect(page).to have_css('.issuable-sidebar')
+        enable_bulk_update
+        expect(page).to have_css 'aside[aria-label="Bulk update"]'
       end
 
       it 'is not present when bulk edit is disabled' do
-        disable_bulk_update
-        expect(page).not_to have_css('.issuable-sidebar')
+        expect(page).not_to have_css 'aside[aria-label="Bulk update"]'
       end
     end
 
@@ -42,7 +38,7 @@ RSpec.describe 'Issues > Labels bulk assignment' do
       context 'a label' do
         context 'to all issues' do
           before do
-            check 'check-all-issues'
+            check 'Select all'
             open_labels_dropdown ['bug']
             update_issues
           end
@@ -57,8 +53,8 @@ RSpec.describe 'Issues > Labels bulk assignment' do
 
         context 'to some issues' do
           before do
-            check "selected_issue_#{issue1.id}"
-            check "selected_issue_#{issue2.id}"
+            check issue1.title
+            check issue2.title
             open_labels_dropdown ['bug']
             update_issues
           end
@@ -73,7 +69,7 @@ RSpec.describe 'Issues > Labels bulk assignment' do
 
         context 'to an issue' do
           before do
-            check "selected_issue_#{issue1.id}"
+            check issue1.title
             open_labels_dropdown ['bug']
             update_issues
           end
@@ -89,7 +85,7 @@ RSpec.describe 'Issues > Labels bulk assignment' do
         context 'to an issue by selecting the label first' do
           before do
             open_labels_dropdown ['bug']
-            check "selected_issue_#{issue1.id}"
+            check issue1.title
             update_issues
           end
 
@@ -105,7 +101,7 @@ RSpec.describe 'Issues > Labels bulk assignment' do
       context 'multiple labels' do
         context 'to all issues' do
           before do
-            check 'check-all-issues'
+            check 'Select all'
             open_labels_dropdown %w(bug feature)
             update_issues
           end
@@ -120,7 +116,7 @@ RSpec.describe 'Issues > Labels bulk assignment' do
 
         context 'to a issue' do
           before do
-            check "selected_issue_#{issue1.id}"
+            check issue1.title
             open_labels_dropdown %w(bug feature)
             update_issues
           end
@@ -141,7 +137,7 @@ RSpec.describe 'Issues > Labels bulk assignment' do
         issue2.labels << feature
 
         enable_bulk_update
-        check 'check-all-issues'
+        check 'Select all'
 
         open_labels_dropdown ['bug']
         update_issues
@@ -162,7 +158,7 @@ RSpec.describe 'Issues > Labels bulk assignment' do
           issue2.labels << feature
 
           enable_bulk_update
-          check 'check-all-issues'
+          check 'Select all'
           unmark_labels_in_dropdown %w(bug feature)
           update_issues
         end
@@ -229,7 +225,7 @@ RSpec.describe 'Issues > Labels bulk assignment' do
           expect(find("#issue_#{issue1.id}")).to have_content 'bug'
           expect(find("#issue_#{issue2.id}")).to have_content 'feature'
 
-          check 'check-all-issues'
+          check 'Select all'
 
           open_milestone_dropdown(['First Release'])
           update_issues
@@ -250,7 +246,7 @@ RSpec.describe 'Issues > Labels bulk assignment' do
         it 'keeps existing label and new label is present' do
           expect(find("#issue_#{issue1.id}")).to have_content 'bug'
 
-          check 'check-all-issues'
+          check 'Select all'
           open_milestone_dropdown ['First Release']
           open_labels_dropdown ['feature']
           update_issues
@@ -277,7 +273,7 @@ RSpec.describe 'Issues > Labels bulk assignment' do
           expect(find("#issue_#{issue1.id}")).to have_content 'bug'
           expect(find("#issue_#{issue2.id}")).to have_content 'feature'
 
-          check 'check-all-issues'
+          check 'Select all'
 
           open_milestone_dropdown ['First Release']
           unmark_labels_in_dropdown ['feature']
@@ -309,7 +305,7 @@ RSpec.describe 'Issues > Labels bulk assignment' do
           expect(find("#issue_#{issue2.id}")).to have_content 'feature'
           expect(find("#issue_#{issue2.id}")).to have_content 'First Release'
 
-          check 'check-all-issues'
+          check 'Select all'
           open_milestone_dropdown(['No milestone'])
           update_issues
 
@@ -369,31 +365,31 @@ RSpec.describe 'Issues > Labels bulk assignment' do
       end
 
       it 'applies label from filtered results' do
-        check 'check-all-issues'
+        check 'Select all'
 
-        page.within('.issues-bulk-update') do
+        within('aside[aria-label="Bulk update"]') do
           click_button 'Select labels'
           wait_for_requests
 
-          expect(find('.dropdown-menu-labels li', text: 'bug')).to have_css('.is-active')
-          expect(find('.dropdown-menu-labels li', text: 'feature')).to have_css('.is-indeterminate')
+          expect(page).to have_link 'bug', class: 'is-active'
+          expect(page).to have_link 'feature', class: 'is-indeterminate'
 
           click_link 'bug'
-          find('.dropdown-input-field', visible: true).set('wontfix')
+          fill_in 'Search', with: 'wontfix'
           click_link 'wontfix'
         end
 
         update_issues
 
-        page.within '.issues-holder' do
-          expect(find("#issue_#{issue1.id}")).not_to have_content 'bug'
-          expect(find("#issue_#{issue1.id}")).to have_content 'feature'
-          expect(find("#issue_#{issue1.id}")).to have_content 'wontfix'
+        first_issue = find("#issue_#{issue1.id}")
+        expect(first_issue).not_to have_content 'bug'
+        expect(first_issue).to have_content 'feature'
+        expect(first_issue).to have_content 'wontfix'
 
-          expect(find("#issue_#{issue2.id}")).not_to have_content 'bug'
-          expect(find("#issue_#{issue2.id}")).not_to have_content 'feature'
-          expect(find("#issue_#{issue2.id}")).to have_content 'wontfix'
-        end
+        second_issue = find("#issue_#{issue2.id}")
+        expect(second_issue).not_to have_content 'bug'
+        expect(second_issue).not_to have_content 'feature'
+        expect(second_issue).to have_content 'wontfix'
       end
     end
   end
@@ -408,24 +404,22 @@ RSpec.describe 'Issues > Labels bulk assignment' do
     context 'cannot bulk assign labels' do
       it do
         expect(page).not_to have_button 'Edit issues'
-        expect(page).not_to have_css '.check-all-issues'
-        expect(page).not_to have_css '.issue-check'
+        expect(page).not_to have_unchecked_field 'Select all'
+        expect(page).not_to have_unchecked_field issue1.title
       end
     end
   end
 
   def open_milestone_dropdown(items = [])
-    page.within('.issues-bulk-update') do
-      click_button 'Select milestone'
-      wait_for_requests
-      items.map do |item|
-        click_link item
-      end
+    click_button 'Select milestone'
+    wait_for_requests
+    items.map do |item|
+      click_link item
     end
   end
 
   def open_labels_dropdown(items = [], unmark = false)
-    page.within('.issues-bulk-update') do
+    within('aside[aria-label="Bulk update"]') do
       click_button 'Select labels'
       wait_for_requests
       items.map do |item|
@@ -446,12 +440,10 @@ RSpec.describe 'Issues > Labels bulk assignment' do
   end
 
   def check_issue(issue, uncheck = false)
-    page.within('.issues-list') do
-      if uncheck
-        uncheck "selected_issue_#{issue.id}"
-      else
-        check "selected_issue_#{issue.id}"
-      end
+    if uncheck
+      uncheck issue.title
+    else
+      check issue.title
     end
   end
 
@@ -460,12 +452,13 @@ RSpec.describe 'Issues > Labels bulk assignment' do
   end
 
   def update_issues
-    find('.update-selected-issues').click
+    click_button 'Update all'
     wait_for_requests
   end
 
   def enable_bulk_update
     visit project_issues_path(project)
+    wait_for_requests
     click_button 'Edit issues'
   end
 

spec/features/issues/user_bulk_edits_issues_spec.rb

@@ -17,10 +17,10 @@ RSpec.describe 'Multiple issue updating from issues#index', :js do
       visit project_issues_path(project)
 
       click_button 'Edit issues'
-      find('#check-all-issues').click
-      find('.js-issue-status').click
+      check 'Select all'
+      click_button 'Select status'
+      click_link 'Closed'
 
-      find('.dropdown-menu-status a', text: 'Closed').click
       click_update_issues_button
       expect(page).to have_selector('.issue', count: 0)
     end
@@ -30,10 +30,10 @@ RSpec.describe 'Multiple issue updating from issues#index', :js do
       visit project_issues_path(project, state: 'closed')
 
       click_button 'Edit issues'
-      find('#check-all-issues').click
-      find('.js-issue-status').click
+      check 'Select all'
+      click_button 'Select status'
+      click_link 'Open'
 
-      find('.dropdown-menu-status a', text: 'Open').click
       click_update_issues_button
       expect(page).to have_selector('.issue', count: 0)
     end
@@ -44,10 +44,10 @@ RSpec.describe 'Multiple issue updating from issues#index', :js do
       visit project_issues_path(project)
 
       click_button 'Edit issues'
-      find('#check-all-issues').click
+      check 'Select all'
       click_update_assignee_button
+      click_link user.username
 
-      find('.dropdown-menu-user-link', text: user.username).click
       click_update_issues_button
 
       page.within('.issue .controls') do
@@ -59,13 +59,15 @@ RSpec.describe 'Multiple issue updating from issues#index', :js do
       create_assigned
       visit project_issues_path(project)
 
+      expect(find('.issue:first-of-type')).to have_link "Assigned to #{user.name}"
+
       click_button 'Edit issues'
-      find('#check-all-issues').click
+      check 'Select all'
       click_update_assignee_button
-
       click_link 'Unassigned'
       click_update_issues_button
-      expect(find('.issue:first-child .controls')).not_to have_css('.author-link')
+
+      expect(find('.issue:first-of-type')).not_to have_link "Assigned to #{user.name}"
     end
   end
 
@@ -76,10 +78,9 @@ RSpec.describe 'Multiple issue updating from issues#index', :js do
       visit project_issues_path(project)
 
       click_button 'Edit issues'
-      find('#check-all-issues').click
-      find('.issues-bulk-update .js-milestone-select').click
-
-      find('.dropdown-menu-milestone a', text: milestone.title).click
+      check 'Select all'
+      click_button 'Select milestone'
+      click_link milestone.title
       click_update_issues_button
 
       expect(page.find('.issue')).to have_content milestone.title
@@ -91,16 +92,15 @@ RSpec.describe 'Multiple issue updating from issues#index', :js do
 
       wait_for_requests
 
-      expect(first('.issue')).to have_content milestone.title
+      expect(find('.issue:first-of-type')).to have_text milestone.title
 
       click_button 'Edit issues'
-      find('#check-all-issues').click
-      find('.issues-bulk-update .js-milestone-select').click
-
-      find('.dropdown-menu-milestone a', text: "No milestone").click
+      check 'Select all'
+      click_button 'Select milestone'
+      click_link 'No milestone'
       click_update_issues_button
 
-      expect(find('.issue:first-child')).not_to have_content milestone.title
+      expect(find('.issue:first-of-type')).not_to have_text milestone.title
     end
   end
 
@@ -117,12 +117,12 @@ RSpec.describe 'Multiple issue updating from issues#index', :js do
   end
 
   def click_update_assignee_button
-    find('.js-update-assignee').click
+    click_button 'Select assignee'
     wait_for_requests
   end
 
   def click_update_issues_button
-    find('.update-selected-issues').click
+    click_button 'Update all'
     wait_for_requests
   end
 end

spec/features/merge_requests/user_mass_updates_spec.rb

@@ -44,7 +44,7 @@ RSpec.describe 'Merge requests > User mass updates', :js do
 
       click_button 'Edit merge requests'
 
-      expect(page).not_to have_css('.js-issue-status')
+      expect(page).not_to have_button 'Select status'
     end
   end
 
@@ -57,9 +57,7 @@ RSpec.describe 'Merge requests > User mass updates', :js do
       it 'updates merge request with assignee' do
         change_assignee(user.name)
 
-        page.within('.merge-request .controls') do
-          expect(find('.author-link')["title"]).to have_content(user.name)
-        end
+        expect(find('.merge-request')).to have_link "Assigned to #{user.name}"
       end
     end
 
@@ -72,7 +70,7 @@ RSpec.describe 'Merge requests > User mass updates', :js do
       it 'removes assignee from the merge request' do
         change_assignee('Unassigned')
 
-        expect(find('.merge-request .controls')).not_to have_css('.author-link')
+        expect(find('.merge-request')).not_to have_link "Assigned to #{user.name}"
       end
     end
   end
@@ -109,35 +107,33 @@ RSpec.describe 'Merge requests > User mass updates', :js do
 
   def change_status(text)
     click_button 'Edit merge requests'
-    find('#check-all-issues').click
-    find('.js-issue-status').click
-    find('.dropdown-menu-status a', text: text).click
+    check 'Select all'
+    click_button 'Select status'
+    click_link text
     click_update_merge_requests_button
   end
 
   def change_assignee(text)
     click_button 'Edit merge requests'
-    find('#check-all-issues').click
-    find('.js-update-assignee').click
-    wait_for_requests
-
-    page.within '.dropdown-menu-user' do
+    check 'Select all'
+    within 'aside[aria-label="Bulk update"]' do
+      click_button 'Select assignee'
+      wait_for_requests
       click_link text
     end
-
     click_update_merge_requests_button
   end
 
   def change_milestone(text)
     click_button 'Edit merge requests'
-    find('#check-all-issues').click
-    find('.issues-bulk-update .js-milestone-select').click
-    find('.dropdown-menu-milestone a', text: text).click
+    check 'Select all'
+    click_button 'Select milestone'
+    click_link text
     click_update_merge_requests_button
   end
 
   def click_update_merge_requests_button
-    find('.update-selected-issues').click
+    click_button 'Update all'
     wait_for_requests
   end
 end