noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Keep the state layer off a disabled menu item

Browse Source 
Plan step 36. The old `state-layer` utility hid its layer on
`[aria-disabled='true']`; the menu item's hand-written layer dropped
that, so a disabled item, which stays focusable, drew the 10% focus
layer. Its 38% ink now reads --md-sys-state-disabled-content-opacity,
as button.css does, instead of a literal.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 17:07:10 +02:00
co-authored by Claude Opus 5
parent 4893eaf398
commit f53c559c40
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/menu-item.css
+7 -2
View File
@@ -91,6 +91,11 @@
&:active::before {
opacity: var(--md-sys-state-pressed-state-layer-opacity);
}
/* A disabled item stays focusable and keeps its focus ring, but has no state layer. */
&[aria-disabled='true']::before {
display: none;
}
}
[data-md-menu-item]:first-child {
@@ -124,7 +129,7 @@
}
[data-md-menu-item][aria-disabled='true'] {
--md-menu-item-ink: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
--md-menu-item-ink: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
pointer-events: none;
color: var(--md-menu-item-ink);
@@ -135,7 +140,7 @@
}
[data-md-menu-item][aria-disabled='true'] [data-md-icon] {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) !important;
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent) !important;
}
[data-md-menu-item-text] {
tests/Feature/Components/MenuTest.php
+3 -2
View File
@@ -130,7 +130,8 @@ it('links an item, and keeps a disabled one out of reach', function () {
->assertSee('aria-disabled="true"', false)
->assertSee('data-md-menu-item', false);
expect(ComponentStylesheet::read('menu-item')->declarations("[data-md-menu-item][aria-disabled='true']"))->toMatchArray(['pointer-events' => 'none']);
expect(ComponentStylesheet::read('menu-item')->declarations("[data-md-menu-item][aria-disabled='true']"))->toMatchArray(['pointer-events' => 'none'])
->and(ComponentStylesheet::read('menu-item')->declarations("[data-md-menu-item][aria-disabled='true']::before"))->toBe(['display' => 'none']);
});
it('separates and labels groups', function () {
@@ -178,7 +179,7 @@ it('adds icon-class to the leading icon, over its own colour but not over disabl
// icon-class is a caller class, unlayered, so it always outranks the item's own layered
// ink — except for a disabled item, whose icon rule is !important.
->and(ComponentStylesheet::read('menu-item')->declarations('[data-md-menu-item] [data-md-icon]'))->toBe(['color' => 'var(--md-menu-item-ink)'])
->and(ComponentStylesheet::read('menu-item')->declarations("[data-md-menu-item][aria-disabled='true'] [data-md-icon]"))->toBe(['color' => 'color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) !important']);
->and(ComponentStylesheet::read('menu-item')->declarations("[data-md-menu-item][aria-disabled='true'] [data-md-icon]"))->toBe(['color' => 'color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent) !important']);
});
it('opens a submenu beside the item that holds it', function () {