Skip to content

Commit

Permalink
refactor(ui5-flexible-column-layout): Add more accessibility texts (#…
Browse files Browse the repository at this point in the history 
…2571)
  • Loading branch information
@vladitasev
vladitasev committed Dec 15, 2020
1 parent 2647941 commit a634532
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 70 deletions.
68 changes: 28 additions & 40 deletions packages/fiori/src/FlexibleColumnLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,39 +83,23 @@ const metadata = {
},

/**
* Defines the accessibility name for the <code>startColumn</code> region.
*
* @type {string}
* @defaultvalue ""
* @public
* @since 1.0.0-rc.11
*/
startColumnAccessibleName: {
type: String,
},

/**
* Defines the accessibility name for the <code>midColumn</code> region.
*
* @type {string}
* @defaultvalue ""
* @public
* @since 1.0.0-rc.11
*/
midColumnAccessibleName: {
type: String,
},

/**
* Defines the accessibility name for the <code>endColumn</code> 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:
* - <code>startColumnAccessibleName</code>: the accessibility name for the <code>startColumn</code> region
* - <code>midColumnAccessibleName</code>: the accessibility name for the <code>midColumn</code> region
* - <code>endColumnAccessibleName</code>: the accessibility name for the <code>endColumn</code> region
* - <code>startArrowLeftText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the left
* - <code>startArrowRightText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the right
* - <code>endArrowLeftText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the left
* - <code>endArrowRightText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the right
*
* @type {object}
* @public
* @since 1.0.0-rc.11
*/
accessibilityTexts: {
type: Object,
},

