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.

Sign up for GitHub

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

feat(ui5-message-strip): close button ACC enhancement #10283

Merged
merged 2 commits into from
Dec 11, 2024
Merged

feat(ui5-message-strip): close button ACC enhancement #10283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
39d69b6
feat(ui5-message-strip): close button ACC enhancement
StefanDimitrov04 Dec 2, 2024
4562ab3
feat(ui5-message-strip): fix tests
StefanDimitrov04 Dec 5, 2024
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
29 changes: 29 additions & 0 deletions packages/main/cypress/specs/MessageStrip.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { html } from "lit";
import "../../src/MessageStrip.js";
import { MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION, MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM } from "../../src/generated/i18n/i18n-defaults.js";

describe("MessageStrip close button tooltip", () => {
it("should display the correct tooltip text for different designs", () => {
const designs = [
{
design: "Information",
btnText: MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION.defaultText,
},
{
design: "ColorSet1",
btnText: MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM.defaultText,
},
];

designs.forEach(({ design, btnText }) => {
cy.mount(html`<ui5-message-strip class="top" design="${design}">${design} design with icon and close button:</ui5-message-strip>`);

cy.get("[ui5-message-strip]")
.shadow()
.find("ui5-button")
.shadow()
.find("button")
.should("have.attr", "title", btnText);
});
});
});
25 changes: 23 additions & 2 deletions packages/main/src/MessageStrip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@ import type { IIcon } from "./Icon.js";
import Icon from "./Icon.js";
import Button from "./Button.js";
import {
MESSAGE_STRIP_CLOSE_BUTTON,
MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION,
MESSAGE_STRIP_CLOSE_BUTTON_POSITIVE,
MESSAGE_STRIP_CLOSE_BUTTON_NEGATIVE,
MESSAGE_STRIP_CLOSE_BUTTON_CRITICAL,
MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM,
MESSAGE_STRIP_CLOSABLE,
MESSAGE_STRIP_ERROR,
MESSAGE_STRIP_WARNING,
Expand All @@ -42,6 +46,8 @@ enum DesignClassesMapping {

type DesignTypeAnnouncemnt = Record<MessageStripDesign, string>;

type DesignCloseButtonTooltip = Record<MessageStripDesign, string>;

/**
* @class
*
Expand Down Expand Up @@ -183,8 +189,23 @@ class MessageStrip extends UI5Element {
return this.hideIcon;
}

static closeButtonMappings(): DesignCloseButtonTooltip {
const getTranslation = (text:I18nText): string => {
return MessageStrip.i18nBundle.getText(text);
};

return {
Information: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION),
Positive: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_POSITIVE),
Negative: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_NEGATIVE),
Critical: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_CRITICAL),
ColorSet1: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM),
ColorSet2: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM),
};
}

get _closeButtonText() {
return MessageStrip.i18nBundle.getText(MESSAGE_STRIP_CLOSE_BUTTON);
return MessageStrip.closeButtonMappings()[this.design];
}

get _closableText() {
Expand Down
16 changes: 14 additions & 2 deletions packages/main/src/i18n/messagebundle.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,8 +240,20 @@ ARIA_LABEL_LIST_MULTISELECTABLE=Contains Multi-Selectable Items
#XACT: ARIA announcement for the list which has deletable items
ARIA_LABEL_LIST_DELETABLE=Contains Deletable Items

#XTOL: Tooltip of messgae strip close button
MESSAGE_STRIP_CLOSE_BUTTON=Information Bar Close
#XTOL: Tooltip of information message strip close button
MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION=Information Information Bar Close

#XTOL: Tooltip of positive message strip close button
MESSAGE_STRIP_CLOSE_BUTTON_POSITIVE=Positive Information Bar Close

#XTOL: Tooltip of negative message strip close button
MESSAGE_STRIP_CLOSE_BUTTON_NEGATIVE=Negative Information Bar Close

#XTOL: Tooltip of critical message strip close button
MESSAGE_STRIP_CLOSE_BUTTON_CRITICAL=Critical Information Bar Close

#XTOL: Tooltip of custom message strip close button
MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM=Custom Information Bar Close

#XACT: ARIA announcement for the MessageStrip's closable state
MESSAGE_STRIP_CLOSABLE=Closable
Expand Down
13 changes: 0 additions & 13 deletions packages/main/test/specs/MessageStrip.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,19 +76,6 @@ describe("ARIA Support", () => {
await browser.url(`test/pages/MessageStrip.html`);
});

it("Test close button title text", async () => {

const closeButton = await browser.$("#messageStrip").shadow$(".ui5-message-strip-close-button").shadow$("button");
let resourceBundleText = null;

resourceBundleText = await browser.executeAsync(done => {
const messageStrip = document.getElementById("messageStrip");
done(messageStrip.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.MESSAGE_STRIP_CLOSE_BUTTON));
});

assert.strictEqual(await closeButton.getAttribute("title"), resourceBundleText, "Close button title is correct");
});

it("Test hidden text element content", async () => {

const messageStrip = await browser.$("#messageStrip");
Expand Down
Loading