fix(filter-chip): replace aria-pressed with CSS class for menu button selected state

.changeset/loose-lizards-drop.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": patch
+---
+
+replace aria-pressed with CSS class for menu button selected state

packages/ebayui-core-react/src/ebay-filter-chip/__tests__/__snapshots__/render.spec.tsx.snap

@@ -76,7 +76,6 @@ exports[`<EbayFilterChip /> rendering > renders collection story correctly 1`] =
     </button>
     <button
       aria-expanded="false"
-      aria-pressed="false"
       class="filter-chip filter-chip--animated"
       type="button"
     >
@@ -197,7 +196,6 @@ exports[`<EbayFilterChip /> rendering > renders menu expanded story correctly 1`
 <div>
   <button
     aria-expanded="true"
-    aria-pressed="false"
     class="filter-chip filter-chip--animated"
     type="button"
   >
@@ -220,11 +218,42 @@ exports[`<EbayFilterChip /> rendering > renders menu expanded story correctly 1`
 </div>
 `;
 
+exports[`<EbayFilterChip /> rendering > renders menu selected story correctly 1`] = `
+<div>
+  <button
+    aria-expanded="false"
+    class="filter-chip filter-chip--selected filter-chip--animated"
+    type="button"
+  >
+    <span
+      class="filter-chip__text"
+    >
+      Menu Selected
+      <span
+        class="clipped"
+      >
+        - 
+        Filter Applied
+      </span>
+    </span>
+    <svg
+      aria-hidden="true"
+      class="filter-chip__trailing icon icon--12"
+      focusable="false"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <use
+        xlink:href="#icon-chevron-down-12"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
 exports[`<EbayFilterChip /> rendering > renders menu story correctly 1`] = `
 <div>
   <button
     aria-expanded="false"
-    aria-pressed="false"
     class="filter-chip filter-chip--animated"
     type="button"
   >

packages/ebayui-core-react/src/ebay-filter-chip/__tests__/index.spec.tsx

@@ -109,6 +109,32 @@ describe("<EbayFilterChip />", () => {
 
             expect(container.querySelector(".filter-chip__trailing")).toBeInTheDocument();
         });
+
+        it("should not render aria-pressed", () => {
+            const { getByRole } = render(<EbayFilterChip variant="menu">Menu Filter</EbayFilterChip>);
+
+            expect(getByRole("button")).not.toHaveAttribute("aria-pressed");
+        });
+
+        it("should add filter-chip--selected class when selected", () => {
+            const { container } = render(
+                <EbayFilterChip variant="menu" selected>
+                    Menu Filter
+                </EbayFilterChip>,
+            );
+
+            expect(container.querySelector(".filter-chip")).toHaveClass("filter-chip--selected");
+        });
+
+        it("should show clipped text when selected", () => {
+            const { container } = render(
+                <EbayFilterChip variant="menu" selected>
+                    Menu Filter
+                </EbayFilterChip>,
+            );
+
+            expect(container.querySelector(".clipped")).toHaveTextContent("- Filter Applied");
+        });
     });
 
     describe("anchor variant", () => {

packages/ebayui-core-react/src/ebay-filter-chip/__tests__/index.stories.tsx

@@ -171,6 +171,12 @@ export const Menu: StoryFn<typeof EbayFilterChip> = (args) => (
     </EbayFilterChip>
 );
 
+export const MenuSelected: StoryFn<typeof EbayFilterChip> = (args) => (
+    <EbayFilterChip {...args} variant="menu" selected>
+        Menu Selected
+    </EbayFilterChip>
+);
+
 export const MenuExpanded: StoryFn<typeof EbayFilterChip> = (args) => (
     <EbayFilterChip {...args} variant="menu" expanded>
         Menu Expanded

packages/ebayui-core-react/src/ebay-filter-chip/__tests__/render.spec.tsx

@@ -11,6 +11,7 @@ const {
     Expressive,
     ExpressiveSelected,
     Menu,
+    MenuSelected,
     MenuExpanded,
     Anchor,
     AnchorSelected,
@@ -49,6 +50,11 @@ describe("<EbayFilterChip /> rendering", () => {
         expect(container).toMatchSnapshot();
     });
 
+    it("renders menu selected story correctly", () => {
+        const { container } = render(<MenuSelected />);
+        expect(container).toMatchSnapshot();
+    });
+
     it("renders menu expanded story correctly", () => {
         const { container } = render(<MenuExpanded />);
         expect(container).toMatchSnapshot();

packages/ebayui-core-react/src/ebay-filter-chip/filter-chip.tsx

@@ -81,11 +81,13 @@ const EbayFilterChip: FC<EbayFilterChipProps> = ({
         }
     };
 
+    const isMenu = variant === "menu";
+
     const classNames = classnames(
         "filter-chip",
         {
             "filter-chip--expressive": variant === "expressive",
-            "filter-chip--selected": isAnchor && selected,
+            "filter-chip--selected": (isAnchor || isMenu) && selected,
         },
         className,
     );
@@ -100,8 +102,8 @@ const EbayFilterChip: FC<EbayFilterChipProps> = ({
             onClick={handleClick}
             href={!disabled ? href : undefined}
             type={!isAnchor ? "button" : undefined}
-            aria-pressed={!isAnchor ? (selected ? "true" : "false") : undefined}
-            aria-expanded={variant === "menu" ? (expanded ? "true" : "false") : undefined}
+            aria-pressed={!isAnchor && !isMenu ? (selected ? "true" : "false") : undefined}
+            aria-expanded={isMenu ? (expanded ? "true" : "false") : undefined}
             disabled={!isAnchor ? disabled : undefined}
         >
             {variant === "expressive" ? <span className="filter-chip__media">{image}</span> : null}
@@ -110,7 +112,7 @@ const EbayFilterChip: FC<EbayFilterChipProps> = ({
 
             <span className="filter-chip__text">
                 {children}
-                {selected && isAnchor ? <span className="clipped">- {a11ySelectedText}</span> : null}
+                {selected && (isAnchor || isMenu) ? <span className="clipped">- {a11ySelectedText}</span> : null}
             </span>
 
             {variant === "menu" ? <EbayIconChevronDown12 className="filter-chip__trailing" /> : null}

packages/ebayui-core/src/components/ebay-filter-chip/index.marko

@@ -21,13 +21,13 @@ $ const rootTag = isAnchor ? "a" : "button";
         "filter-chip",
         state.mounted && "filter-chip--animated",
         variant === "expressive" && "filter-chip--expressive",
-        isAnchor && state.selected && "filter-chip--selected",
+        (isAnchor || variant === "menu") && state.selected && "filter-chip--selected",
         inputClass
     ]
     type=!isAnchor && "button"
     href=!disabled ? href : undefined
     disabled=!isAnchor ? disabled : undefined
-    aria-pressed=!isAnchor && (state.selected ? "true" : "false")
+    aria-pressed=!isAnchor && variant !== "menu" && (state.selected ? "true" : "false")
     aria-expanded=variant === "menu" && (state.expanded ? "true" : "false")
     on-click("handleButtonClick")
 >
@@ -43,7 +43,7 @@ $ const rootTag = isAnchor ? "a" : "button";
 
     <span class="filter-chip__text">
         <${renderBody}/>
-        <if(state.selected && isAnchor)>
+        <if(state.selected && (isAnchor || variant === "menu"))>
             <span class="clipped">
                 - ${a11ySelectedText}
             </span>

packages/ebayui-core/src/components/ebay-filter-chip/test/__snapshots__/test.server.js.snap

@@ -116,7 +116,6 @@ exports[`ebay-filter-chip > renders menu button 1`] = `
 "<DocumentFragment>
   <button
     aria-expanded="false"
-    aria-pressed="false"
     class="filter-chip"
     type="button"
   >
@@ -154,7 +153,6 @@ exports[`ebay-filter-chip > renders menu button expanded 1`] = `
 "<DocumentFragment>
   <button
     aria-expanded="true"
-    aria-pressed="false"
     class="filter-chip"
     type="button"
   >
@@ -192,14 +190,18 @@ exports[`ebay-filter-chip > renders menu button expanded and selected 1`] = `
 "<DocumentFragment>
   <button
     aria-expanded="true"
-    aria-pressed="true"
-    class="filter-chip"
+    class="filter-chip filter-chip--selected"
     type="button"
   >
     <span
       class="filter-chip__text"
     >
       Filter
+      <span
+        class="clipped"
+      >
+        - Filter Applied
+      </span>
     </span>
     <svg
       aria-hidden="true"
@@ -230,14 +232,18 @@ exports[`ebay-filter-chip > renders menu button selected 1`] = `
 "<DocumentFragment>
   <button
     aria-expanded="false"
-    aria-pressed="true"
-    class="filter-chip"
+    class="filter-chip filter-chip--selected"
     type="button"
   >
     <span
       class="filter-chip__text"
     >
       Filter
+      <span
+        class="clipped"
+      >
+        - Filter Applied
+      </span>
     </span>
     <svg
       aria-hidden="true"

packages/ebayui-core/src/components/ebay-menu-button/test/__snapshots__/test.server.js.snap

@@ -920,7 +920,6 @@ exports[`menu-button > renders with filter 1`] = `
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-pressed="false"
       class="filter-chip menu-button__button"
       type="button"
     >
@@ -1307,7 +1306,6 @@ exports[`menu-button > renders with footer 1`] = `
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-pressed="false"
       class="filter-chip menu-button__button"
       type="button"
     >
@@ -2331,7 +2329,6 @@ exports[`menu-button > renders with type=checkbox and checked=false and as filte
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-pressed="false"
       class="filter-chip menu-button__button"
       type="button"
     >
@@ -2568,7 +2565,6 @@ exports[`menu-button > renders with type=checkbox and checked=true and as filter
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-pressed="false"
       class="filter-chip menu-button__button"
       type="button"
     >
@@ -2805,7 +2801,6 @@ exports[`menu-button > renders with type=radio and checked=false and as filter 1
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-pressed="false"
       class="filter-chip menu-button__button"
       type="button"
     >
@@ -3046,7 +3041,6 @@ exports[`menu-button > renders with type=radio and checked=true and as filter 1`
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-pressed="false"
       class="filter-chip menu-button__button"
       type="button"
     >

packages/evo-marko/src/tags/evo-filter-chip/index.marko

@@ -44,7 +44,7 @@ export interface Input
             ...input as Marko.HTML.Button
             disabled=disabled
             type="button"
-            aria-selected=(selected ? "true" : "false")/>
+            aria-selected=!isMenu && (selected ? "true" : "false")/>
     </else>
 </define>
 
@@ -54,6 +54,7 @@ export interface Input
         "filter-chip",
         mounted && "filter-chip--animated",
         variant === "expressive" && "filter-chip--expressive",
+        (isAnchor || isMenu) && selected && "filter-chip--selected",
         inputClass,
     ]
     href=(!disabled ? href : undefined)
@@ -80,7 +81,7 @@ export interface Input
 
     <span class="filter-chip__text">
         <${content}/>
-        <if=selected && isAnchor>
+        <if=selected && (isAnchor || isMenu)>
             <span class="clipped">
                 ${" "}- ${a11ySelectedText}
             </span>

packages/skin/dist/filter-chip/filter-chip.css

@@ -144,6 +144,7 @@ button.filter-chip--expressive {
 }
 
 a.filter-chip--selected,
+button.filter-chip.filter-chip--selected,
 button.filter-chip[aria-pressed="true"] {
     animation: fill-horizontal-background 0s var(--motion-easing-quick-enter)
         forwards;
@@ -158,6 +159,7 @@ button.filter-chip[aria-pressed="true"] {
 }
 
 a.filter-chip--selected:after,
+button.filter-chip.filter-chip--selected:after,
 button.filter-chip[aria-pressed="true"]:after {
     background-color: var(--color-state-layer-neutral-on-strong);
     content: "";
@@ -168,6 +170,11 @@ button.filter-chip[aria-pressed="true"]:after {
 
 a.filter-chip--selected:not([disabled], [aria-disabled="true"]):hover:after,
 a.filter-chip--selected[href]:hover:after,
+button.filter-chip.filter-chip--selected:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover:after,
+button.filter-chip.filter-chip--selected[href]:hover:after,
 button.filter-chip[aria-pressed="true"]:not(
         [disabled],
         [aria-disabled="true"]
@@ -181,6 +188,11 @@ a.filter-chip--selected:not(
         [aria-disabled="true"]
     ):focus-visible:after,
 a.filter-chip--selected[href]:focus-visible:after,
+button.filter-chip.filter-chip--selected:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus-visible:after,
+button.filter-chip.filter-chip--selected[href]:focus-visible:after,
 button.filter-chip[aria-pressed="true"]:not(
         [disabled],
         [aria-disabled="true"]
@@ -191,6 +203,11 @@ button.filter-chip[aria-pressed="true"][href]:focus-visible:after {
 
 a.filter-chip--selected:not([disabled], [aria-disabled="true"]):active:after,
 a.filter-chip--selected[href]:active:after,
+button.filter-chip.filter-chip--selected:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active:after,
+button.filter-chip.filter-chip--selected[href]:active:after,
 button.filter-chip[aria-pressed="true"]:not(
         [disabled],
         [aria-disabled="true"]
@@ -199,6 +216,7 @@ button.filter-chip[aria-pressed="true"][href]:active:after {
     background-color: var(--color-state-layer-pressed-on-strong);
 }
 
+button.filter-chip--animated.filter-chip--selected,
 button.filter-chip--animated[aria-pressed="true"] {
     animation-duration: var(--motion-duration-medium-2);
     transition: color var(--motion-duration-instant)

packages/skin/src/sass/filter-chip/filter-chip.scss

@@ -35,12 +35,14 @@ a.filter-chip--expressive {
 }
 
 button.filter-chip[aria-pressed="true"],
+button.filter-chip.filter-chip--selected,
 a.filter-chip--selected {
     @include chip-mixins.selected;
     @include state-layer.strong;
 }
 
-button.filter-chip--animated[aria-pressed="true"] {
+button.filter-chip--animated[aria-pressed="true"],
+button.filter-chip--animated.filter-chip--selected {
     @include chip-mixins.selected-animation;
 }