File tree Expand file tree Collapse file tree 3 files changed +24
-2
lines changed
Expand file tree Collapse file tree 3 files changed +24
-2
lines changed Original file line number Diff line number Diff line change @@ -17,6 +17,8 @@ import "@ui5/webcomponents-icons/dist/less.js";
1717import SwitchDesign from "./types/SwitchDesign.js" ;
1818import {
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 }
Original file line number Diff line number Diff 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 </ >
Original file line number Diff line number Diff 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.
10061006DYNAMIC_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
10091015ICON_ARIA_TYPE_IMAGE =Image
10101016
You can’t perform that action at this time.
0 commit comments