Skip to content

Commit f4f5864

Browse files
fifoosidfifoosid
authored
feat: rename aria-label to accessible-name (#3449)
1 parent 18de8a1 commit f4f5864

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+202
-120
lines changed

‎packages/base/hash.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
dsWZPIURDa/FQdScEGl9wVxGL1Y=
1+
fwIH67OLD+hDOagFf4EY7oyPVEs=

‎packages/base/src/util/AriaLabelHelper.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import findNodeOwner from "./findNodeOwner.js";
22

33
const getEffectiveAriaLabelText = el => {
44
if (!el.ariaLabelledby) {
5-
if (el.ariaLabel) {
6-
return el.ariaLabel;
5+
if (el.accessibleName) {
6+
return el.accessibleName;
77
}
88

99
return undefined;

‎packages/fiori/src/Timeline.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="ui5-timeline-root" @focusin={{_onfocusin}}>
2-
<ul class="ui5-timeline-list" role="listbox" aria-live="polite" aria-label="{{ariaLabel}}">
2+
<ul class="ui5-timeline-list" role="listbox" aria-live="polite" aria-label="{{accessibleName}}">
33
{{#each items}}
44
<li class="ui5-timeline-list-item" style="list-style-type: none;">
55
<slot name="{{this._individualSlot}}"></slot>

‎packages/fiori/src/Wizard.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,14 @@ const metadata = {
5858
managedSlots: true,
5959
properties: /** @lends sap.ui.webcomponents.fiori.Wizard.prototype */ {
6060
/**
61-
* Defines the aria-label text of the <code>ui5-wizard</code>.
61+
* Sets the accessible aria name of the component.
6262
*
6363
* @type {String}
6464
* @defaultvalue undefined
65-
* @private
65+
* @public
66+
* @since 1.0.0-rc.15
6667
*/
67-
ariaLabel: {
68+
accessibleName: {
6869
type: String,
6970
defaultValue: undefined,
7071
},
@@ -805,7 +806,7 @@ class Wizard extends UI5Element {
805806
}
806807

807808
get ariaLabelText() {
808-
return this.ariaLabel || this.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
809+
return this.accessibleName || this.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
809810
}
810811

811812
get effectiveStepSwitchThreshold() {

‎packages/fiori/src/WizardStep.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -103,12 +103,14 @@ const metadata = {
103103
},
104104

105105
/**
106-
* Defines the aria-label of the step.
106+
* Sets the accessible aria name of the component.
107+
*
107108
* @type {boolean}
108109
* @defaultvalue ""
109-
* @private
110+
* @public
111+
* @since 1.0.0-rc.15
110112
*/
111-
ariaLabel: {
113+
accessibleName: {
112114
type: String,
113115
},
114116

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -596,7 +596,7 @@
596596
<ui5-title level="H5">Rating:</ui5-title>
597597
<ui5-rating-indicator
598598
id="productRating"
599-
aria-label="Hello World"
599+
accessible-name="Hello World"
600600
value="3.5"
601601
></ui5-rating-indicator>
602602
</div>

‎packages/fiori/test/samples/Bar2.sample.html

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<header>
2+
<div class="control-header">Bar</div>
3+
<div class="component-heading-since">
4+
<span><!--since_tag_marker--></span>
5+
</div>
6+
</header>
7+
8+
<div class="component-package">@ui5/webcomponents-fiori</div>
9+
10+
<div class="control-tag">&lt;ui5-bar&gt;</div>
11+
12+
<section>
13+
<h3>Header Bar</h3>
14+
<div class="snippet">
15+
<ui5-bar design="Header">
16+
<ui5-button icon="home" title="Go home" design="Transparent" slot="startContent"></ui5-button>
17+
<ui5-label id="basic-label">Header Title</ui5-label>
18+
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
19+
</ui5-bar>
20+
</div>
21+
<pre class="prettyprint lang-html"><xmp>
22+
<ui5-bar design="Header">
23+
<ui5-button icon="home" title="Go home" design="Transparent" slot="startContent"></ui5-button>
24+
<ui5-label>Header Title</ui5-label>
25+
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
26+
</ui5-bar>
27+
</xmp></pre>
28+
</section>
29+
<section>
30+
<h3>Subheader Bar</h3>
31+
<div class="snippet">
32+
<ui5-bar design="Subheader">
33+
<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
34+
<ui5-label id="basic-label">Subheader Title</ui5-label>
35+
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
36+
</ui5-bar>
37+
</div>
38+
<pre class="prettyprint lang-html"><xmp>
39+
<ui5-bar design="Subheader">
40+
<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
41+
<ui5-label>Subheader Title</ui5-label>
42+
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
43+
</ui5-bar>
44+
</xmp></pre>
45+
</section>
46+
<section>
47+
<h3>Footer Bar</h3>
48+
<div class="snippet">
49+
<ui5-bar design="Footer">
50+
<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
51+
<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
52+
<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
53+
</ui5-bar>
54+
</div>
55+
<pre class="prettyprint lang-html"><xmp>
56+
<ui5-bar design="Footer">
57+
<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
58+
<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
59+
<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
60+
</ui5-bar>
61+
</xmp></pre>
62+
</section>
63+
<section>
64+
<h3>FloatingFooter Bar</h3>
65+
<div class="snippet">
66+
<ui5-bar design="FloatingFooter">
67+
<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
68+
<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
69+
<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
70+
</ui5-bar>
71+
</div>
72+
<pre class="prettyprint lang-html"><xmp>
73+
<ui5-bar design="FloatingFooter">
74+
<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
75+
<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
76+
<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
77+
</ui5-bar>
78+
</xmp></pre>
79+
</section>
80+
81+
<!-- JSDoc marker -->

‎packages/fiori/test/samples/FlexibleColumnLayout.sample.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ <h3>FlexibleColumnLayout - One Initial Column</h3>
124124
<ui5-title level="H5">Rating:</ui5-title>
125125
<ui5-rating-indicator
126126
id="productRating"
127-
aria-label="Hello World"
127+
accessible-name="Hello World"
128128
value="3.5"
129129
></ui5-rating-indicator>
130130
</div>

‎packages/main/src/Button.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -153,13 +153,14 @@ const metadata = {
153153
},
154154

155155
/**
156-
* Defines the aria-label attribute for the button
156+
* Sets the accessible aria name of the component.
157+
*
157158
* @type {String}
158159
* @defaultvalue: ""
159-
* @private
160-
* @since 1.0.0-rc.7
160+
* @public
161+
* @since 1.0.0-rc.15
161162
*/
162-
ariaLabel: {
163+
accessibleName: {
163164
type: String,
164165
defaultValue: undefined,
165166
},

‎packages/main/src/Card.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -115,14 +115,14 @@ const metadata = {
115115
},
116116

117117
/**
118-
* Defines the aria-label attribute for the component
118+
* Sets the accessible aria name of the component.
119119
*
120120
* @type {String}
121-
* @since 1.0.0-rc.9
122-
* @private
121+
* @public
122+
* @since 1.0.0-rc.15
123123
* @defaultvalue ""
124124
*/
125-
ariaLabel: {
125+
accessibleName: {
126126
type: String,
127127
},
128128

‎packages/main/src/CheckBox.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -166,13 +166,14 @@ const metadata = {
166166
},
167167

168168
/**
169-
* Determines the <code>aria-label</code>, set on the component root tag.
169+
* Sets the accessible aria name of the component.
170+
*
170171
* @type {string}
171172
* @defaultvalue undefined
172-
* @private
173-
* @since 1.0.0-rc.8
173+
* @public
174+
* @since 1.0.0-rc.15
174175
*/
175-
ariaLabel: {
176+
accessibleName: {
176177
type: String,
177178
defaultValue: undefined,
178179
},

‎packages/main/src/ComboBox.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -189,13 +189,14 @@ const metadata = {
189189
},
190190

191191
/**
192-
* Defines the aria-label attribute for the combo box
192+
* Sets the accessible aria name of the component.
193+
*
193194
* @type {String}
194195
* @defaultvalue: ""
195-
* @private
196-
* @since 1.0.0-rc.8
196+
* @public
197+
* @since 1.0.0-rc.15
197198
*/
198-
ariaLabel: {
199+
accessibleName: {
199200
type: String,
200201
defaultValue: undefined,
201202
},

‎packages/main/src/DatePicker.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -169,11 +169,10 @@ const metadata = {
169169
* Defines the aria-label attribute for the component.
170170
*
171171
* @type {String}
172-
* @since 1.0.0-rc.9
173-
* @private
174-
* @defaultvalue ""
172+
* @public
173+
* @since 1.0.0-rc.15
175174
*/
176-
ariaLabel: {
175+
accessibleName: {
177176
type: String,
178177
},
179178

‎packages/main/src/Dialog.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,8 @@ const metadata = {
6767
},
6868

6969
/**
70-
* Defines the accessible name of the dialog when <code>header</code> slot is provided.
71-
* <br><br>
70+
* Sets the accessible aria name of the component.
7271
*
73-
* <b>Note:</b> If <code>aria-label</code> is provided, <code>accessibleName</code> will be ignored.
74-
7572
* @type {string}
7673
* @defaultvalue ""
7774
* @public
@@ -240,7 +237,7 @@ class Dialog extends Popup {
240237
get _ariaLabelledBy() { // Required by Popup.js
241238
let ariaLabelledById;
242239

243-
if (this.headerText !== "" && !this.ariaLabel) {
240+
if (this.headerText !== "" && !this.accessibleName) {
244241
ariaLabelledById = "ui5-popup-header-text";
245242
}
246243

@@ -253,7 +250,8 @@ class Dialog extends Popup {
253250
if (this.header.length > 0 && !!this.accessibleName) {
254251
ariaLabel = this.accessibleName;
255252
}
256-
return this.ariaLabel ? this.ariaLabel : ariaLabel;
253+
254+
return this.accessibleName ? this.accessibleName : ariaLabel;
257255
}
258256

259257
get _ariaModal() { // Required by Popup.js

‎packages/main/src/Input.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -300,14 +300,13 @@ const metadata = {
300300
},
301301

302302
/**
303-
* Defines the aria-label attribute for the input
303+
* Sets the accessible aria name of the component.
304304
*
305305
* @type {String}
306-
* @since 1.0.0-rc.8
307-
* @private
308-
* @defaultvalue ""
306+
* @public
307+
* @since 1.0.0-rc.15
309308
*/
310-
ariaLabel: {
309+
accessibleName: {
311310
type: String,
312311
},
313312

‎packages/main/src/Link.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -103,14 +103,13 @@ const metadata = {
103103
},
104104

105105
/**
106-
* Defines the aria-label attribute for the link.
106+
* Sets the accessible aria name of the component.
107107
*
108108
* @type {String}
109-
* @since 1.0.0-rc.10
110-
* @private
111-
* @defaultvalue ""
109+
* @public
110+
* @since 1.0.0-rc.15
112111
*/
113-
ariaLabel: {
112+
accessibleName: {
114113
type: String,
115114
},
116115

‎packages/main/src/List.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -199,12 +199,14 @@ const metadata = {
199199
},
200200

201201
/**
202+
* Sets the accessible aria name of the component.
203+
*
202204
* @type {String}
203205
* @defaultvalue ""
204-
* @private
205-
* @since 1.0.0-rc.8
206+
* @public
207+
* @since 1.0.0-rc.15
206208
*/
207-
ariaLabel: {
209+
accessibleName: {
208210
type: String,
209211
},
210212

@@ -523,7 +525,7 @@ class List extends UI5Element {
523525
}
524526

525527
get ariaLabelledBy() {
526-
if (this.ariaLabelledby || this.ariaLabel) {
528+
if (this.ariaLabelledby || this.accessibleName) {
527529
return undefined;
528530
}
529531

‎packages/main/src/Panel.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
icon="slim-arrow-right"
2626
@click="{{_toggleButtonClick}}"
2727
._buttonAccInfo="{{accInfo.button}}"
28-
aria-label="{{accInfo.button.ariaLabelButton}}"
28+
accessible-name="{{accInfo.button.ariaLabelButton}}"
2929
></ui5-button>
3030
{{else}}
3131
<ui5-icon

‎packages/main/src/Panel.js

+2
Original file line numberDiff line numberDiff line change
@@ -120,9 +120,11 @@ const metadata = {
120120

121121
/**
122122
* Sets the accessible aria name of the component.
123+
*
123124
* @type {string}
124125
* @defaultvalue ""
125126
* @public
127+
* @since 1.0.0-rc.15
126128
*/
127129
accessibleName: {
128130
type: String,

‎packages/main/src/Popover.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -725,7 +725,7 @@ class Popover extends Popup {
725725
}
726726

727727
get _ariaLabelledBy() { // Required by Popup.js
728-
return this.ariaLabel ? undefined : "ui5-popup-header";
728+
return this.accessibleName ? undefined : "ui5-popup-header";
729729
}
730730

731731
get _ariaModal() { // Required by Popup.js

0 commit comments

Comments
 (0)