feat(Row): Row switch announces when it has expanded content #1462

AlexandraGallipoliRodrigues · 2025-11-18T12:59:57Z

ticket: https://jira.tid.es/browse/WEB-2283

Cambios

Añadir una “capa de accesibilidad para patrón acordeón con switch”:

aria-expanded
aria-controls
aria-live
aria-busy
label dinámico con “options below”.

Añadir estado de carga integrado en Row:

deshabilitar el switch cuando hay petición en curso (busy)

Y todo ello solo se activa si pasas controlDisclosure en ControlProps. Si no lo pasas, una Row con switch / checkbox / radio se sigue comportando como siempre.

Cambios que se deben hacer en webapp:

En pages/call-forwarding/ui/components/first-level-setting.tsx sustituir el SwitchRow por:

<Row
  title={texts.switchRow}
  switch={{
    name={`enable-${settingType.main}${settingType?.condition ?? ''}`},
    value: switchUiEnabled,
    onChange: handleChangeSettingStatus,
    controlDisclosure={{
      expanded: switchUiEnabled,
      'aria-live': 'assertive',
      'aria-busy': showChangeUndergoing === State.CHANGING,
      onLabelWhenExpanded: I18N.translate(''%(aria_label_switch_button_as_accordion_suffix_options_available_below)Options available below.''),
    }}
  }}
  dataAttributes={{ testid: switchTestId }}
/>

En pages/call-forwarding/ui/steps/main.tsx sustituir el SwitchRow por:

<Row
  title={I18N.translate('%(call_forwarding_main_forwarding_selector_switch)Call forwarding')}
  switch={{
    name: 'enable-forwarding',
    value: isForwardingEnabled,
    onChange: handleChangeForwardingSettings,
    controlDisclosure={{
      expanded: switchUiEnabled,
      'aria-live': 'assertive',
      'aria-busy': showChangeUndergoing === State.CHANGING,
      onLabelWhenExpanded: I18N.translate(''%(aria_label_switch_button_as_accordion_suffix_options_available_below)Options available below.''),
    }}
  }}
/>

Probado con voiceOver activado y en la brand de movistar:

test-local-expanded-rows.MP4

playroom

Copilot

Pull Request Overview

This PR adds accessibility features for Row components with switches that act as accordion toggles, implementing ARIA patterns for disclosure widgets. It enables Row switches to announce their expanded state and optionally display loading indicators.

Key Changes:

Added SwitchDisclosure type with ARIA attributes (expanded, controls, live) and loading states (busy, showSpinner)
Integrated dynamic aria-label generation that appends "options below" text when expanded
Added loading state support with switch disabling and optional spinner display

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-18T13:00:43Z

src/list.tsx

+        const computedAriaLabel =
+            ariaLabel ??
+            (props.switchDisclosure?.expanded
+                ? `${title} ${props.switchDisclosure?.onLabelWhenExpanded ?? 'Options available below.'}`


The fallback text 'Options available below.' is hardcoded in English. This should be internationalized or derived from a translation function to support multiple languages, as the PR description shows usage with I18N.translate() in the webapp integration examples.

i haven't found any I18N.translate() in this repo. How should I approach this?

Search in the repo for usage examples of: const {texts, t} = useTheme();

Texts are defined in the context provider and can be overriden, for example:

texts.formCreditCardNumberLabel || t(tokens.formCreditCardNumberLabel)

texts.formCreditCardNumberLabel is the user defined text override via provider (optional)

t(tokens.formCreditCardNumberLabel) calls the translate function for the token

Copilot · 2025-11-18T13:00:44Z

src/list.tsx

-                          </Box>
+                  <div
+                      aria-live={props.switchDisclosure?.live ?? 'off'}
+                      aria-atomic


The aria-atomic attribute is always set to true, but aria-live defaults to 'off'. When aria-live is 'off', aria-atomic has no effect. Consider only setting aria-atomic when aria-live is not 'off', or documenting why aria-atomic should always be present.

Suggested change

aria-atomic

{...(props.switchDisclosure?.live && props.switchDisclosure.live !== 'off' ? {'aria-atomic': true} : {})}

I have adjusted aria-atomic so that it is only added when aria-live is not “off”.
In practice, our case always uses live: “assertive”, but we leave the type open to “polite” | “off” | “assertive”, so the wrapper behaves correctly in any of them

Copilot · 2025-11-18T13:00:44Z

src/list.tsx

+                  <div
+                      aria-live={props.switchDisclosure?.live ?? 'off'}
+                      aria-atomic
+                      aria-busy={rowIsBusy || undefined}


Using || undefined to conditionally render the attribute is unnecessary. The aria-busy attribute should be explicitly set to 'true' or 'false' as a string, or omitted entirely. Use aria-busy={rowIsBusy ? 'true' : undefined} or aria-busy={rowIsBusy ? true : undefined} instead.

Suggested change

aria-busy={rowIsBusy || undefined}

aria-busy={rowIsBusy ? 'true' : undefined}

i thought is a type Booleanish = boolean | 'true' | 'false'; so booleans are also valid, right?

github-actions · 2025-11-18T13:02:05Z

Size stats

	master	this branch	diff
Total JS	16.5 MB	16.5 MB	+2.43 kB
JS without icons	2.36 MB	2.37 MB	+2.43 kB
Lib overhead	86.7 kB	86.7 kB	0 B
Lib overhead (gzip)	19.1 kB	19.1 kB	0 B

github-actions · 2025-11-18T13:03:18Z

Accessibility report
✔️ No issues found

ℹ️ You can run this locally by executing yarn audit-accessibility.

AlexandraGallipoliRodrigues · 2025-11-18T13:03:33Z

~~sabeis como puedo probarlo en dev o en el propio flujo? Porque no veo en las github actions como desplegar mi snapshot o algo 🤨~~

nada, ya enconte el enlace ⬇️

github-actions · 2025-11-18T13:06:23Z

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-r94kf82im-flows-projects-65bb050e.vercel.app

Built with commit 29943be.
This pull request is being automatically deployed with vercel-action

Copilot

Pull Request Overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/list.tsx

…content

pladaria

Please, implement a store (can be private) with an usage example of this feature.

A playroom snippet would also be nice

aweell · 2025-11-27T14:53:18Z

src/list.tsx

    atomicReading?: boolean;
 }

