ActionMenu: Don't allow items to be unchecked in single-select mode (#…

…2192)

.changeset/hot-rats-lie.md

@@ -0,0 +1,7 @@
+---
+'@primer/view-components': patch
+---
+
+ActionMenu: Don't allow items to be unchecked in single-select mode
+
+<!-- Changed components: Primer::Alpha::ActionMenu -->

app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -139,14 +139,23 @@ export class ActionMenuElement extends HTMLElement {
       if (!item) return
       const ariaChecked = item.getAttribute('aria-checked')
       const checked = ariaChecked !== 'true'
-      item.setAttribute('aria-checked', `${checked}`)
+
       if (this.selectVariant === 'single') {
+        // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
+        if (checked) {
+          item.setAttribute('aria-checked', 'true')
+        }
+
         for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
           if (checkedItem !== item) {
             checkedItem.setAttribute('aria-checked', 'false')
           }
         }
+
         this.#setDynamicLabel()
+      } else {
+        // multi-select mode allows unchecking a checked item
+        item.setAttribute('aria-checked', `${checked}`)
       }
 
       this.#updateInput()

test/system/alpha/action_menu_test.rb

@@ -278,5 +278,73 @@ def test_opening_second_menu_closes_first_menu
       refute_selector "action-menu ul li", text: "Eat a dot"
       assert_selector "action-menu ul li", text: "Stomp a turtle"
     end
+
+    def test_single_select_item_checked
+      visit_preview(:single_select)
+
+      find("action-menu button[aria-controls]").click
+      find("action-menu ul li:nth-child(2)").click
+
+      # clicking item closes menu, so checked item is hidden
+      assert_selector "[aria-checked=true]", text: "Recursive", visible: :hidden
+    end
+
+    def test_single_select_item_unchecks_previously_checked_item
+      visit_preview(:single_select)
+
+      find("action-menu button[aria-controls]").click
+      find("action-menu ul li:nth-child(3)").click
+
+      # clicking item closes menu, so checked item is hidden
+      refute_selector "[aria-checked=true]", text: "Recursive", visible: :hidden
+
+      find("action-menu button[aria-controls]").click
+      find("action-menu ul li:nth-child(2)").click
+
+      # clicking item closes menu, so checked item is hidden
+      assert_selector "[aria-checked=true]", text: "Recursive", visible: :hidden
+    end
+
+    def test_single_selected_item_cannot_be_unchecked
+      visit_preview(:single_select)
+
+      find("action-menu button[aria-controls]").click
+      find("action-menu ul li:nth-child(2)").click
+
+      find("action-menu button[aria-controls]").click
+      find("action-menu ul li:nth-child(2)").click
+
+      # clicking item closes menu, so checked item is hidden
+      assert_selector "[aria-checked=true]", text: "Recursive", visible: :hidden
+    end
+
+    def test_multi_select_items_checked
+      visit_preview(:multiple_select)
+
+      find("action-menu button[aria-controls]").click
+      find("action-menu ul li:nth-child(2)").click
+      find("action-menu ul li:nth-child(3)").click
+
+      # clicking item closes menu, so checked item is hidden
+      assert_selector "[aria-checked=true]", text: "jonrohan"
+      assert_selector "[aria-checked=true]", text: "broccolinisoup"
+    end
+
+    def test_multi_select_items_can_be_unchecked
+      visit_preview(:multiple_select)
+
+      find("action-menu button[aria-controls]").click
+      find("action-menu ul li:nth-child(2)").click
+      find("action-menu ul li:nth-child(3)").click
+
+      # clicking item closes menu, so checked item is hidden
+      assert_selector "[aria-checked=true]", text: "jonrohan"
+      assert_selector "[aria-checked=true]", text: "broccolinisoup"
+
+      find("action-menu ul li:nth-child(2)").click
+      find("action-menu ul li:nth-child(3)").click
+
+      refute_selector "[aria-checked=true]"
+    end
   end
 end