fix(stepper): improves AT Users experience with screen readers #7691

anveshmekala · 2023-09-06T21:20:03Z

Related Issue: #5602

Summary

Provides context of stepper-item component state and the current focused step in stepper with screen readers.

anveshmekala · 2023-09-07T17:23:00Z

Tested with NVDA in Chrome and VoiceOver in safari. Context is available regarding current step and the complete status of step.

geospatialem

The current and completed step sounds great in both NVDA and JAWS announcing if the step is current (not on selection which is out of scope for AT support) and when the step is complete.

driskull

Looking good!

driskull · 2023-09-08T20:56:22Z

packages/calcite-components/src/components/stepper-item/stepper-item.tsx

        onClick={this.handleItemClick}
        onKeyDown={this.keyDownHandler}
      >
        <div class="container">
+          {this.complete && (
+            <span aria-live="polite" class="visually-hidden">
+              {"Completed step"}


should reference message here.

Without T9nComponent interface implemented, we cant test the message bundles for all supported locales. Once the translations are back this will be replaced.

added #7759.

This should reference the messages now right?

packages/calcite-components/src/components/stepper-item/stepper-item.tsx

driskull · 2023-09-08T20:57:02Z

packages/calcite-components/src/components/stepper/stepper.tsx

-          this.setStepperItemNumberingSystem();
-        }}
-      />
+      <Host aria-label={"Progress steps"} role="region">


aria-label should reference message

This should reference the messages now right?

packages/calcite-components/src/components/stepper/stepper.tsx

driskull

👍

driskull · 2023-09-18T19:56:59Z

packages/calcite-components/src/components/stepper-item/stepper-item.tsx

        onClick={this.handleItemClick}
        onKeyDown={this.keyDownHandler}
      >
        <div class="container">
+          {this.complete && (
+            <span aria-live="polite" class="visually-hidden">
+              {"Completed step"}


This should reference the messages now right?

driskull · 2023-09-18T19:57:07Z

packages/calcite-components/src/components/stepper/stepper.tsx

-          this.setStepperItemNumberingSystem();
-        }}
-      />
+      <Host aria-label={"Progress steps"} role="region">


This should reference the messages now right?

anveshmekala · 2023-09-18T20:08:00Z

Nope, the strings wont reference the messages because the translations bundles aren't available yet. Once the translations are back , we can reference the strings from messages. The reason for dependency on translated strings is related to testing util. Translation part will be addressed in #7759.

geospatialem

The current and completed step sounds great in both NVDA and JAWS announcing if the step is current (not on selection which is out of scope for AT support) and when the step is complete. 👍🏻

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.9.0</summary> ## [1.9.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.8.0...@esri/calcite-components@1.9.0) (2023-10-03) ### Features * **action-group:** Add css custom properties to define gap and padding when layout is "grid" ([#7763](#7763)) ([b9bd0de](b9bd0de)) * **action-menu:** Add appearance property to configure trigger appearance ([#7867](#7867)) ([36ceaf1](36ceaf1)) * **alert:** Make component responsive ([#7755](#7755)) ([66222b5](66222b5)) * **block, input-time-picker, notice:** Adds `open`, `close`, `beforeOpen`, and `beforeClose` events for consistent event handling ([#7494](#7494)) ([04ce758](04ce758)) * **checkbox:** Add WCAG AA recommended minimum 24px square hotspot optimized for touch users ([#7773](#7773)) ([f13e2c4](f13e2c4)) * **flow, flow-item:** Allow calciteFlowItemBack event to be cancelled ([#7855](#7855)) ([b74b4df](b74b4df)) * **input-date-picker, input-time-picker:** Add status property ([#7915](#7915)) ([4d53346](4d53346)) * **input-time-zone:** Add max-items support ([#7705](#7705)) ([c698c27](c698c27)) * **input-time-zone:** Add time zone offset and name mode ([#7913](#7913)) ([80bd6ae](80bd6ae)) * **list:** Add newIndex and oldIndex event details to calciteListOrderChange event ([#7874](#7874)) ([0d5cc20](0d5cc20)) * **pagination:** Enable responsive layout ([#7722](#7722)) ([933a910](933a910)) * **panel, flow-item:** Add support for collapsing content ([#7857](#7857)) ([855754d](855754d)) ### Bug Fixes * **action-bar:** Improve overflowing horizontal actions. ([#7877](#7877)) ([52f2d2a](52f2d2a)) * **action-bar:** Overflow actions when overflowActionsDisabled is set to false ([#7873](#7873)) ([3dcceb0](3dcceb0)) * **action-menu:** Update active selection to not use the action's active property ([#7911](#7911)) ([50f85f1](50f85f1)) * **alert:** Regression fix to restore `calciteAlertBeforeOpen` and `calciteAlertOpen` event emitting ([#7767](#7767)) ([6bbae35](6bbae35)) * **button:** Provides context for AT users when used as reference element for collapsible content ([#7658](#7658)) ([50cb3a6](50cb3a6)) * **combobox:** Clears input value on blur ([#7721](#7721)) ([e04cc4e](e04cc4e)) * **combobox:** Fix filtering to avoid showing unrelated items ([#7704](#7704)) ([b6d32f3](b6d32f3)) * **dropdown-group:** Set selectionMode on slotted dropdown-item children ([#7897](#7897)) ([aa0731a](aa0731a)) * **dropdown:** Support dispatching enter key event on dropdown trigger ([#7752](#7752)) ([ba92463](ba92463)) * **select:** Allow setting an option value to an empty string ([#7769](#7769)) ([adca6ec](adca6ec)) * **stepper:** Improves AT Users experience with screen readers ([#7691](#7691)) ([071dec7](071dec7)) * **tab-nav:** Update indicator position when tab icon changes ([#7768](#7768)) ([cb877b3](cb877b3)) * **table:** Fix selection display in RTL ([#7907](#7907)) ([b4c8508](b4c8508)) * **tree:** Avoid modifying selected items for "none" selection-mode ([#7904](#7904)) ([0bd4a12](0bd4a12)) * **tree:** Fix tree keyboard selection issue ([#7908](#7908)) ([53d6c12](53d6c12)) * **tree:** Update tree selection per design spec ([#7852](#7852)) ([06b3594](06b3594)) </details> <details><summary>@esri/calcite-components-react: 1.9.0</summary> ## [1.9.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.8.0...@esri/calcite-components-react@1.9.0) (2023-10-03) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^1.9.0-next.18 to ^1.9.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

