2722 popover menu toggle variant menu items cause accessibility error

CONTRIBUTING.md

@@ -293,26 +293,26 @@ export class Component {
 
     @Prop() status?: string;
 
-    @Event() icComponentThemeChange!: EventEmitter<{ mode: string }>;
+    @Event() icComponentBrandChange!: EventEmitter<{ mode: string }>;
 
-    @Listen("themeChange", { target: "document" })
-    themeChangeHandler(ev: CustomEvent): void {
-        this.theme = ev.detail.mode;
+    @Listen("brandChange", { target: "document" })
+    brandChangeHandler(ev: CustomEvent): void {
+        this.brand = ev.detail.mode;
     }
 
     @Method()
     async updateLabel(label: string) {
         this.label = label;
     }
 
-    private theme: IcTheme;
+    private brand: IcBrand;
 
     private updateStatus(status: string) {
         this.status = status;
     }
 
     private clickHandler() {
-        this.icComponentThemeChange.emit({
+        this.icComponentBrandChange.emit({
             mode: "dark"
         });
     }
@@ -370,9 +370,9 @@ it('tests receiving custom events', async () => {
       html: `<ic-component label="foo"></ic-alert>`
     });
 
-    await page.rootInstance.themeChangeHandler({ detail: { mode: "bar" } });
+    await page.rootInstance.brandChangeHandler({ detail: { mode: "bar" } });
     await page.waitForChanges();
-    expect(page.rootInstance.theme).toBe("bar");
+    expect(page.rootInstance.brand).toBe("bar");
 });
 
 // Testing events emitted from the component
@@ -383,9 +383,9 @@ it('tests emitted events', async () => {
     });
 
     const callbackFn = jest.fn();
-    page.win.addEventListener('icComponentThemeChange', callbackFn);
+    page.win.addEventListener('icComponentBrandChange', callbackFn);
 
-    // clickHandler emits the icComponentThemeChange event
+    // clickHandler emits the icComponentBrandChange event
     await page.rootInstance.clickHandler();
     await page.waitForChanges();
     expect(callbackFn).toHaveBeenCalled();

package.json

@@ -18,6 +18,7 @@
     "build:all": "npm run build && npm run build:canary",
     "release-check": "lerna version --no-push --no-git-tag-version",
     "storybook": "lerna run storybook --stream --parallel",
+    "storybook:core": "lerna run storybook --scope @ukic/web-components --scope @ukic/react --stream --parallel",
     "storybook:canary": "lerna run storybook --scope=@ukic/canary-* --stream --parallel",
     "build-storybook:web-components": "lerna run build-storybook --scope @ukic/web-components",
     "build-storybook:react": "lerna run build-storybook --scope @ukic/react",

packages/canary-docs/docs.json

@@ -376,7 +376,7 @@
           "passive": false
         },
         {
-          "event": "themeChange",
+          "event": "brandChange",
           "target": "document",
           "capture": false,
           "passive": false

packages/canary-react/src/component-tests/IcDataTable/IcDataTable.cy.tsx

@@ -580,7 +580,7 @@ describe("IcDataTables", () => {
     cy.checkHydrated(DATA_TABLE_SELECTOR);
     cy.wait(350).compareSnapshot({
       name: "loading-options",
-      testThreshold: setThresholdBasedOnEnv(0.026),
+      testThreshold: setThresholdBasedOnEnv(0.029),
       cypressScreenshotOptions: {
         capture: "viewport",
       },
@@ -1085,69 +1085,75 @@ describe("IcDataTables", () => {
       sorted: "descending",
     });
   });
-});
 
-it("should render an element in the table cell if the data prop contains the actionElement key", () => {
-  mount(
-    <IcDataTable
-      columns={COLS}
-      data={ACTION_DATA_ELEMENTS}
-      caption="Data tables"
-    ></IcDataTable>
-  );
-  cy.viewport(1024, 768);
+  it("should render an element in the table cell if the data prop contains the actionElement key", () => {
+    mount(
+      <IcDataTable
+        columns={COLS}
+        data={ACTION_DATA_ELEMENTS}
+        caption="Data tables"
+      ></IcDataTable>
+    );
 
-  cy.checkHydrated(DATA_TABLE_SELECTOR);
+    cy.checkHydrated(DATA_TABLE_SELECTOR);
 
-  cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
-    .eq(0)
-    .find("span")
-    .should(HAVE_CLASS, "action-element")
-    .find("ic-button")
-    .should("be.visible");
-});
+    cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
+      .eq(0)
+      .find("span")
+      .should(HAVE_CLASS, "action-element")
+      .find("ic-button")
+      .should("be.visible");
 
-it("should not render an element in the table cell if the data prop does not contain the actionElement key", () => {
-  mount(
-    <IcDataTable
-      columns={COLS}
-      data={ACTION_DATA_ELEMENTS}
-      caption="Data tables"
-    ></IcDataTable>
-  );
-  cy.viewport(1024, 768);
+    cy.checkA11yWithWait(undefined, 300);
 
-  cy.checkHydrated(DATA_TABLE_SELECTOR);
+    cy.compareSnapshot({
+      name: "action-elements",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.038),
+      cypressScreenshotOptions: {
+        capture: "viewport",
+      },
+    });
+  });
 
-  cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
-    .eq(1)
-    .find("span")
-    .should("not.exist");
-});
+  it("should not render an element in the table cell if the data prop does not contain the actionElement key", () => {
+    mount(
+      <IcDataTable
+        columns={COLS}
+        data={ACTION_DATA_ELEMENTS}
+        caption="Data tables"
+      ></IcDataTable>
+    );
 
-it("should apply styling to the cell container if an action element is present in the cell", () => {
-  mount(
-    <IcDataTable
-      columns={COLS}
-      data={ACTION_DATA_ELEMENTS}
-      caption="Data tables"
-    ></IcDataTable>
-  );
+    cy.checkHydrated(DATA_TABLE_SELECTOR);
 
-  cy.viewport(1024, 768);
+    cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
+      .eq(1)
+      .find("span")
+      .should("not.exist");
+  });
 
-  cy.checkHydrated(DATA_TABLE_SELECTOR);
+  it("should apply styling to the cell container if an action element is present in the cell", () => {
+    mount(
+      <IcDataTable
+        columns={COLS}
+        data={ACTION_DATA_ELEMENTS}
+        caption="Data tables"
+      ></IcDataTable>
+    );
 
-  cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
-    .eq(0)
-    .find("div")
-    .eq(0)
-    .should(HAVE_CLASS, "cell-grid-wrapper")
-    .should(HAVE_CSS, "grid-template-columns", "156.797px 32px");
+    cy.checkHydrated(DATA_TABLE_SELECTOR);
 
-  cy.findShadowEl(DATA_TABLE_SELECTOR, "span")
-    .should(HAVE_CLASS, "action-element")
-    .should(HAVE_CSS, "justify-content", "right");
+    cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
+      .eq(0)
+      .find("div")
+      .eq(0)
+      .should(HAVE_CLASS, "cell-grid-wrapper")
+      .should(HAVE_CSS, "grid-template-columns", "156.797px 32px");
+
+    cy.findShadowEl(DATA_TABLE_SELECTOR, "span")
+      .should(HAVE_CLASS, "action-element")
+      .should(HAVE_CSS, "justify-content", "right");
+  });
 });
 
 describe("IcDataTables with IcPaginationBar", () => {

packages/canary-web-components/src/components/ic-card-horizontal/ic-card-horizontal.tsx

@@ -12,14 +12,14 @@ import {
 import {
   onComponentRequiredPropUndefined,
   isSlotUsed,
-  getThemeFromContext,
+  getBrandFromContext,
   removeDisabledFalse,
   checkSlotInChildMutations,
 } from "../../utils/helpers";
 import {
-  IcTheme,
-  IcThemeForeground,
-  IcThemeForegroundEnum,
+  IcBrand,
+  IcBrandForeground,
+  IcBrandForegroundEnum,
   IcThemeMode,
 } from "../../utils/types";
 import { IcCardSizes } from "./ic-card-horizontal.types";
@@ -41,7 +41,7 @@ export class Card {
 
   @Element() el: HTMLIcCardHorizontalElement;
 
-  @State() appearance?: IcThemeForeground = "default";
+  @State() appearance?: IcBrandForeground = "default";
   @State() isFocussed: boolean = false;
   @State() parentEl: HTMLElement | null = null;
   @State() parentIsAnchorTag: boolean = false;
@@ -143,8 +143,8 @@ export class Card {
     }
   }
 
-  @Listen("themeChange", { target: "document" })
-  themeChangeHandler(ev: CustomEvent<IcTheme>): void {
+  @Listen("brandChange", { target: "document" })
+  brandChangeHandler(ev: CustomEvent<IcBrand>): void {
     this.updateTheme(ev.detail.mode);
   }
 
@@ -180,11 +180,14 @@ export class Card {
     this.isFocussed = false;
   };
 
-  private updateTheme(newTheme: IcThemeForeground = null): void {
-    const foregroundColor = getThemeFromContext(this.el, newTheme);
+  private updateTheme(mode: IcBrandForeground = null): void {
+    const foregroundColor = getBrandFromContext(this.el, mode);
 
-    if (foregroundColor !== IcThemeForegroundEnum.Default) {
-      this.theme = foregroundColor;
+    if (foregroundColor !== IcBrandForegroundEnum.Default) {
+      this.theme =
+        foregroundColor === IcBrandForegroundEnum.Light
+          ? IcBrandForegroundEnum.Dark
+          : IcBrandForegroundEnum.Light;
     }
   }
 
@@ -229,7 +232,7 @@ export class Card {
             clickable: clickable && !disabled,
             disabled,
             focussed: isFocussed,
-            dark: appearance === IcThemeForegroundEnum.Dark,
+            dark: appearance === IcBrandForegroundEnum.Dark,
             [`${size}`]: true,
             "with-icon": isSlotUsed(this.el, "icon"),
             "with-image": isSlotUsed(this.el, "image"),