Skip to content

Commit ff01039

Browse files
IlianaBIlianaB
authored
Merge branch 'main' into fix-checkbox-accessibilityinfo
2 parents 8edc40e + 48c077c commit ff01039

7 files changed

Lines changed: 206 additions & 20 deletions

File tree

‎packages/ai/.ui5-cem-aliases.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"BaseTextArea": "TextArea",
3+
"BaseInput": "Input"
4+
}

‎packages/fiori/cypress/specs/Wizard.cy.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -633,4 +633,76 @@ describe("Wizard inside Dialog", () => {
633633
.find("[ui5-responsive-popover]")
634634
.should("be.visible");
635635
});
636+
});
637+
638+
describe("Wizard - getFocusDomRef Method", () => {
639+
it("should focus the last focused wizard tab on wizard focus", () => {
640+
const onButtonClick = () => {
641+
document.getElementById("wizard").focus();
642+
}
643+
cy.mount(
644+
<>
645+
<Wizard id="wizard">
646+
<WizardStep icon="sap-icon://product" titleText="Product type">
647+
<MessageStrip>
648+
The Wizard control is supposed to break down large tasks.
649+
</MessageStrip>
650+
</WizardStep>
651+
<WizardStep titleText="Product Information" selected />
652+
<WizardStep titleText="Product Text" />
653+
</Wizard>
654+
<Button>Dummy Btn</Button>
655+
<Button onClick={onButtonClick}>Focus Wizard</Button>
656+
</>
657+
);
658+
659+
cy.get("[ui5-wizard]")
660+
.shadow()
661+
.find("[ui5-wizard-tab]")
662+
.eq(2)
663+
.realClick();
664+
665+
cy.get("[ui5-button]")
666+
.eq(0)
667+
.realClick();
668+
669+
cy.get("[ui5-button]")
670+
.eq(1)
671+
.realClick();
672+
673+
cy.get("[ui5-wizard]")
674+
.shadow()
675+
.find("[ui5-wizard-tab]")
676+
.eq(2)
677+
.shadow()
678+
.find(".ui5-wiz-step-root")
679+
.should("be.focused");
680+
});
681+
682+
it("should focus the first wizard tab if no tab was focused before ", () => {
683+
const onButtonClick = () => {
684+
document.getElementById("wizard").focus();
685+
}
686+
cy.mount(
687+
<>
688+
<Wizard id="wizard">
689+
<WizardStep icon="sap-icon://product" titleText="Product type"></WizardStep>
690+
<WizardStep titleText="Product Information" />
691+
<WizardStep titleText="Product Text" />
692+
</Wizard>
693+
<Button onClick={onButtonClick}>Focus Wizard</Button>
694+
</>
695+
);
696+
697+
cy.get("[ui5-button]")
698+
.realClick();
699+
700+
cy.get("[ui5-wizard]")
701+
.shadow()
702+
.find("[ui5-wizard-tab]")
703+
.eq(0)
704+
.shadow()
705+
.find(".ui5-wiz-step-root")
706+
.should("be.focused");
707+
});
636708
});

‎packages/fiori/src/Wizard.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -694,6 +694,10 @@ class Wizard extends UI5Element {
694694
return contentHeight;
695695
}
696696

697+
getFocusDomRef() {
698+
return this._itemNavigation._getCurrentItem();
699+
}
700+
697701
getStepAriaLabelText(step: WizardStep, ariaLabel: string) {
698702
return Wizard.i18nBundle.getText(WIZARD_STEP_ARIA_LABEL, ariaLabel);
699703
}

‎packages/main/cypress/specs/ColorPalettePopover.cy.tsx‎

