From 3e333e8d0a686c2280286b137bb52ae57d278ce8 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Fri, 11 Dec 2020 14:57:00 +0200 Subject: [PATCH 1/2] refactor(ui5-flexible-column-layout): Add more accessibility texts --- packages/fiori/src/FlexibleColumnLayout.js | 68 +++++++++------------- packages/fiori/test/pages/FCL.html | 59 +++++++++++-------- packages/fiori/test/pages/FCLApp.html | 3 - 3 files changed, 63 insertions(+), 67 deletions(-) diff --git a/packages/fiori/src/FlexibleColumnLayout.js b/packages/fiori/src/FlexibleColumnLayout.js index d0af90afcd13..9455310f6dcb 100644 --- a/packages/fiori/src/FlexibleColumnLayout.js +++ b/packages/fiori/src/FlexibleColumnLayout.js @@ -83,39 +83,23 @@ const metadata = { }, /** - * Defines the accessibility name for the startColumn region. - * - * @type {string} - * @defaultvalue "" - * @public - * @since 1.0.0-rc.11 - */ - startColumnAccessibleName: { - type: String, - }, - - /** - * Defines the accessibility name for the midColumn region. - * - * @type {string} - * @defaultvalue "" - * @public - * @since 1.0.0-rc.11 - */ - midColumnAccessibleName: { - type: String, - }, - - /** - * Defines the accessibility name for the endColumn region. - * - * @type {string} - * @defaultvalue "" - * @public - * @since 1.0.0-rc.11 - */ - endColumnAccessibleName: { - type: String, + * On object of strings that defines several additional accessibility texts for even further customization. + * + * It supports the following fields: + * - startColumnAccessibleName: the accessibility name for the startColumn region + * - midColumnAccessibleName: the accessibility name for the midColumn region + * - endColumnAccessibleName: the accessibility name for the endColumn region + * - startArrowLeftText: the text that the first arrow (between the begin and mid columns) will have when pointing to the left + * - startArrowRightText: the text that the first arrow (between the begin and mid columns) will have when pointing to the right + * - endArrowLeftText: the text that the second arrow (between the mid and end columns) will have when pointing to the left + * - endArrowRightText: the text that the second arrow (between the mid and end columns) will have when pointing to the right + * + * @type {object} + * @public + * @since 1.0.0-rc.11 + */ + accessibilityTexts: { + type: Object, }, /** @@ -656,15 +640,15 @@ class FlexibleColumnLayout extends UI5Element { } get accStartColumnText() { - return this.startColumnAccessibleName || this.i18nBundle.getText(FCL_START_COLUMN_TXT); + return this.accessibilityTexts.startColumnAccessibleName || this.i18nBundle.getText(FCL_START_COLUMN_TXT); } get accMiddleColumnText() { - return this.midColumnAccessibleName || this.i18nBundle.getText(FCL_MIDDLE_COLUMN_TXT); + return this.accessibilityTexts.midColumnAccessibleName || this.i18nBundle.getText(FCL_MIDDLE_COLUMN_TXT); } get accEndColumnText() { - return this.endColumnAccessibleName || this.i18nBundle.getText(FCL_END_COLUMN_TXT); + return this.accessibilityTexts.endColumnAccessibleName || this.i18nBundle.getText(FCL_END_COLUMN_TXT); } get _effectiveLayoutsByMedia() { @@ -672,19 +656,23 @@ class FlexibleColumnLayout extends UI5Element { } get accStartArrowText() { + const customTexts = this.accessibilityTexts; + if (this.startArrowDirection === "mirror") { - return this.i18nBundle.getText(FCL_START_COLUMN_COLLAPSE_BUTTON_TOOLTIP); + return customTexts.startArrowLeftText || this.i18nBundle.getText(FCL_START_COLUMN_COLLAPSE_BUTTON_TOOLTIP); } - return this.i18nBundle.getText(FCL_START_COLUMN_EXPAND_BUTTON_TOOLTIP); + return customTexts.startArrowRightText || this.i18nBundle.getText(FCL_START_COLUMN_EXPAND_BUTTON_TOOLTIP); } get accEndArrowText() { + const customTexts = this.accessibilityTexts; + if (this.endArrowDirection === "mirror") { - return this.i18nBundle.getText(FCL_END_COLUMN_COLLAPSE_BUTTON_TOOLTIP); + return customTexts.endArrowRightText || this.i18nBundle.getText(FCL_END_COLUMN_COLLAPSE_BUTTON_TOOLTIP); } - return this.i18nBundle.getText(FCL_END_COLUMN_EXPAND_BUTTON_TOOLTIP); + return customTexts.endArrowLeftText || this.i18nBundle.getText(FCL_END_COLUMN_EXPAND_BUTTON_TOOLTIP); } } diff --git a/packages/fiori/test/pages/FCL.html b/packages/fiori/test/pages/FCL.html index e5daec9fdb2e..1035520c5017 100644 --- a/packages/fiori/test/pages/FCL.html +++ b/packages/fiori/test/pages/FCL.html @@ -87,37 +87,37 @@
1. Product Type
- + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
- + Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat. Open Wizard Dialog
- + Step 2 - +
2. Product Information
Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - +
Name
- +
Weight
- +
Manifacturer @@ -126,34 +126,34 @@ Huawei
- +
5 years guarantee included
- + - +
3. Options
- + Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
- +
Manifacture date
- +
Availability @@ -163,7 +163,7 @@ Out of stock
- +
Size @@ -174,10 +174,10 @@
- + - +
4. Pricing
@@ -187,25 +187,25 @@ The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
- +
Price
- +
Quantity
- +
Vat included
- + Finalize @@ -398,7 +398,7 @@
- Column 1 + Products list
Hello worild! @@ -415,7 +415,7 @@
- Column 2 + Product information
Hello worild! @@ -432,7 +432,7 @@
- Column 3 + Product detailed information
@@ -687,6 +687,17 @@