Skip to content

Commit c33a2f4

Browse files
committed
remove double announcement on on/off cusotm texts
1 parent 59f69a8 commit c33a2f4

File tree

3 files changed

+24
-2
lines changed

3 files changed

+24
-2
lines changed

packages/main/src/Switch.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import "@ui5/webcomponents-icons/dist/less.js";
1717
import SwitchDesign from "./types/SwitchDesign.js";
1818
import {
1919
FORM_CHECKABLE_REQUIRED,
20+
SWITCH_ON,
21+
SWITCH_OFF,
2022
} from "./generated/i18n/i18n-defaults.js";
2123

2224
// Template
@@ -301,6 +303,20 @@ class Switch extends UI5Element implements IFormInputElement {
301303
return this.graphical ? "" : this.textOff;
302304
}
303305

306+
/**
307+
* Determines if custom on/off texts duplicate the default role announcement.
308+
* When textOn/textOff match the localized "On"/"Off" strings (case-insensitive),
309+
* they duplicate what role="switch" with aria-checked already announces,
310+
* so they should be aria-hidden to avoid duplicate screen reader announcements.
311+
*/
312+
get _textAriaHidden(): boolean | undefined {
313+
const on = this.textOn?.toLowerCase();
314+
const off = this.textOff?.toLowerCase();
315+
const i18nOn = Switch.i18nBundle.getText(SWITCH_ON).toLowerCase();
316+
const i18nOff = Switch.i18nBundle.getText(SWITCH_OFF).toLowerCase();
317+
return (on === i18nOn && off === i18nOff) || undefined;
318+
}
319+
304320
get effectiveTabIndex() {
305321
return this.disabled ? undefined : 0;
306322
}

packages/main/src/SwitchTemplate.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ export default function SwitchTemplate(this: Switch) {
5252
</>
5353
:
5454
<>
55-
<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{this._textOn}</span>
56-
<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{this._textOff}</span>
55+
<span class="ui5-switch-text ui5-switch-text--on" part="text-on" aria-hidden={this._textAriaHidden}>{this._textOn}</span>
56+
<span class="ui5-switch-text ui5-switch-text--off" part="text-off" aria-hidden={this._textAriaHidden}>{this._textOff}</span>
5757
</>
5858
}
5959
</>

packages/main/src/i18n/messagebundle.properties

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1005,6 +1005,12 @@ DYNAMIC_DATE_RANGE_NEXT_COMBINED_TEXT=Next X {0} (included)
10051005
#XFLD: Suffix text for included date range options.
10061006
DYNAMIC_DATE_RANGE_INCLUDED_TEXT=(included)
10071007

1008+
#XACT: Default text for switch "on" state, used to detect duplicate screen reader announcements
1009+
SWITCH_ON=On
1010+
1011+
#XACT: Default text for switch "off" state, used to detect duplicate screen reader announcements
1012+
SWITCH_OFF=Off
1013+
10081014
#XACT: ARIA announcement for icon type image
10091015
ICON_ARIA_TYPE_IMAGE=Image
10101016

0 commit comments

Comments
 (0)