Lines changed: 107 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -372,18 +372,50 @@ describe("Color Popover Palette arrow keys navigation", () => {
372372
cy.get("[ui5-color-palette-popover]")
373373
.ui5ColorPalettePopoverOpen({ opener: "btnPalette" });
374374

375-
cy.focused()
375+
cy.get("[ui5-color-palette-popover]")
376+
.should("have.attr", "open");
377+
378+
cy.get("[ui5-color-palette-popover]")
379+
.ui5GetColorPaletteInPopover()
380+
.as("colorPalette");
381+
382+
cy.get("@colorPalette")
383+
.ui5GetColorPaletteDefaultButton()
384+
.as("defaultColorButton")
385+
.should("be.visible");
386+
387+
cy.get("@defaultColorButton")
388+
.should("have.focus");
389+
390+
// Navigate right to first color item
391+
cy.get("@defaultColorButton")
376392
.realPress("ArrowRight");
377393

378-
cy.focused()
379-
.should("have.attr", "aria-label")
394+
cy.get("[ui5-color-palette-popover]")
395+
.ui5GetColorPaletteItem(0)
396+
.as("firstColorItem")
397+
.should("be.visible")
398+
.and("have.attr", "value", "cyan");
399+
400+
cy.get("@firstColorItem")
401+
.should("have.attr", "value", "cyan");
402+
403+
cy.get("@firstColorItem")
404+
.should("have.focus")
405+
.shadow()
406+
.find(".ui5-cp-item")
407+
.should("have.attr", "tabindex", "0")
408+
.and("have.attr", "aria-label")
380409
.and("include", "cyan");
381410

382411
cy.focused()
383412
.realPress("ArrowLeft");
384413

385414
cy.focused()
386415
.should("have.attr", "aria-label", "Default Color");
416+
417+
cy.get("@defaultColorButton")
418+
.should("have.focus");
387419
});
388420

