Skip to content

Commit a634532

Browse files
vladitasevvladitasev
authored
refactor(ui5-flexible-column-layout): Add more accessibility texts (#2571)
1 parent 2647941 commit a634532

File tree

4 files changed

+66
-70
lines changed

4 files changed

+66
-70
lines changed

‎packages/fiori/src/FlexibleColumnLayout.js

+28-40
Original file line numberDiff line numberDiff line change
@@ -83,39 +83,23 @@ const metadata = {
8383
},
8484

8585
/**
86-
* Defines the accessibility name for the <code>startColumn</code> region.
87-
*
88-
* @type {string}
89-
* @defaultvalue ""
90-
* @public
91-
* @since 1.0.0-rc.11
92-
*/
93-
startColumnAccessibleName: {
94-
type: String,
95-
},
96-
97-
/**
98-
* Defines the accessibility name for the <code>midColumn</code> region.
99-
*
100-
* @type {string}
101-
* @defaultvalue ""
102-
* @public
103-
* @since 1.0.0-rc.11
104-
*/
105-
midColumnAccessibleName: {
106-
type: String,
107-
},
108-
109-
/**
110-
* Defines the accessibility name for the <code>endColumn</code> region.
111-
*
112-
* @type {string}
113-
* @defaultvalue ""
114-
* @public
115-
* @since 1.0.0-rc.11
116-
*/
117-
endColumnAccessibleName: {
118-
type: String,
86+
* On object of strings that defines several additional accessibility texts for even further customization.
87+
*
88+
* It supports the following fields:
89+
* - <code>startColumnAccessibleName</code>: the accessibility name for the <code>startColumn</code> region
90+
* - <code>midColumnAccessibleName</code>: the accessibility name for the <code>midColumn</code> region
91+
* - <code>endColumnAccessibleName</code>: the accessibility name for the <code>endColumn</code> region
92+
* - <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
93+
* - <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
94+
* - <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
95+
* - <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
96+
*
97+
* @type {object}
98+
* @public
99+
* @since 1.0.0-rc.11
100+
*/
101+
accessibilityTexts: {
102+
type: Object,
119103
},
120104

121105
/**
@@ -656,35 +640,39 @@ class FlexibleColumnLayout extends UI5Element {
656640
}
657641

658642
get accStartColumnText() {
659-
return this.startColumnAccessibleName || this.i18nBundle.getText(FCL_START_COLUMN_TXT);
643+
return this.accessibilityTexts.startColumnAccessibleName || this.i18nBundle.getText(FCL_START_COLUMN_TXT);
660644
}
661645

662646
get accMiddleColumnText() {
663-
return this.midColumnAccessibleName || this.i18nBundle.getText(FCL_MIDDLE_COLUMN_TXT);
647+
return this.accessibilityTexts.midColumnAccessibleName || this.i18nBundle.getText(FCL_MIDDLE_COLUMN_TXT);
664648
}
665649

666650
get accEndColumnText() {
667-
return this.endColumnAccessibleName || this.i18nBundle.getText(FCL_END_COLUMN_TXT);
651+
return this.accessibilityTexts.endColumnAccessibleName || this.i18nBundle.getText(FCL_END_COLUMN_TXT);
668652
}
669653

670654
get _effectiveLayoutsByMedia() {
671655
return this._layoutsConfiguration || getLayoutsByMedia();
672656
}
673657

674658
get accStartArrowText() {
659+
const customTexts = this.accessibilityTexts;
660+
675661
if (this.startArrowDirection === "mirror") {
676-
return this.i18nBundle.getText(FCL_START_COLUMN_COLLAPSE_BUTTON_TOOLTIP);
662+
return customTexts.startArrowLeftText || this.i18nBundle.getText(FCL_START_COLUMN_COLLAPSE_BUTTON_TOOLTIP);
677663
}
678664

679-
return this.i18nBundle.getText(FCL_START_COLUMN_EXPAND_BUTTON_TOOLTIP);
665+
return customTexts.startArrowRightText || this.i18nBundle.getText(FCL_START_COLUMN_EXPAND_BUTTON_TOOLTIP);
680666
}
681667

682668
get accEndArrowText() {
669+
const customTexts = this.accessibilityTexts;
670+
683671
if (this.endArrowDirection === "mirror") {
684-
return this.i18nBundle.getText(FCL_END_COLUMN_COLLAPSE_BUTTON_TOOLTIP);
672+
return customTexts.endArrowRightText || this.i18nBundle.getText(FCL_END_COLUMN_COLLAPSE_BUTTON_TOOLTIP);
685673
}
686674

687-
return this.i18nBundle.getText(FCL_END_COLUMN_EXPAND_BUTTON_TOOLTIP);
675+
return customTexts.endArrowLeftText || this.i18nBundle.getText(FCL_END_COLUMN_EXPAND_BUTTON_TOOLTIP);
688676
}
689677
}
690678

‎packages/fiori/test/pages/FCL.html

+35-24
Original file line numberDiff line numberDiff line change
@@ -87,37 +87,37 @@
8787
<ui5-wizard-step icon="sap-icon://home" heading="Product type">
8888
<div style="display: flex; min-height: 200px; flex-direction: column;">
8989
<ui5-title>1. Product Type</ui5-title><br>
90-
90+
9191
<ui5-messagestrip>
9292
The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
9393
</ui5-messagestrip><br>
94-
94+
9595
<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.
9696
</ui5-label>
9797
<ui5-button id="btnOpenDialog" style="width: 150px; align-self: flex-end;">Open Wizard Dialog</ui5-button>
9898
</div>
99-
99+
100100
<ui5-button id="toStep2" design="Emphasized">Step 2</ui5-button>
101101
</ui5-wizard-step>
102-
102+
103103
<ui5-wizard-step heading="Product Information">
104104
<div style="display: flex;flex-direction: column">
105105
<ui5-title>2. Product Information</ui5-title><br>
106106
<ui5-label wrap>
107107
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
108108
</ui5-label>
109-
109+
110110
<div style="display: flex; flex-direction: column;">
111111
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
112112
<ui5-label>Name</ui5-label>
113113
<ui5-input placeholder="product name..."></ui5-input>
114114
</div>
115-
115+
116116
<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
117117
<ui5-label>Weight</ui5-label>
118118
<ui5-input value="3.65"></ui5-input>
119119
</div>
120-
120+
121121
<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
122122
<ui5-label>Manifacturer</ui5-label>
123123
<ui5-select>
@@ -126,34 +126,34 @@
126126
<ui5-option>Huawei</ui5-option>
127127
</ui5-select>
128128
</div>
129-
129+
130130
<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
131131
<ui5-label>5 years guarantee included</ui5-label>
132132
<ui5-switch id="sw"></ui5-switch>
133133
</div>
134134
</div>
135135
</div>
136-
136+
137137
<ui5-button id="toStep3" design="Emphasized" hidden>Step 3</ui5-button>
138138
</ui5-wizard-step>
139-
139+
140140
<ui5-wizard-step heading="Options">
141141
<div style="display: flex; flex-direction: column;">
142142
<ui5-title>3. Options</ui5-title><br>
143-
143+
144144
<ui5-label wrap>
145145
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
146146
</ui5-label>
147147
<ui5-messagestrip>
148148
The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
149149
</ui5-messagestrip><br>
150-
150+
151151
<div style="display: flex; flex-direction: column;">
152152
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
153153
<ui5-label>Manifacture date</ui5-label>
154154
<ui5-date-picker></ui5-date-picker>
155155
</div>
156-
156+
157157
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
158158
<ui5-label>Availability</ui5-label>
159159
<ui5-segmentedbutton id="segButton1">
@@ -163,7 +163,7 @@
163163
<ui5-togglebutton>Out of stock</ui5-togglebutton>
164164
</ui5-segmentedbutton>
165165
</div>
166-
166+
167167
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
168168
<ui5-label>Size</ui5-label>
169169
<ui5-segmentedbutton id="sb">
@@ -174,10 +174,10 @@
174174
</div>
175175
</div>
176176
</div>
177-
177+
178178
<ui5-button id="toStep4" design="Emphasized" hidden>Step 4</ui5-button>
179179
</ui5-wizard-step>
180-
180+
181181
<ui5-wizard-step heading="Pricing">
182182
<div style="display: flex; flex-direction: column;">
183183
<ui5-title>4. Pricing</ui5-title><br>
@@ -187,25 +187,25 @@
187187
<ui5-messagestrip>
188188
The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
189189
</ui5-messagestrip><br>
190-
190+
191191
<div style="display: flex; flex-direction: column;">
192192
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
193193
<ui5-label>Price</ui5-label>
194194
<ui5-input placeholder="product price..."></ui5-input>
195195
</div>
196-
196+
197197
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
198198
<ui5-label>Quantity</ui5-label>
199199
<ui5-input placeholder="product quantity..."></ui5-input>
200200
</div>
201-
201+
202202
<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
203203
<ui5-label>Vat included</ui5-label>
204204
<ui5-switch checked></ui5-switch>
205205
</div>
206206
</div>
207207
</div>
208-
208+
209209
<ui5-button id="finalize" design="Emphasized">Finalize</ui5-button>
210210
</ui5-wizard-step>
211211
</ui5-wizard>
@@ -398,7 +398,7 @@
398398
<!-- start column -->
399399
<div style="box-sizing: border-box;" slot="startColumn">
400400
<div style="padding: 1rem">
401-
<ui5-title>Column 1</ui5-title>
401+
<ui5-title>Products list</ui5-title>
402402
</div>
403403
<ui5-list>
404404
<ui5-li>Hello worild!</ui5-li>
@@ -415,7 +415,7 @@
415415
<!-- mid column -->
416416
<div style="box-sizing: border-box;" slot="midColumn">
417417
<div style="padding: 1rem">
418-
<ui5-title>Column 2</ui5-title>
418+
<ui5-title>Product information</ui5-title>
419419
</div>
420420
<ui5-list>
421421
<ui5-li>Hello worild!</ui5-li>
@@ -432,7 +432,7 @@
432432
<!-- end column -->
433433
<div style="box-sizing: border-box;" slot="endColumn">
434434
<div style="padding: 1rem">
435-
<ui5-title>Column 3</ui5-title>
435+
<ui5-title>Product detailed information</ui5-title>
436436
</div>
437437

438438
<ui5-list>
@@ -687,6 +687,17 @@
687687
</ui5-flexible-column-layout>
688688

689689
<script>
690+
691+
fclAcc.accessibilityTexts = {
692+
startColumnAccessibleName: "Products list",
693+
midColumnAccessibleName: "Product information",
694+
endColumnAccessibleName: "Product detailed information",
695+
startArrowLeftText: "Collapse products list",
696+
startArrowRightText: "Expand products list",
697+
endArrowLeftText: "Expand product detailed information",
698+
endArrowRightText: "Collapse product detailed information"
699+
};
700+
690701
var counter = 0;
691702
var counter2 = 0;
692703
fcl1.addEventListener("ui5-layout-change", function(e) {
@@ -699,7 +710,7 @@
699710
layoutChangeRes4.value = ++counter;
700711

701712
});
702-
713+
703714
fcl3.addEventListener("ui5-layout-change", function(e) {
704715
testLayoutChange.value = ++counter2;
705716
});

‎packages/fiori/test/pages/FCLApp.html

-3
Original file line numberDiff line numberDiff line change
@@ -179,9 +179,6 @@
179179
<!--- FLEXIBLE COLUMN LAYOUT -->
180180
<ui5-flexible-column-layout
181181
id="fcl"
182-
start-column-accessible-name="Companies list"
183-
mid-column-accessible-name="Products List"
184-
end-column-accessible-name="Product Details"
185182
>
186183
<div class="column" id="startColumn" slot="startColumn">
187184
<ui5-busyindicator id="startBusy">

‎packages/fiori/test/specs/FCL.spec.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,9 @@ describe("FlexibleColumnLayout Behavior", () => {
103103
const fcl = browser.$("#fclAcc");
104104
const startArrow = fcl.shadow$(".ui5-fcl-arrow--start");
105105
const endArrow = fcl.shadow$(".ui5-fcl-arrow--end");
106-
const startArrowText1 = "Expand the first column";
107-
const startArrowText2 = "Collapse the first column";
108-
const endArrowText = "Expand the last column";
106+
const startArrowText1 = "Expand products list";
107+
const startArrowText2 = "Collapse products list";
108+
const endArrowText = "Expand product detailed information";
109109

110110
// assert
111111
assert.strictEqual(startArrow.getAttribute("title"), startArrowText1,

0 commit comments

Comments
 (0)