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

refactor(ui5-flexible-column-layout): Add more accessibility texts #2571

Merged
merged 2 commits into from
Dec 15, 2020
+66 −70
Merged

refactor(ui5-flexible-column-layout): Add more accessibility texts #2571

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e333e8
refactor(ui5-flexible-column-layout): Add more accessibility texts
vladitasev Dec 11, 2020
bee52d3
fix failing test
vladitasev Dec 14, 2020
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
68 changes: 28 additions & 40 deletions packages/fiori/src/FlexibleColumnLayout.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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