Skip to content

Commit 42d3ed5

Browse files
fifoosidfifoosid
authored
feat: implement assessibleNameRef for many components (#3442)
Part of #3107 BREAKING CHANGE: The support for ```aria-labelledby``` have been deprecated in favour of new attribute ```accessible-name-ref``` for the following components: - ComboBox (Requested by SF #1916) - DatePicker (Requested by SF #2107) - Input (Requested #1866) - List (Requested by SF #1886) - Rating Indicator - Select (Requested by SF #2107) - StepInput (Implemented as part of the initial implementation #2804) - TextArea (Requested by SF #2107) - WizardStep (Implemented as part of the initial implementation #2400) The ```aria-labelledby``` has been deprecated for the following component: - Button (Requested by SF #1425) The ```accessible-name``` has been deprecated for the following components: - Link (Requested by SF #2356) Both ```aria-labelledby``` and ```accessible-name``` have been deprecated for the following components: - Card (Requested by CBC #2127) - CheckBox (Requested by SF #2265)
1 parent ba8551f commit 42d3ed5

35 files changed

+184
-319
lines changed

‎packages/base/hash.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
Jo7xX6Xqjqd/+p/wSl0hl57d8ng=
1+
44n+tz3Upvb7fx9BuRR5JpZRssg=

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

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

33
const getEffectiveAriaLabelText = el => {
4-
if (!el.ariaLabelledby) {
4+
if (!el.accessibleNameRef) {
55
if (el.accessibleName) {
66
return el.accessibleName;
77
}
@@ -19,7 +19,7 @@ const getEffectiveAriaLabelText = el => {
1919
* @param {String} readyIds (Optional) Defines a string of elements ids. The text of these elements will be returned. If used you should provide either el or ownerDocument
2020
*/
2121
const getAriaLabelledByTexts = (el, ownerDocument, readyIds = "") => {
22-
const ids = (readyIds && readyIds.split(" ")) || el.ariaLabelledby.split(" ");
22+
const ids = (readyIds && readyIds.split(" ")) || el.accessibleNameRef.split(" ");
2323
const owner = ownerDocument || findNodeOwner(el);
2424
let result = "";
2525

‎packages/fiori/src/NotificationListItem.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const metadata = {
5353
* @type {WrappingType}
5454
* @defaultvalue "None"
5555
* @public
56-
* @since 1.0.0-rc.16
56+
* @since 1.0.0-rc.15
5757
*/
5858
wrappingType: {
5959
type: WrappingType,

‎packages/fiori/src/WizardStep.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -118,9 +118,10 @@ const metadata = {
118118
* Defines the aria-labelledby of the step.
119119
* @type {boolean}
120120
* @defaultvalue ""
121-
* @private
121+
* @public
122+
* @since 1.0.0-rc.15
122123
*/
123-
ariaLabelledby: {
124+
accessibleNameRef: {
124125
type: String,
125126
},
126127
},

‎packages/main/src/Button.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
aria-expanded="{{accInfo.ariaExpanded}}"
1919
aria-controls="{{accInfo.ariaControls}}"
2020
aria-haspopup="{{accInfo.ariaHaspopup}}"
21-
aria-label="{{ariaLabelText}}"
21+
aria-label="{{accessibleName}}"
2222
title="{{accInfo.title}}"
2323
part="button"
2424
>

‎packages/main/src/Button.js

-17
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
44
import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
55
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
6-
import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
76
import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
87
import { isPhone, isTablet } from "@ui5/webcomponents-base/dist/Device.js";
98
import ButtonDesign from "./types/ButtonDesign.js";
@@ -165,18 +164,6 @@ const metadata = {
165164
defaultValue: undefined,
166165
},
167166

168-
/**
169-
* Receives id(or many ids) of the elements that label the button
170-
* @type {String}
171-
* @defaultvalue ""
172-
* @private
173-
* @since 1.0.0-rc.7
174-
*/
175-
ariaLabelledby: {
176-
type: String,
177-
defaultValue: "",
178-
},
179-
180167
/**
181168
* @type {String}
182169
* @defaultvalue ""
@@ -443,10 +430,6 @@ class Button extends UI5Element {
443430
};
444431
}
445432

446-
get ariaLabelText() {
447-
return getEffectiveAriaLabelText(this);
448-
}
449-
450433
static typeTextMappings() {
451434
return {
452435
"Positive": BUTTON_ARIA_TYPE_ACCEPT,

‎packages/main/src/Card.hbs

+1-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
class="{{classes}}"
33
dir="{{effectiveDir}}"
44
role="region"
5-
aria-label="{{ariaLabelText}}"
6-
aria-labelledby="{{ariaLabelledByCard}}"
7-
>
8-
<!-- header -->
5+
aria-labelledby="{{ariaLabelledByCard}}">
96
{{#if hasHeader}}
107
<div class="ui5-card-header-root">
118
<slot name="header"></slot>

‎packages/main/src/Card.js

+2-29
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
4-
import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
54
import CardTemplate from "./generated/templates/CardTemplate.lit.js";
65
import Icon from "./Icon.js";
76

@@ -48,32 +47,10 @@ const metadata = {
4847
},
4948
properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
5049

51-
/**
52-
* Sets the accessible aria name of the component.
53-
*
54-
* @type {String}
55-
* @public
56-
* @since 1.0.0-rc.15
57-
* @defaultvalue ""
58-
*/
59-
accessibleName: {
60-
type: String,
61-
},
50+
},
51+
events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
6252

63-
/**
64-
* Receives id(or many ids) of the elements that label the component
65-
*
66-
* @type {String}
67-
* @defaultvalue ""
68-
* @private
69-
* @since 1.0.0-rc.9
70-
*/
71-
ariaLabelledby: {
72-
type: String,
73-
defaultValue: "",
74-
},
7553
},
76-
events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {},
7754
};
7855

7956
/**
@@ -138,10 +115,6 @@ class Card extends UI5Element {
138115
return !!this.header.length;
139116
}
140117

141-
get ariaLabelText() {
142-
return getEffectiveAriaLabelText(this);
143-
}
144-
145118
get ariaCardRoleDescription() {
146119
return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD);
147120
}

‎packages/main/src/CardHeader.js

-28
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
4-
import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
54
import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
65
import CardHeaderTemplate from "./generated/templates/CardHeaderTemplate.lit.js";
76
import Icon from "./Icon.js";
@@ -93,29 +92,6 @@ const metadata = {
9392
type: Boolean,
9493
},
9594

96-
/**
97-
* Defines the aria-label attribute for the component
98-
*
99-
* @type {String}
100-
* @private
101-
* @defaultvalue ""
102-
*/
103-
ariaLabel: {
104-
type: String,
105-
},
106-
107-
/**
108-
* Receives id(or many ids) of the elements that label the component
109-
*
110-
* @type {String}
111-
* @defaultvalue ""
112-
* @private
113-
*/
114-
ariaLabelledby: {
115-
type: String,
116-
defaultValue: "",
117-
},
118-
11995
_headerActive: {
12096
type: Boolean,
12197
noAttribute: true,
@@ -208,10 +184,6 @@ class CardHeader extends UI5Element {
208184
return this.interactive ? undefined : "3";
209185
}
210186

211-
get ariaLabelText() {
212-
return getEffectiveAriaLabelText(this);
213-
}
214-
215187
get ariaCardHeaderRoleDescription() {
216188
return this.interactive ? this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
217189
}

‎packages/main/src/CheckBox.hbs

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
aria-checked="{{ariaChecked}}"
55
aria-readonly="{{ariaReadonly}}"
66
aria-disabled="{{ariaDisabled}}"
7-
aria-label="{{ariaLabelText}}"
87
aria-labelledby="{{ariaLabelledBy}}"
98
aria-describedby="{{ariaDescribedBy}}"
109
tabindex="{{tabIndex}}"

‎packages/main/src/CheckBox.js

+1-35
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
22
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
33
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
44
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
5-
import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
65
import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
76
import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
87
import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -164,31 +163,6 @@ const metadata = {
164163
name: {
165164
type: String,
166165
},
167-
168-
/**
169-
* Sets the accessible aria name of the component.
170-
*
171-
* @type {string}
172-
* @defaultvalue undefined
173-
* @public
174-
* @since 1.0.0-rc.15
175-
*/
176-
accessibleName: {
177-
type: String,
178-
defaultValue: undefined,
179-
},
180-
181-
/**
182-
* Receives id(or many ids) of the elements that label the checkbox
183-
* @type {String}
184-
* @defaultvalue ""
185-
* @private
186-
* @since 1.0.0-rc.9
187-
*/
188-
ariaLabelledby: {
189-
type: String,
190-
defaultValue: "",
191-
},
192166
},
193167
events: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
194168

@@ -365,20 +339,12 @@ class CheckBox extends UI5Element {
365339
return this.disabled ? "true" : undefined;
366340
}
367341

368-
get ariaLabelText() {
369-
return getEffectiveAriaLabelText(this);
370-
}
371-
372342
get ariaChecked() {
373343
return this.indeterminate && this.checked ? "mixed" : this.checked;
374344
}
375345

376346
get ariaLabelledBy() {
377-
if (!this.ariaLabelText) {
378-
return this.text ? `${this._id}-label` : undefined;
379-
}
380-
381-
return undefined;
347+
return this.text ? `${this._id}-label` : undefined;
382348
}
383349

384350
get ariaDescribedBy() {

‎packages/main/src/ComboBox.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -205,10 +205,10 @@ const metadata = {
205205
* Receives id(or many ids) of the elements that label the combo box
206206
* @type {String}
207207
* @defaultvalue ""
208-
* @private
209-
* @since 1.0.0-rc.8
208+
* @public
209+
* @since 1.0.0-rc.15
210210
*/
211-
ariaLabelledby: {
211+
accessibleNameRef: {
212212
type: String,
213213
defaultValue: "",
214214
},

‎packages/main/src/DatePicker.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -181,10 +181,10 @@ const metadata = {
181181
*
182182
* @type {String}
183183
* @defaultvalue ""
184-
* @private
185-
* @since 1.0.0-rc.9
184+
* @public
185+
* @since 1.0.0-rc.15
186186
*/
187-
ariaLabelledby: {
187+
accessibleNameRef: {
188188
type: String,
189189
defaultValue: "",
190190
},

‎packages/main/src/Input.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -316,10 +316,10 @@ const metadata = {
316316
*
317317
* @type {String}
318318
* @defaultvalue ""
319-
* @private
320-
* @since 1.0.0-rc.8
319+
* @public
320+
* @since 1.0.0-rc.15
321321
*/
322-
ariaLabelledby: {
322+
accessibleNameRef: {
323323
type: String,
324324
defaultValue: "",
325325
},

‎packages/main/src/Link.js

+5-16
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
4-
import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
4+
import { getAriaLabelledByTexts } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
55
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
66
import LinkDesign from "./types/LinkDesign.js";
77
import WrappingType from "./types/WrappingType.js";
@@ -102,26 +102,15 @@ const metadata = {
102102
defaultValue: WrappingType.None,
103103
},
104104

105-
/**
106-
* Sets the accessible aria name of the component.
107-
*
108-
* @type {String}
109-
* @public
110-
* @since 1.0.0-rc.15
111-
*/
112-
accessibleName: {
113-
type: String,
114-
},
115-
116105
/**
117106
* Receives id(or many ids) of the elements that label the input
118107
*
119108
* @type {String}
120109
* @defaultvalue ""
121-
* @private
122-
* @since 1.0.0-rc.10
110+
* @public
111+
* @since 1.0.0-rc.15
123112
*/
124-
ariaLabelledby: {
113+
accessibleNameRef: {
125114
type: String,
126115
defaultValue: "",
127116
},
@@ -244,7 +233,7 @@ class Link extends UI5Element {
244233
}
245234

246235
get ariaLabelText() {
247-
return getEffectiveAriaLabelText(this);
236+
return getAriaLabelledByTexts(this);
248237
}
249238

250239
get hasLinkType() {

‎packages/main/src/List.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -215,10 +215,10 @@ const metadata = {
215215
*
216216
* @type {String}
217217
* @defaultvalue ""
218-
* @private
219-
* @since 1.0.0-rc.8
218+
* @public
219+
* @since 1.0.0-rc.15
220220
*/
221-
ariaLabelledby: {
221+
accessibleNameRef: {
222222
type: String,
223223
defaultValue: "",
224224
},
@@ -525,7 +525,7 @@ class List extends UI5Element {
525525
}
526526

527527
get ariaLabelledBy() {
528-
if (this.ariaLabelledby || this.accessibleName) {
528+
if (this.accessibleNameRef || this.accessibleName) {
529529
return undefined;
530530
}
531531

0 commit comments

Comments
 (0)