fix(stepper): improves AT Users experience with screen readers

12fd938

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Sep 6, 2023

github-actions bot assigned anveshmekala Sep 6, 2023

remove space

7595f3d

add aria-live attr

637948e

geospatialem self-requested a review September 8, 2023 16:21

geospatialem reviewed Sep 8, 2023

View reviewed changes

anveshmekala added 5 commits September 8, 2023 11:47

remove aria-current

8a0eb3a

add support for builtin translation

3c6d63c

Merge branch 'main' into anveshmekala/5602-fix-stepper-a11y

29052a8

refactor

bff99b5

add tests

a06c086

anveshmekala requested a review from geospatialem September 8, 2023 20:49

anveshmekala marked this pull request as ready for review September 8, 2023 20:49

anveshmekala requested review from benelan, jcfranco, driskull and a team as code owners September 8, 2023 20:49

anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 8, 2023

driskull requested changes Sep 8, 2023

View reviewed changes

feedback changes

540c7e5

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 8, 2023

anveshmekala requested a review from driskull September 8, 2023 23:38

add back t9ncomponent

57ca2d3

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 15, 2023

anveshmekala added 2 commits September 15, 2023 12:17

Merge branch 'main' into anveshmekala/5602-fix-stepper-a11y

3fdecba

Merge branch 'main' into anveshmekala/5602-fix-stepper-a11y

2f83ef3

remove builtin translation

b9c9dc4

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 18, 2023

driskull approved these changes Sep 18, 2023

View reviewed changes

geospatialem reviewed Sep 19, 2023

View reviewed changes

anveshmekala merged commit 071dec7 into main Sep 19, 2023
16 checks passed

anveshmekala deleted the anveshmekala/5602-fix-stepper-a11y branch September 19, 2023 16:47

github-actions bot added this to the 2023 September Priorities - Main release milestone Sep 19, 2023

calcite-admin mentioned this pull request Sep 19, 2023

chore: release main #7718

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(stepper): improves AT Users experience with screen readers #7691

fix(stepper): improves AT Users experience with screen readers #7691

anveshmekala commented Sep 6, 2023 •

edited

anveshmekala commented Sep 7, 2023 •

edited

geospatialem left a comment

driskull left a comment

driskull Sep 8, 2023

anveshmekala Sep 8, 2023

anveshmekala Sep 18, 2023

driskull Sep 18, 2023

driskull Sep 8, 2023

driskull Sep 18, 2023

driskull left a comment

driskull Sep 18, 2023

driskull Sep 18, 2023

anveshmekala commented Sep 18, 2023 •

edited

geospatialem left a comment

fix(stepper): improves AT Users experience with screen readers #7691

fix(stepper): improves AT Users experience with screen readers #7691

Conversation

anveshmekala commented Sep 6, 2023 • edited

Summary

anveshmekala commented Sep 7, 2023 • edited

geospatialem left a comment

Choose a reason for hiding this comment

driskull left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

driskull left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anveshmekala commented Sep 18, 2023 • edited

geospatialem left a comment

Choose a reason for hiding this comment

anveshmekala commented Sep 6, 2023 •

edited

anveshmekala commented Sep 7, 2023 •

edited

anveshmekala commented Sep 18, 2023 •

edited