Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Aug 7, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/hot-rats-lie.md
Original file line number Diff line number Diff line change
@@ -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 -->
11 changes: 10 additions & 1 deletion app/components/primer/alpha/action_menu/action_menu_element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
68 changes: 68 additions & 0 deletions test/system/alpha/action_menu_test.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
Loading