feat(text-area): provide additional context for AT users when character limit exceeds #7412

anveshmekala · 2023-08-01T16:46:19Z

Related Issue: #6630

Summary

This PR will provide additional context for Assistive Technology users when character limit exceeds. After this change, AT users will receive error message as soon as the character limit is exceeded.

…er limit exceeds

geospatialem

This will be a fantastic addition, nice work, @anveshmekala! 🙌🏻

Overall testing shows great support for JAWS in Chrome and Firefox and NVDA in Chrome.

There was some unexpected behavior with NVDA and Firefox, but with the effort working in Chrome. It does appear adding an aria-describedby to the textarea mitigates the issue and doesn't affect the fix to the other working combinations (JAWS and NVDA).

Some screenshots of NVDA during review:

NVDA and FF:
NVDA and Chrome:

Proposed fix:

Add aria-describedby to the textarea referencing the unique id of the span
Add a unique id to the span

After the fix in NVDA and FF:

geospatialem · 2023-08-01T20:12:59Z

packages/calcite-components/src/components/text-area/text-area.tsx

@@ -260,12 +260,12 @@ export class TextArea
    return (
      <Host>
        <textarea
-          aria-invalid={toAriaBoolean(this.value?.length > this.maxLength)}
+          aria-invalid={toAriaBoolean(this.isCharacterLimitExceeded())}


To mitigate with NVDA and FF, add in an aria-describedby to provide additional context.

geospatialem · 2023-08-01T20:13:33Z

packages/calcite-components/src/components/text-area/text-area.tsx

@@ -410,7 +415,7 @@ export class TextArea
      this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();
      return (
        <span class={CSS.characterLimit}>
-          <span class={{ [CSS.characterOverLimit]: this.value?.length > this.maxLength }}>
+          <span class={{ [CSS.characterOverLimit]: this.isCharacterLimitExceeded() }}>


To support context with NVDA and FF, add a unique id, which can be referenced in the aria-describedby in the textarea, similar to combobox-item, where a guid is created.

jcfranco

Aside from a11y tweaks, code changes LGTM!

jcfranco · 2023-08-01T21:33:58Z

packages/calcite-components/src/components/text-area/text-area.tsx

          aria-label={getLabelText(this)}
          autofocus={this.autofocus}
          class={{
            [CSS.readOnly]: this.readOnly,
-            [CSS.textAreaInvalid]: this.value?.length > this.maxLength,
+            [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),


Nitpick: this is called a few times during rendering, so maybe this could be a state prop computed when value or maxLength changes.

jcfranco · 2023-08-01T21:36:02Z

packages/calcite-components/src/components/text-area/text-area.tsx

@@ -514,4 +502,29 @@ export class TextArea
      footerWidth,
    };
  }
+
+  private replacePlaceHoldersInMessages(): string {


Nitpick: was the move of this function intentional?

yup, this is intentional to move all the private method to the end.

geospatialem

Thanks for putting in these changes so quickly! ✨ 🚀 ✨

…er limit exceeds (#7412) **Related Issue:** #6630 ## Summary This PR will provide additional context for Assistive Technology users when character limit exceeds. After this change, AT users will receive error message as soon as the character limit is exceeded.

* origin/main: (40 commits) fix(combobox): add space after grouped items (#7302) fix(tooltip): emits `close` and `beforeClose` events when container is set to `display:none` (#7258) chore: release next feat(block): improve block's content layout to allow scrolling (#7367) test(input, input-number): await on missed `page.waitForChanges` calls (#7429) chore: release next fix(color-picker): draw slider thumbs within bounds (#7398) chore: release next fix(slider): prevent excessive tick rendering (#7421) fix(tooltip): avoid extra before open/close event emitting (#7422) chore(storybook): hide warning and show TestOnly stories in local builds (#7424) chore: release next fix(panel): Remove double border styling when content isn't provided (#7368) feat(list): Add support for dragging items. (#7109) chore: release next fix(scrim): update loader scale on resize of component. (#7419) feat(text-area): provide additional context for AT users when character limit exceeds (#7412) chore: release next fix(chip): disconnect mutation observer when component is disconnected from the DOM (#7418) fix(switch): Fix for focus outline style in certain cases (#7414) ...

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.5.0</summary> ## [1.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-03) ### Features * **action-group:** Adds overlayPositioning property. ([#7366](#7366)) ([ca9f35a](ca9f35a)) * Allow sharing focus trap stacks via configuration global ([#7334](#7334)) ([934a19f](934a19f)) * Automatically import and define Calcite Components when importing their React wrapper ([#7185](#7185)) ([bf0ff67](bf0ff67)) * **block, block-section:** Add setFocus method ([#7208](#7208)) ([35d4bbb](35d4bbb)) * **block:** Improve block's content layout to allow scrolling ([#7367](#7367)) ([ecbf17b](ecbf17b)) * **color-picker:** Replaces thumb focus outline to rounded ([#7378](#7378)) ([d803980](d803980)) * **filter:** Add filter method ([#7127](#7127)) ([5a4283f](5a4283f)) * **flow:** Adds setFocus method ([#7252](#7252)) ([2472c58](2472c58)) * Improve focus behavior in components ([#7277](#7277)) ([ad9fbca](ad9fbca)) * **input-time-zone:** Add input-time-zone component ([#6947](#6947)) ([87bd496](87bd496)) * **list:** Add slots for filter actions ([#7183](#7183)) ([da07ab1](da07ab1)) * **list:** Add support for dragging items. ([#7109](#7109)) ([7324f70](7324f70)) * **menu-item:** Update spacing and icon layout ([#7381](#7381)) ([5659671](5659671)) * **navigation-logo:** Increase font-size of heading with no description ([#7081](#7081)) ([355e101](355e101)) * **switch:** Updates focus outline to be rounded ([#7390](#7390)) ([2616b82](2616b82)) * **text-area:** Provide additional context for AT users when character limit exceeds ([#7299](#7299)) ([c5678eb](c5678eb)) * **text-area:** Provide additional context for AT users when character limit exceeds ([#7412](#7412)) ([c1af3c7](c1af3c7)) ### Bug Fixes * **accordion, accordion-item:** `icon-position`, `icon-type`, `selection-mode` and `scale` can now be set as props or attributes ([#7191](#7191)) ([2b09aba](2b09aba)) * **action-bar:** No longer delegates focus when clicked on non-focusable region ([#7310](#7310)) ([1a9c15c](1a9c15c)) * **action:** Correctly focus the button after rendering updates. ([#7255](#7255)) ([40fe2ce](40fe2ce)) * **block:** Loader now appears for all loading cases ([#7303](#7303)) ([5af3600](5af3600)) * **block:** Removes extra loading indicator ([#7239](#7239)) ([a334a75](a334a75)) * **card:** Ensure teardown logic is called when disconnected ([#7289](#7289)) ([d07e322](d07e322)) * **chip:** Disconnect mutation observer when component is disconnected from the DOM ([#7418](#7418)) ([412e5fb](412e5fb)) * **color-picker:** Draw slider thumbs within bounds ([#7398](#7398)) ([2f37854](2f37854)) * **color-picker:** Fix opacity slider keyboard nudging ([#7400](#7400)) ([2b4f7c3](2b4f7c3)) * **color-picker:** Maintains correct numbering system when entering invalid RGB value ([#7327](#7327)) ([8d2a3a5](8d2a3a5)) * **combobox:** Add space after grouped items ([#7302](#7302)) ([b1580c7](b1580c7)) * **dropdown-item:** Provides accessible label when href is not parsed ([#7316](#7316)) ([966b83d](966b83d)) * **flow:** Call setFocus() on back button click ([#7285](#7285)) ([9102aa4](9102aa4)) * **input-date-picker:** Provides placeholder text context for AT users ([#7320](#7320)) ([31e0ba2](31e0ba2)) * **input-date-picker:** Reset active date picker date after closing ([#7219](#7219)) ([91b2a1b](91b2a1b)) * **input, input-number:** No longer removes trailing decimal separator ([#7159](#7159)) ([01535cf](01535cf)) * **link:** Adds outline-offset to avoid overlapping with text. ([#7342](#7342)) ([c30db4e](c30db4e)) * **list:** Changing filterText property will now update filtered items ([#7133](#7133)) ([a9c0bce](a9c0bce)) * **list:** Fix keyboard navigation after a listItem's disabled or closed property changes ([#7275](#7275)) ([91d28eb](91d28eb)) * **list:** Fix keyboard navigation when filterEnabled is true ([#7385](#7385)) ([41a2e42](41a2e42)) * **menu-item:** Prevent duplicate border in nested vertical menu-items ([#7387](#7387)) ([186a738](186a738)) * **panel:** Remove double border styling when content isn't provided ([#7368](#7368)) ([91a0610](91a0610)) * Remove style modifying all host components with hidden attribute ([#7346](#7346)) ([3103e2f](3103e2f)) * **scrim:** Update loader scale on resize of component. ([#7419](#7419)) ([24e7f70](24e7f70)) * **slider:** Prevent excessive tick rendering ([#7421](#7421)) ([c799409](c799409)) * **switch:** Fix for focus outline style in certain cases ([#7414](#7414)) ([217324f](217324f)) * **tab-title:** Add full focus outline to closable tab button in high contrast mode ([#7272](#7272)) ([d812d17](d812d17)) * **tooltip:** Avoid extra before open/close event emitting ([#7422](#7422)) ([dbb6818](dbb6818)) * **tooltip:** Deprecate the label property due to the description coming from the component's content ([#7247](#7247)) ([7934d75](7934d75)) * **tooltip:** Emits `close` and `beforeClose` events when container is set to `display:none` ([#7258](#7258)) ([60a4683](60a4683)) * **tooltip:** Ensure --calcite-app-z-index-tooltip is applied ([#7345](#7345)) ([a9a7072](a9a7072)) </details> <details><summary>@esri/calcite-components-react: 1.5.0</summary> ## [1.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-03) ### Features * Automatically import and define Calcite Components when importing their React wrapper ([#7185](#7185)) ([bf0ff67](bf0ff67)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^1.5.0-next.38 to ^1.5.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>

feat(text-area): provide additional context for AT users when charact…

4b3f34d

…er limit exceeds

github-actions bot assigned anveshmekala Aug 1, 2023

github-actions bot added the enhancement Issues tied to a new feature or request. label Aug 1, 2023

geospatialem self-requested a review August 1, 2023 19:49

anveshmekala marked this pull request as ready for review August 1, 2023 19:53

anveshmekala requested a review from a team as a code owner August 1, 2023 19:53

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

geospatialem requested changes Aug 1, 2023

View reviewed changes

add aria-describedby

bc4da1a

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 Aug 1, 2023

jcfranco approved these changes Aug 1, 2023

View reviewed changes

geospatialem approved these changes Aug 1, 2023

View reviewed changes

anveshmekala merged commit c1af3c7 into main Aug 2, 2023

anveshmekala deleted the anveshmekala/6630-text-area-provide-a11y-context branch August 2, 2023 15:20

github-actions bot added this to the 2023 July Priorities milestone Aug 2, 2023

calcite-admin mentioned this pull request Aug 2, 2023

chore: release latest #7261

Merged

geospatialem changed the title ~~feat(text-area): provide additional context for AT users when character limit exceeds~~ feat(text-area): provide additional context for AT users when character limit exceeds on form submission Aug 3, 2023

geospatialem changed the title ~~feat(text-area): provide additional context for AT users when character limit exceeds on form submission~~ feat(text-area): provide additional context for AT users when character limit exceeds Aug 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(text-area): provide additional context for AT users when character limit exceeds #7412

feat(text-area): provide additional context for AT users when character limit exceeds #7412

Uh oh!

anveshmekala commented Aug 1, 2023 •

edited

Loading

Uh oh!

geospatialem left a comment

Uh oh!

geospatialem Aug 1, 2023

Uh oh!

geospatialem Aug 1, 2023

Uh oh!

jcfranco left a comment

Uh oh!

jcfranco Aug 1, 2023

Uh oh!

jcfranco Aug 1, 2023

Uh oh!

anveshmekala Aug 1, 2023

Uh oh!

geospatialem left a comment

Uh oh!

Uh oh!

feat(text-area): provide additional context for AT users when character limit exceeds #7412

feat(text-area): provide additional context for AT users when character limit exceeds #7412

Uh oh!

Conversation

anveshmekala commented Aug 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

geospatialem left a comment

Choose a reason for hiding this comment

Uh oh!

geospatialem Aug 1, 2023

Choose a reason for hiding this comment

Uh oh!

geospatialem Aug 1, 2023

Choose a reason for hiding this comment

Uh oh!

jcfranco left a comment

Choose a reason for hiding this comment

Uh oh!

jcfranco Aug 1, 2023

Choose a reason for hiding this comment

Uh oh!

jcfranco Aug 1, 2023

Choose a reason for hiding this comment

Uh oh!

anveshmekala Aug 1, 2023

Choose a reason for hiding this comment

Uh oh!

geospatialem left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

anveshmekala commented Aug 1, 2023 •

edited

Loading