Skip to content

feat(text-area): provide additional context for AT users when character limit exceeds on form submission#7299

Merged
anveshmekala merged 5 commits intomainfrom
anveshmekala/6630-text-area-provide-additional-context-for-error-message
Jul 10, 2023
Merged

feat(text-area): provide additional context for AT users when character limit exceeds on form submission#7299
anveshmekala merged 5 commits intomainfrom
anveshmekala/6630-text-area-provide-additional-context-for-error-message

Conversation

@anveshmekala
Copy link
Copy Markdown
Contributor

@anveshmekala anveshmekala commented Jul 7, 2023 •
edited
Loading

Related Issue: #6630

Summary

This PR will provide additional context for Assistive Technology users when character limit exceeds on form submission.

After this change, an example error message looks like below:

The current character length is 14, which exceeds the maximum character length of 10.

@github-actions github-actions Bot added the enhancement Issues tied to a new feature or request. label Jul 7, 2023
@anveshmekala anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jul 10, 2023
@anveshmekala anveshmekala marked this pull request as ready for review July 10, 2023 18:34
@anveshmekala anveshmekala requested a review from a team as a code owner July 10, 2023 18:34
jcfranco
jcfranco approved these changes Jul 10, 2023
View reviewed changes
Copy link
Copy Markdown
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aside from the comment to avoid computing localized characters twice, this LGTM!

Comment thread packages/calcite-components/src/components/text-area/text-area.tsx Outdated
Comment thread packages/calcite-components/src/components/text-area/text-area.tsx Outdated
Comment thread packages/calcite-components/src/components/text-area/text-area.tsx
<span class={{ [CSS.characterOverLimit]: this.value?.length > this.maxLength }}>
{currentLength}
</span>
{"/"}
Copy link
Copy Markdown
Member

@jcfranco jcfranco Jul 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated nitpick: We don't need to interpolate the string here, so can we use / directly or do you think it'd be confusing?

Copy link
Copy Markdown
Contributor Author

@anveshmekala anveshmekala Jul 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think its better to interpolate indicating it is part of the UI.

Comment thread packages/calcite-components/src/components/text-area/text-area.tsx Outdated
@@ -403,25 +403,37 @@ export class TextArea
};

renderCharacterLimit = (): VNode => {
Copy link
Copy Markdown
Member

@jcfranco jcfranco Jul 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you return null when there's no max length and update the return type accordingly?

Copy link
Copy Markdown
Contributor Author

@anveshmekala anveshmekala Jul 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think this needs to be update across the repo. Should we open an issue for this one?

Comment thread packages/calcite-components/src/components/text-area/text-area.tsx Outdated
@anveshmekala 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 Jul 10, 2023
@anveshmekala anveshmekala merged commit c5678eb into main Jul 10, 2023
@anveshmekala anveshmekala deleted the anveshmekala/6630-text-area-provide-additional-context-for-error-message branch July 10, 2023 23:04
@github-actions github-actions Bot added this to the 2023 July Priorities milestone Jul 10, 2023
@calcite-admin calcite-admin mentioned this pull request Jul 10, 2023
Merged
benelan added a commit that referenced this pull request Jul 12, 2023
@benelan
Merge remote-tracking branch 'origin/main' into benelan/codeowners
c626540 
* origin/main:
  chore: release next
  fix(block): loader now appears for all loading cases (#7303)
  build: update browserslist db (#7301)
  build(deps): Bump eslint-plugin-jsdoc from 46.2.6 to 46.4.3 (#7306)
  build(deps): Bump @floating-ui/dom from 1.4.3 to 1.4.4 in /packages/calcite-components (#7305)
  build(deps): Bump chromatic from 6.19.5 to 6.19.9 (#7308)
  build(deps): Bump cpy-cli from 4.2.0 to 5.0.0 (#7281)
  chore: release next
  feat(text-area): provide additional context for AT users when character limit exceeds (#7299)
  build(deps): Bump stylelint from 14.16.1 to 15.10.1 (#7296)
  chore: release next
  ci: allow lint-staged to find typescript parser config file (#7297)
  fix(accordion, accordion-item): `icon-position`, `icon-type`, `selection-mode` and `scale` can now be set as props or attributes (#7191)
  test(stack): stabilize screenshot tests (#7298)
  build: make sure eslint-plugin-calcite-components is set up correctly (#7294)
  chore: add translations (#7290)
  refactor: Ensure all setFocus methods return calls to setFocus (#7287)
  chore: release next
  fix(card): ensure teardown logic is called when disconnected (#7289)
  test: stabilize tests using setFocus (#7295)
@geospatialem 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 1, 2023
benelan pushed a commit that referenced this pull request Aug 3, 2023
@calcite-admin @github-actions
chore: release latest (#7261)
45b5c01 
🤖 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/calcite-components@1.4.3...@esri/calcite-components@1.5.0)
(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/calcite-components-react@1.4.3...@esri/calcite-components-react@1.5.0)
(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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jcfranco jcfranco jcfranco approved these changes

Assignees

@anveshmekala anveshmekala

Labels

enhancement Issues tied to a new feature or request. pr ready for visual snapshots Adding this label will run visual snapshot testing.

Projects

None yet

Milestone

2023 July Priorities

Development

Successfully merging this pull request may close these issues.

2 participants

@anveshmekala @jcfranco