389421
it("should cycle through colors horizontally with left/right arrows", () => {
@@ -509,33 +541,75 @@ describe("Color Popover Palette arrow keys navigation", () => {
509541
});
510542

511543
describe("Color Popover Palette Home and End keyboard navigation", () => {
512-
it.skip("should navigate with Home/End when showDefaultColor is set", () => {
544+
it("should navigate with Home/End when showDefaultColor is set", () => {
513545
cy.mount(
514546
<SimplePalettePopover showDefaultColor={true} />
515547
);
516548

517549
cy.get("[ui5-color-palette-popover]")
518550
.ui5ColorPalettePopoverOpen({ opener: "btnPalette" });
519551

520-
cy.focused()
552+
cy.get("[ui5-color-palette-popover]")
553+
.should("have.attr", "open");
554+
555+
cy.get("[ui5-color-palette-popover]")
556+
.ui5GetColorPaletteInPopover()
557+
.as("colorPalette");
558+
559+
cy.get("@colorPalette")
560+
.ui5GetColorPaletteDefaultButton()
561+
.as("defaultColorButton")
562+
.should("be.visible")
563+
.and("have.focus");
564+
565+
cy.get("@defaultColorButton")
566+
.should("have.focus")
567+
.shadow()
568+
.find("button[data-sap-focus-ref]")
569+
.should("have.focus");
570+
571+
cy.get("@defaultColorButton")
521572
.realPress("End");
522573

523-
cy.focused()
524-
.should("have.attr", "aria-label")
574+
cy.get("[ui5-color-palette-popover]")
575+
.ui5GetColorPaletteItem(3)
576+
.as("lastColorPaletteItem")
577+
.should("be.visible")
578+
.and("have.attr", "value", "red");
579+
580+
cy.get("@lastColorPaletteItem")
581+
.should("have.focus")
582+
.shadow()
583+
.find(".ui5-cp-item")
584+
.should("have.attr", "tabindex", "0")
585+
.and("have.attr", "aria-label")
525586
.and("include", "red");
526587

527588
cy.focused()
528589
.realPress("Home");
529590

530-
cy.focused()
531-
.should("have.attr", "aria-label")
591+
cy.get("[ui5-color-palette-popover]")
592+
.ui5GetColorPaletteItem(0)
593+
.as("firstColorPaletteItem")
594+
.should("be.visible")
595+
.and("have.attr", "value", "cyan");
596+
597+
cy.get("@firstColorPaletteItem")
598+
.should("have.focus")
599+
.shadow()
600+
.find(".ui5-cp-item")
601+
.should("have.attr", "tabindex", "0")
602+
.and("have.attr", "aria-label")
532603
.and("include", "cyan");
533604

534605
cy.focused()
535606
.realPress("Home");
536607

537608
cy.focused()
538609
.should("have.attr", "aria-label", "Default Color");
610+
611+
cy.get("@defaultColorButton")
612+
.should("have.focus");
539613
});
540614

541615
it("should navigate with Home/End keys when showMoreColors is set", () => {
@@ -564,28 +638,42 @@ describe("Color Popover Palette Home and End keyboard navigation", () => {
564638
.should("have.attr", "aria-label", "More Colors...");
565639
});
566640

567-
it.skip("should navigate with Home/End when showDefaultColor & showMoreColors are set", () => {
641+
it("should navigate with Home/End when showDefaultColor & showMoreColors are set", () => {
568642
cy.mount(
569643
<SimplePalettePopover showDefaultColor={true} showMoreColors={true} />
570644
);
571645

572-
cy.get("[ui5-color-palette-popover]")
646+
cy.get<ColorPalettePopover>("[ui5-color-palette-popover]")
647+
.as("colorPalettePopover")
573648
.ui5ColorPalettePopoverOpen({ opener: "btnPalette" });
574649

575-
cy.focused()
576-
.should("have.attr", "aria-label", "Default Color");
650+
cy.get<ColorPalette>("@colorPalettePopover")
651+
.ui5GetColorPaletteInPopover()
652+
.as("colorPalette");
577653

578-
cy.focused()
654+
cy.get("@colorPalette")
655+
.ui5GetColorPaletteDefaultButton()
656+
.as("defaultColorButton");
657+
658+
cy.get("@defaultColorButton")
659+
.should("have.focus")
579660
.realPress("End");
580661

581-
cy.focused()
582-
.should("have.attr", "aria-label", "More Colors...");
662+
cy.get("@colorPalette")
663+
.ui5GetColorPaletteMoreColorsButton()
664+
.as("moreColorsButton")
665+
.should("be.visible");
583666

584-
cy.focused()
667+
cy.get("@moreColorsButton")
668+
.should("exist")
669+
.and("be.visible")
670+
.and("have.focus");
671+
672+
cy.get("@moreColorsButton")
585673
.realPress("Home");
586674

587-
cy.focused()
588-
.should("have.attr", "aria-label", "Default Color");
675+
cy.get("@defaultColorButton")
676+
.should("have.focus");
589677
});
590678

591679
it("should navigate with End key", () => {

‎packages/tools/lib/cem/custom-elements-manifest.config.mjs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,17 @@ import { generateCustomData } from "cem-plugin-vs-code-custom-data-generator";
2727
import { customElementJetBrainsPlugin } from "custom-element-jet-brains-integration";
2828

2929
const packageJSON = JSON.parse(fs.readFileSync("./package.json"));
30+
let aliasMap = {};
31+
3032
const devMode = process.env.UI5_CEM_MODE === "dev";
33+
try {
34+
aliasMap = JSON.parse(fs.readFileSync("./.ui5-cem-aliases.json"));
35+
} catch (e) {
36+
if (devMode) {
37+
console.warn("No .ui5-cem-aliases.json file found. Continuing without aliases.");
38+
}
39+
}
40+
3141

3242
const extractClassNodeJSDoc = node => {
3343
const fileContent = node.getFullText();
@@ -486,6 +496,12 @@ export default {
486496
}
487497
}
488498

499+
moduleDoc.declarations.forEach(declaration => {
500+
if (declaration.superclass?.name && aliasMap[declaration.superclass.name]) {
501+
declaration.superclass.name = aliasMap[declaration.superclass.name];
502+
}
503+
})
504+
489505
const typeReferences = new Set();
490506
const registerTypeReference = reference => typeReferences.add(JSON.stringify(reference))
491507

‎packages/tools/lib/create-illustrations/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const fs = require("fs").promises;
22
const path = require("path");
3+
const { scopeThemingVariables } = require("../css-processors/scope-variables.mjs");
34

45
const generate = async (argv) => {
56
if (argv.length < 7) {
@@ -91,7 +92,7 @@ const generate = async (argv) => {
9192
console.log(`Generating illustrations from ${srcPath} to ${destPath}`)
9293

9394
const svgImportTemplate = svgContent => {
94-
return `export default \`${svgContent}\`;`
95+
return `export default \`${scopeThemingVariables(svgContent)}\`;`
9596
};
9697
const svgToJs = async fileName => {
9798
const svg = await fs.readFile(path.join(srcPath, fileName), { encoding: "utf-8" });

‎packages/tools/lib/css-processors/scope-variables.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const scopeUi5Variables = (cssText, packageJSON, inputFile) => {
4545
return newText.replaceAll("--sap", `--ui5-sap`);
4646
}
4747

48+
// Used with CSS text and SVG file content (illustrations)
4849
const scopeThemingVariables = (cssText) => {
4950
return cssText.replaceAll("--sap", `--ui5-sap`);
5051
}

0 commit comments

Comments
 (0)