/**
Expand Down Expand Up @@ -656,35 +640,39 @@ 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() {
return this._layoutsConfiguration || getLayoutsByMedia();
}

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);
}
}

Expand Down
59 changes: 35 additions & 24 deletions packages/fiori/test/pages/FCL.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,37 +87,37 @@
<ui5-wizard-step icon="sap-icon://home" heading="Product type">
<div style="display: flex; min-height: 200px; flex-direction: column;">
<ui5-title>1. Product Type</ui5-title><br>

<ui5-messagestrip>
The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
</ui5-messagestrip><br>

<ui5-label wrap>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.
</ui5-label>
<ui5-button id="btnOpenDialog" style="width: 150px; align-self: flex-end;">Open Wizard Dialog</ui5-button>
</div>

<ui5-button id="toStep2" design="Emphasized">Step 2</ui5-button>
</ui5-wizard-step>

<ui5-wizard-step heading="Product Information">
<div style="display: flex;flex-direction: column">
<ui5-title>2. Product Information</ui5-title><br>
<ui5-label wrap>
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
</ui5-label>

<div style="display: flex; flex-direction: column;">
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
<ui5-label>Name</ui5-label>
<ui5-input placeholder="product name..."></ui5-input>
</div>

<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
<ui5-label>Weight</ui5-label>
<ui5-input value="3.65"></ui5-input>
</div>

<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
<ui5-label>Manifacturer</ui5-label>
<ui5-select>
Expand All @@ -126,34 +126,34 @@
<ui5-option>Huawei</ui5-option>
</ui5-select>
</div>

<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
<ui5-label>5 years guarantee included</ui5-label>
<ui5-switch id="sw"></ui5-switch>
</div>
</div>
</div>

<ui5-button id="toStep3" design="Emphasized" hidden>Step 3</ui5-button>
</ui5-wizard-step>

<ui5-wizard-step heading="Options">
<div style="display: flex; flex-direction: column;">
<ui5-title>3. Options</ui5-title><br>

<ui5-label wrap>
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
</ui5-label>
<ui5-messagestrip>
The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
</ui5-messagestrip><br>

<div style="display: flex; flex-direction: column;">
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
<ui5-label>Manifacture date</ui5-label>
<ui5-date-picker></ui5-date-picker>
</div>

<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
<ui5-label>Availability</ui5-label>
<ui5-segmentedbutton id="segButton1">
Expand All @@ -163,7 +163,7 @@
<ui5-togglebutton>Out of stock</ui5-togglebutton>
</ui5-segmentedbutton>
</div>

<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
<ui5-label>Size</ui5-label>
<ui5-segmentedbutton id="sb">
Expand All @@ -174,10 +174,10 @@
</div>
</div>
</div>

<ui5-button id="toStep4" design="Emphasized" hidden>Step 4</ui5-button>
</ui5-wizard-step>

<ui5-wizard-step heading="Pricing">
<div style="display: flex; flex-direction: column;">
<ui5-title>4. Pricing</ui5-title><br>
Expand All @@ -187,25 +187,25 @@
<ui5-messagestrip>
The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
</ui5-messagestrip><br>

<div style="display: flex; flex-direction: column;">
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
<ui5-label>Price</ui5-label>
<ui5-input placeholder="product price..."></ui5-input>
</div>

<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
<ui5-label>Quantity</ui5-label>
<ui5-input placeholder="product quantity..."></ui5-input>
</div>

<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
<ui5-label>Vat included</ui5-label>
<ui5-switch checked></ui5-switch>
</div>
</div>
</div>

<ui5-button id="finalize" design="Emphasized">Finalize</ui5-button>
</ui5-wizard-step>
</ui5-wizard>
Expand Down Expand Up @@ -398,7 +398,7 @@
<!-- start column -->
<div style="box-sizing: border-box;" slot="startColumn">
<div style="padding: 1rem">
<ui5-title>Column 1</ui5-title>
<ui5-title>Products list</ui5-title>
</div>
<ui5-list>
<ui5-li>Hello worild!</ui5-li>
Expand All @@ -415,7 +415,7 @@
<!-- mid column -->
<div style="box-sizing: border-box;" slot="midColumn">
<div style="padding: 1rem">
<ui5-title>Column 2</ui5-title>
<ui5-title>Product information</ui5-title>
</div>
<ui5-list>
<ui5-li>Hello worild!</ui5-li>
Expand All @@ -432,7 +432,7 @@
<!-- end column -->
<div style="box-sizing: border-box;" slot="endColumn">
<div style="padding: 1rem">
<ui5-title>Column 3</ui5-title>
<ui5-title>Product detailed information</ui5-title>
</div>

<ui5-list>
Expand Down Expand Up @@ -687,6 +687,17 @@
</ui5-flexible-column-layout>

<script>

fclAcc.accessibilityTexts = {
startColumnAccessibleName: "Products list",
midColumnAccessibleName: "Product information",
endColumnAccessibleName: "Product detailed information",
startArrowLeftText: "Collapse products list",
startArrowRightText: "Expand products list",
endArrowLeftText: "Expand product detailed information",
endArrowRightText: "Collapse product detailed information"
};

var counter = 0;
var counter2 = 0;
fcl1.addEventListener("ui5-layout-change", function(e) {
Expand All @@ -699,7 +710,7 @@
layoutChangeRes4.value = ++counter;

});

fcl3.addEventListener("ui5-layout-change", function(e) {
testLayoutChange.value = ++counter2;
});
Expand Down
3 changes: 0 additions & 3 deletions packages/fiori/test/pages/FCLApp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,9 +179,6 @@
<!--- FLEXIBLE COLUMN LAYOUT -->
<ui5-flexible-column-layout
id="fcl"
start-column-accessible-name="Companies list"
mid-column-accessible-name="Products List"
end-column-accessible-name="Product Details"
>
<div class="column" id="startColumn" slot="startColumn">
<ui5-busyindicator id="startBusy">
Expand Down
6 changes: 3 additions & 3 deletions packages/fiori/test/specs/FCL.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,9 @@ describe("FlexibleColumnLayout Behavior", () => {
const fcl = browser.$("#fclAcc");
const startArrow = fcl.shadow$(".ui5-fcl-arrow--start");
const endArrow = fcl.shadow$(".ui5-fcl-arrow--end");
const startArrowText1 = "Expand the first column";
const startArrowText2 = "Collapse the first column";
const endArrowText = "Expand the last column";
const startArrowText1 = "Expand products list";
const startArrowText2 = "Collapse products list";
const endArrowText = "Expand product detailed information";

// assert
assert.strictEqual(startArrow.getAttribute("title"), startArrowText1,
Expand Down

0 comments on commit a634532

Please sign in to comment.