+type SwitchDisclosure = {


Should we consider a more open approach rather than the row with switch only?

I was reviewing requests from design teams and in this case the control used is a radio instead of a switch:

Telefonica/mistica-design#2172

Can (or should) this approach be abstracted to work with any type of control the list allows?

agree, I think we should make this more generic

atabel · 2025-11-27T20:07:43Z

src/list.tsx

+    busy?: boolean; // blocks UI and sets aria-busy
+    showSpinner?: boolean; // shows spinner on the right


showSpinner and busy aren't the same?

one was for showing the spinner the other for setting aria-busy, but as the spinner is not in the spec, i'll delete the showSpinner

atabel · 2025-11-27T20:08:06Z

src/list.tsx

    atomicReading?: boolean;
 }

+type SwitchDisclosure = {


agree, I think we should make this more generic

atabel · 2025-11-27T20:11:51Z

src/list.tsx

 }

+type SwitchDisclosure = {
+    expanded: boolean; // is the related content expanded


If you want comments to be shown by vscode as jsdoc, you need to write them in jsdoc format:

{ /** some doc about foo */ foo: string; }

atabel · 2025-11-27T20:13:01Z

src/list.tsx

+    controlsId?: string; // id of the related content (if any)
+    live?: 'off' | 'polite' | 'assertive'; // announcement channel when changing expanded
+    busy?: boolean; // blocks UI and sets aria-busy


I prefer using aria-xxx naming

atabel · 2025-11-27T20:13:56Z

src/list.tsx

+    live?: 'off' | 'polite' | 'assertive'; // announcement channel when changing expanded
+    busy?: boolean; // blocks UI and sets aria-busy
+    showSpinner?: boolean; // shows spinner on the right
+    onLabelWhenExpanded?: string; // message when expanded = true


why do we need a different label for the expanded state? can't this be controlled by Row users by changing the label when needed?

This is for changing the announcement of the SR, in case you wanted something diffferent form "Options below"

atabel · 2025-11-27T20:15:13Z

src/list.tsx

    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;

    switch: ControlProps | undefined;
+    switchDisclosure?: SwitchDisclosure;


why a different switchDisclosure prop? shouldn't most of that props be part of the ControlProps type?

atabel · 2025-11-27T20:32:02Z

src/list.tsx

+                          aria-controls={props.switchDisclosure?.controlsId}
+                          aria-expanded={props.switchDisclosure?.expanded}


this doesn't work. You need to add these aria props in Switch component. TS doesn't warn you because there is a TS bug that allows you passing any aria-xxx prop to any component

oki, but for the role row it seems that aria doesn't support aria-expanded

i'll added inside the div before the RadioButton

atabel · 2025-11-27T20:35:40Z

src/list.tsx

+                  <div
+                      aria-live={props.switchDisclosure?.live ?? 'off'}
+                      aria-atomic={props.switchDisclosure?.live !== 'off'}
+                      aria-busy={rowIsBusy || undefined}


why is this aria-live/atomic/busy part not needed in the renderRowWithDoubleInteraction case?

it's needed as well, i'll added it

atabel · 2025-11-27T20:36:38Z

src/list.tsx

+                              </Box>
+                          )}
+                      />
+                      {showSpinner && (


is this spinner in the spec?

I recall the spinner was part of other conversation rather than expand/collapse states.

Telefonica/mistica-design#2151

The row is also using a switch but not necessarily expands or collapses content. If we want to cover coth cases i can update specs.

https://teams.microsoft.com/l/message/19:68854aea147e4787803aff0e380e1208@thread.tacv2/1739980344078?tenantId=9744600e-3e04-492e-baa1-25ec245c6f10&groupId=e265fe99-929f-45d1-8154-699649674a40&parentMessageId=1739980344078&teamName=M%C3%ADstica&channelName=Help&createdTime=1739980344078

you’re right, the spinner is not part of the task, it comes from the original call-forwarding loading states (CHANGING / LENGTHY), which is a separate matter.

I’ll remove showSpinner and the built–in spinner rendering from Row

…witch-announces-when-it-has-expanded-content

AlexandraGallipoliRodrigues · 2025-12-10T16:28:57Z

Please, implement a store (can be private) with an usage example of this feature.

private story

A playroom snippet would also be nice

dev playroom

row-switch-announces-when-it-has-expanded-content

263c87f

AlexandraGallipoliRodrigues requested a review from Copilot November 18, 2025 13:00

translated comments

592463f

Copilot AI reviewed Nov 18, 2025

View reviewed changes

modified aria-atomic

00ccb52

AlexandraGallipoliRodrigues requested review from atabel, Copilot, pladaria and yceballost November 18, 2025 13:35

Copilot AI reviewed Nov 18, 2025

View reviewed changes

src/list.tsx Outdated Show resolved Hide resolved

AlexandraGallipoliRodrigues added 2 commits November 19, 2025 14:31

WEB-2283: replaced literal with a token

a2f065b

Merge branch 'master' into row-switch-announces-when-it-has-expanded-…

5e63e6b

…content

yceballost requested review from aweell and removed request for yceballost November 26, 2025 08:24

pladaria approved these changes Nov 27, 2025

View reviewed changes

pladaria self-requested a review November 27, 2025 09:43

aweell reviewed Nov 27, 2025

View reviewed changes

atabel reviewed Nov 27, 2025

View reviewed changes

AlexandraGallipoliRodrigues added 2 commits December 9, 2025 12:01

PR changes

b5821ef

Merge branch 'master' of github.com:Telefonica/mistica-web into row-s…

e57dbb6

…witch-announces-when-it-has-expanded-content

AlexandraGallipoliRodrigues requested review from atabel and aweell December 9, 2025 11:04

AlexandraGallipoliRodrigues added 2 commits December 10, 2025 16:56

minor changes

b5e21c5

added private list-disclosure-story

c197544

deleted aria-expanded and aria-controls from rows

29943be

pladaria approved these changes Dec 17, 2025

View reviewed changes

	aria-atomic
	{...(props.switchDisclosure?.live && props.switchDisclosure.live !== 'off' ? {'aria-atomic': true} : {})}

	aria-busy={rowIsBusy \|\| undefined}
	aria-busy={rowIsBusy ? 'true' : undefined}

		busy?: boolean; // blocks UI and sets aria-busy
		showSpinner?: boolean; // shows spinner on the right

		aria-controls={props.switchDisclosure?.controlsId}
		aria-expanded={props.switchDisclosure?.expanded}

feat(Row): Row switch announces when it has expanded content #1462

Are you sure you want to change the base?

feat(Row): Row switch announces when it has expanded content #1462

Uh oh!

Conversation

AlexandraGallipoliRodrigues commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Cambios

Cambios que se deben hacer en webapp:

Probado con voiceOver activado y en la brand de movistar:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Nov 18, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 18, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 18, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AlexandraGallipoliRodrigues commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

pladaria left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AlexandraGallipoliRodrigues commented Nov 18, 2025 •

edited

Loading

github-actions bot commented Nov 18, 2025 •

edited

Loading

github-actions bot commented Nov 18, 2025 •

edited

Loading

AlexandraGallipoliRodrigues commented Nov 18, 2025 •

edited

Loading

github-actions bot commented Nov 18, 2025 •

edited

Loading