Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(input, combobox, input-date-picker, input-number, input-text, input-time-picker, radio-button-group, segmented-control, select, text-area): provide clear field error messaging for AT #9880

Merged

Conversation

aPreciado88
Copy link
Contributor

@aPreciado88 aPreciado88 commented Jul 29, 2024

Related Issue: #7792

Summary

Update components using validation to provide clear error messaging for AT when fields are in error state.

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jul 29, 2024
@aPreciado88 aPreciado88 added this to the 2024-07-30 - Jul Release milestone Jul 29, 2024
@aPreciado88 aPreciado88 added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jul 29, 2024
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

👍

icon,
message,
}) => (
<div class={CSS.validationContainer}>
<calcite-input-message icon={icon} scale={scale} status={status}>
{message}
<span aria-live={ariaLive ? "polite" : "off"} id={id}>
Copy link
Member

Choose a reason for hiding this comment

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

nitpick: do we need to create a span element here or could the aria-live and id be put on the calcite-input-message?

@@ -1275,7 +1279,9 @@ export class Input
</div>
{this.validationMessage && this.status === "invalid" ? (
<Validation
ariaLive
Copy link
Member

Choose a reason for hiding this comment

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

Shouldn't this be moved to Validation's rendering instead of being an optional prop?

@@ -1172,6 +1172,8 @@ export class Input
this.type === "number" ? (
<input
accept={this.accept}
aria-errormessage={IDS.validationMessage}
Copy link
Member

Choose a reason for hiding this comment

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

@geospatialem Do you know which input needs the corresponding ARIA attributes? The one users interact with is in shadow DOM and the one used for form submitting/validation is in light DOM (created by form.tsx and slotted into HiddenFormInputSlot). cc @benelan

Copy link
Member

Choose a reason for hiding this comment

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

@jcfranco Unfortunately can't confirm with my local environment at this time, but testing via the Chromatic build is performing as-expected providing context to the message. In the past have we tried to stick to the light DOM?

@jcfranco
Copy link
Member

Worth noting that we'll also need to provide the same update for all form components as they all use Validation.

…ciado88/7792-provide-clear-indication-of-fields-in-error
…error' of github.com:Esri/calcite-design-system into aPreciado88/7792-provide-clear-indication-of-fields-in-error
@aPreciado88 aPreciado88 marked this pull request as draft July 31, 2024 17:35
@aPreciado88 aPreciado88 marked this pull request as ready for review August 5, 2024 20:57
@aPreciado88 aPreciado88 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 5, 2024
@aPreciado88
Copy link
Contributor Author

@jcfranco I updated the PR with the requested changes.

Copy link
Member

@geospatialem geospatialem left a comment

Choose a reason for hiding this comment

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

This is working great with the Chromatic build in this test. 💪🏻 Defer on final code changes to Franco, otherwise LGTM!

Copy link
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.

This is great, @aPreciado88! 🚀

Before merging, can you revisit the PR title to either:

  • list all updated components under the scope (e.g., fix(combobox, input, ...): provide clear ...) or
  • drop the scope and make sure the conventional commit's description mentions all form components being updated (e.g., fix: update form components to provide clear ...)

?

The PR description can be simplified too with either option.

@@ -689,6 +693,7 @@ export class InputDatePicker
{this.validationMessage && this.status === "invalid" ? (
<Validation
icon={this.validationIcon}
id={IDS.validationMessage}
Copy link
Member

Choose a reason for hiding this comment

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

Since IDs are scoped within their respective shadow DOM, one option worth exploring (separately) to simplify this pattern would be:

  1. define a common validation message ID (exported from Validation.tsx)
  2. always assign the common ID Validation's input-message and optionally drop id from ValidationProps (could keep as optional to allow overrides if truly needed)
  3. use the common ID in all aria-errormessage props

Copy link
Member

Choose a reason for hiding this comment

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

@benelan Do you think we should add coverage for this in formAssociated? We could possibly assert on the validation ID being associated with aria-errormessage internally.

If so, we can tackle this separately.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@jcfranco I created this follow up issue to work on simplifying the validation message IDs.

@aPreciado88 aPreciado88 changed the title fix(input): provide clear field error messaging for AT fix(input, combobox, input-date-picker, input-number, input-text, input-time-picker, radio-button-group, segmented-control, select, text-area): provide clear field error messaging for AT Aug 15, 2024
@aPreciado88
Copy link
Contributor Author

@jcfranco I updated the title and description. Should I create follow up issues for the ID simplification and test coverage?

@aPreciado88 aPreciado88 added skip visual snapshots Pull requests that do not need visual regression testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 15, 2024
@aPreciado88 aPreciado88 merged commit 46ad7d2 into dev Aug 15, 2024
20 checks passed
@aPreciado88 aPreciado88 deleted the aPreciado88/7792-provide-clear-indication-of-fields-in-error branch August 15, 2024 17:04
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

@aPreciado88 can you open a new PR to fix these changes?

aria-expanded={toAriaBoolean(open)}
aria-haspopup="listbox"
aria-invalid={this.status === "invalid"}
Copy link
Member

Choose a reason for hiding this comment

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

Late to the party but I think this should use the toAriaBoolean function to convert this to a string of "false" or "true".

Copy link
Member

Choose a reason for hiding this comment

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

Excellent catch! Can you create an issue for me to set up an ESLint rule for this?

Copy link
Member

Choose a reason for hiding this comment

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

Never mind, we already have one. I'll bring it up during our next triage session.

aria-expanded={toAriaBoolean(this.open)}
aria-haspopup="dialog"
aria-invalid={this.status === "invalid"}
Copy link
Member

Choose a reason for hiding this comment

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

same here

aria-expanded={toAriaBoolean(this.open)}
aria-haspopup="dialog"
aria-invalid={this.status === "invalid"}
Copy link
Member

Choose a reason for hiding this comment

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

same here

@@ -1081,6 +1081,8 @@ export class InputNumber

const childEl = (
<input
aria-errormessage={IDS.validationMessage}
aria-invalid={this.status === "invalid"}
Copy link
Member

Choose a reason for hiding this comment

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

same here

@@ -663,6 +663,8 @@ export class InputText

const childEl = (
<input
aria-errormessage={IDS.validationMessage}
aria-invalid={this.status === "invalid"}
Copy link
Member

Choose a reason for hiding this comment

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

same here

@@ -1203,6 +1205,8 @@ export class Input
? [
<this.childElType
accept={this.accept}
aria-errormessage={IDS.validationMessage}
aria-invalid={this.status === "invalid"}
Copy link
Member

Choose a reason for hiding this comment

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

same here

<div class={CSS.itemWrapper}>
<div
aria-errormessage={IDS.validationMessage}
aria-invalid={this.status === "invalid"}
Copy link
Member

Choose a reason for hiding this comment

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

same here

<div class={CSS.itemWrapper}>
<div
aria-errormessage={IDS.validationMessage}
aria-invalid={this.status === "invalid"}
Copy link
Member

Choose a reason for hiding this comment

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

same here

@@ -421,6 +421,8 @@ export class Select
<InteractiveContainer disabled={disabled}>
<div class={CSS.wrapper}>
<select
aria-errormessage={IDS.validationMessage}
aria-invalid={this.status === "invalid"}
Copy link
Member

Choose a reason for hiding this comment

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

same here

@@ -310,7 +310,10 @@ export class TextArea
<InteractiveContainer disabled={this.disabled}>
<textarea
aria-describedby={this.guid}
aria-invalid={toAriaBoolean(this.isCharacterLimitExceeded())}
aria-errormessage={IDS.validationMessage}
aria-invalid={
Copy link
Member

Choose a reason for hiding this comment

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

same here. this one needs to be refactored to move into the toAriaBoolean.

@benelan benelan mentioned this pull request Aug 28, 2024
benelan added a commit that referenced this pull request Aug 28, 2024
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-ui-icons: 3.31.0</summary>

##
[3.31.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.30.0...@esri/calcite-ui-icons@3.31.0)
(2024-08-28)


### Features

* Add close-caption, transcript, flag, and flag-slash
([#10039](#10039))
([85c7d69](85c7d69))
* Add layer-connection
([#10067](#10067))
([46dd2ee](46dd2ee))


### Bug Fixes

* Update close-caption, and transcript
([#10077](#10077))
([2e86904](2e86904))
</details>

<details><summary>@esri/calcite-components: 2.12.0</summary>

##
[2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.1...@esri/calcite-components@2.12.0)
(2024-08-28)


### Features

* **accordion, accordion-item:** Add component tokens
([#9861](#9861))
([48f7f08](48f7f08))
* **action, action-bar, action-group, action-menu, action-pad:** Add
component tokens
([#10058](#10058))
([de96c24](de96c24))
* **alert:** Add 'queue' property to prioritize the ordering of alerts
when opened
([#10029](#10029))
([3aa47a4](3aa47a4))
* **combobox-item:** Add `heading` property (deprecates `textLabel`) and
add `label` property
([#9987](#9987))
([90920a0](90920a0))
* **dialog:** Add CSS variables to offset the position
([#9904](#9904))
([660f0c5](660f0c5))
* **dialog:** Add escapeDisabled property
([#10081](#10081))
([1ca8fba](1ca8fba))
* **dialog:** Add outsideCloseDisabled property
([#9978](#9978))
([f1d89b9](f1d89b9))
* **dialog:** Add resizable and dragEnabled properties
([#9804](#9804))
([e3e499e](e3e499e))
* **icon:** Add component tokens
([#10062](#10062))
([34d5689](34d5689))
* **input-time-zone:** Display selected time zone country in region mode
selection
([#9988](#9988))
([1575729](1575729))
* **loader:** Add `determinate-value` type
([#9957](#9957))
([7f21726](7f21726))
* **panel:** Add '--calcite-panel-content-space' style
([#10117](#10117))
([0e3ebcb](0e3ebcb))
* **table:** Update multiple selection iconography
([#10125](#10125))
([f2b2016](f2b2016))
* **tooltip:** Allow focusing and clicking on interactive elements
within a tooltip
([#9914](#9914))
([a3c144c](a3c144c))


### Bug Fixes

* **accordion-item:** Align focus styles across browsers
([#9944](#9944))
([2e29b42](2e29b42))
* **alert:** Properly form a queue of alerts
([#10032](#10032))
([b24d6ac](b24d6ac))
* **color-picker:** Prevent text selection when using color
sliders/field
([#10043](#10043))
([ab33e4d](ab33e4d))
* **combobox, input-date-picker, input-number, input-text,
input-time-picker, input, radio-button-group, segmented-control, select,
text-area:** Use toAriaBoolean in aria-invalid attribute to provide
valid AT error messaging
([#10079](#10079))
([78bc096](78bc096))
* **combobox:** Update placeholder-icon color
([#9956](#9956))
([d916ca4](d916ca4))
* **dialog, flow-item:** Slotted closable panels should not close the
component
([#10130](#10130))
([ce2513d](ce2513d))
* **dialog:** Allow shell to be slotted inside
([#10118](#10118))
([ea3a6de](ea3a6de))
* **dialog:** Fix escapeDisabled when the escape key is pressed on the
panel
([#10097](#10097))
([9a5f1f1](9a5f1f1))
* Ensure `beforeOpen`/`open` and `beforeClose`/`close` events emit
properly
([#9958](#9958))
([7e2764f](7e2764f))
* **filter:** Fix setFocus method
([#10149](#10149))
([f4a959a](f4a959a))
* **input-date-picker:** Fix selection for the "bs" and "it-CH" locales
([#9976](#9976))
([368d9e2](368d9e2))
* **input-date-picker:** Prevent console error when using a lang
([#10162](#10162))
([e7bf604](e7bf604))
* **input-time-zone:** Translate region names
([#9940](#9940))
([f975adb](f975adb))
* **input, combobox, input-date-picker, input-number, input-text,
input-time-picker, radio-button-group, segmented-control, select,
text-area:** Provide clear field error messaging for AT
([#9880](#9880))
([46ad7d2](46ad7d2))
* **input, input-number, input-text:** No longer set focus when a
validation message is clicked
([#10008](#10008))
([529bb5a](529bb5a))
* **label:** Prevent focusing and toggling elements slotted within a
label when a text selection occurs
([#9990](#9990))
([49d6ae1](49d6ae1))
* **list-item:** Prevent scrolling when item is focused.
([#9948](#9948))
([eab1e06](eab1e06))
* **panel:** Define heading and description line height
([#10085](#10085))
([5478eb9](5478eb9))
* **slider:** Prevent text selection when using the slider
([#10073](#10073))
([04bf325](04bf325))
* **slider:** Resolve step & snap floating point precision
([#10148](#10148))
([613bc47](613bc47))
* **stepper-item:** Update component to take full width when parent's
layout is "vertical"
([#10009](#10009))
([03a5a30](03a5a30))
* **tree,tree-item:** Replace checkbox with div and a11y attributes
([#9849](#9849))
([b1ac951](b1ac951))


### Performance Improvements

* **input-time-zone:** Improve memory footprint by leveraging browser
cache and releasing utils after their use
([#9945](#9945))
([a3d2141](a3d2141))


### Reverts

* "build(deps): remove unused cheerio package
([#10049](#10049))"
([#10057](#10057))
([d271ab1](d271ab1))
* Add stories
([#10131](#10131))
([e3a6590](e3a6590))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-ui-icons bumped from 3.31.0-next.4 to 3.31.0
</details>

<details><summary>@esri/calcite-components-angular: 2.12.0</summary>

##
[2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.1...@esri/calcite-components-angular@2.12.0)
(2024-08-28)


### Miscellaneous Chores

* **@esri/calcite-components-angular:** Synchronize components versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0
</details>

<details><summary>@esri/calcite-components-react: 2.12.0</summary>

##
[2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.1...@esri/calcite-components-react@2.12.0)
(2024-08-28)


### Miscellaneous Chores

* **@esri/calcite-components-react:** Synchronize components versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.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>
benelan added a commit that referenced this pull request Aug 28, 2024
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-ui-icons: 3.31.0</summary>

##
[3.31.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.30.0...@esri/calcite-ui-icons@3.31.0)
(2024-08-28)


### Features

* Add close-caption, transcript, flag, and flag-slash
([#10039](#10039))
([85c7d69](85c7d69))
* Add layer-connection
([#10067](#10067))
([46dd2ee](46dd2ee))


### Bug Fixes

* Update close-caption, and transcript
([#10077](#10077))
([2e86904](2e86904))
</details>

<details><summary>@esri/calcite-components: 2.12.0</summary>

##
[2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.1...@esri/calcite-components@2.12.0)
(2024-08-28)


### Features

* **accordion, accordion-item:** Add component tokens
([#9861](#9861))
([48f7f08](48f7f08))
* **action, action-bar, action-group, action-menu, action-pad:** Add
component tokens
([#10058](#10058))
([de96c24](de96c24))
* **alert:** Add 'queue' property to prioritize the ordering of alerts
when opened
([#10029](#10029))
([3aa47a4](3aa47a4))
* **combobox-item:** Add `heading` property (deprecates `textLabel`) and
add `label` property
([#9987](#9987))
([90920a0](90920a0))
* **dialog:** Add CSS variables to offset the position
([#9904](#9904))
([660f0c5](660f0c5))
* **dialog:** Add escapeDisabled property
([#10081](#10081))
([1ca8fba](1ca8fba))
* **dialog:** Add outsideCloseDisabled property
([#9978](#9978))
([f1d89b9](f1d89b9))
* **dialog:** Add resizable and dragEnabled properties
([#9804](#9804))
([e3e499e](e3e499e))
* **icon:** Add component tokens
([#10062](#10062))
([34d5689](34d5689))
* **input-time-zone:** Display selected time zone country in region mode
selection
([#9988](#9988))
([1575729](1575729))
* **loader:** Add `determinate-value` type
([#9957](#9957))
([7f21726](7f21726))
* **panel:** Add '--calcite-panel-content-space' style
([#10117](#10117))
([0e3ebcb](0e3ebcb))
* **table:** Update multiple selection iconography
([#10125](#10125))
([f2b2016](f2b2016))
* **tooltip:** Allow focusing and clicking on interactive elements
within a tooltip
([#9914](#9914))
([a3c144c](a3c144c))


### Bug Fixes

* **accordion-item:** Align focus styles across browsers
([#9944](#9944))
([2e29b42](2e29b42))
* **alert:** Properly form a queue of alerts
([#10032](#10032))
([b24d6ac](b24d6ac))
* **color-picker:** Prevent text selection when using color
sliders/field
([#10043](#10043))
([ab33e4d](ab33e4d))
* **combobox, input-date-picker, input-number, input-text,
input-time-picker, input, radio-button-group, segmented-control, select,
text-area:** Use toAriaBoolean in aria-invalid attribute to provide
valid AT error messaging
([#10079](#10079))
([78bc096](78bc096))
* **combobox:** Update placeholder-icon color
([#9956](#9956))
([d916ca4](d916ca4))
* **dialog, flow-item:** Slotted closable panels should not close the
component
([#10130](#10130))
([ce2513d](ce2513d))
* **dialog:** Allow shell to be slotted inside
([#10118](#10118))
([ea3a6de](ea3a6de))
* **dialog:** Fix escapeDisabled when the escape key is pressed on the
panel
([#10097](#10097))
([9a5f1f1](9a5f1f1))
* Ensure `beforeOpen`/`open` and `beforeClose`/`close` events emit
properly
([#9958](#9958))
([7e2764f](7e2764f))
* **filter:** Fix setFocus method
([#10149](#10149))
([f4a959a](f4a959a))
* **input-date-picker:** Fix selection for the "bs" and "it-CH" locales
([#9976](#9976))
([368d9e2](368d9e2))
* **input-date-picker:** Prevent console error when using a lang
([#10162](#10162))
([e7bf604](e7bf604))
* **input-time-zone:** Translate region names
([#9940](#9940))
([f975adb](f975adb))
* **input, combobox, input-date-picker, input-number, input-text,
input-time-picker, radio-button-group, segmented-control, select,
text-area:** Provide clear field error messaging for AT
([#9880](#9880))
([46ad7d2](46ad7d2))
* **input, input-number, input-text:** No longer set focus when a
validation message is clicked
([#10008](#10008))
([529bb5a](529bb5a))
* **label:** Prevent focusing and toggling elements slotted within a
label when a text selection occurs
([#9990](#9990))
([49d6ae1](49d6ae1))
* **list-item:** Prevent scrolling when item is focused.
([#9948](#9948))
([eab1e06](eab1e06))
* **panel:** Define heading and description line height
([#10085](#10085))
([5478eb9](5478eb9))
* **slider:** Prevent text selection when using the slider
([#10073](#10073))
([04bf325](04bf325))
* **slider:** Resolve step & snap floating point precision
([#10148](#10148))
([613bc47](613bc47))
* **stepper-item:** Update component to take full width when parent's
layout is "vertical"
([#10009](#10009))
([03a5a30](03a5a30))
* **tree,tree-item:** Replace checkbox with div and a11y attributes
([#9849](#9849))
([b1ac951](b1ac951))


### Performance Improvements

* **input-time-zone:** Improve memory footprint by leveraging browser
cache and releasing utils after their use
([#9945](#9945))
([a3d2141](a3d2141))


### Reverts

* "build(deps): remove unused cheerio package
([#10049](#10049))"
([#10057](#10057))
([d271ab1](d271ab1))
* Add stories
([#10131](#10131))
([e3a6590](e3a6590))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-ui-icons bumped from 3.31.0-next.4 to 3.31.0
</details>

<details><summary>@esri/calcite-components-angular: 2.12.0</summary>

##
[2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.1...@esri/calcite-components-angular@2.12.0)
(2024-08-28)


### Miscellaneous Chores

* **@esri/calcite-components-angular:** Synchronize components versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0
</details>

<details><summary>@esri/calcite-components-react: 2.12.0</summary>

##
[2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.1...@esri/calcite-components-react@2.12.0)
(2024-08-28)


### Miscellaneous Chores

* **@esri/calcite-components-react:** Synchronize components versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.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>
benelan added a commit that referenced this pull request Aug 28, 2024
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-ui-icons: 3.31.0</summary>

##
[3.31.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.30.0...@esri/calcite-ui-icons@3.31.0)
(2024-08-28)


### Features

* Add close-caption, transcript, flag, and flag-slash
([#10039](#10039))
([85c7d69](85c7d69))
* Add layer-connection
([#10067](#10067))
([46dd2ee](46dd2ee))


### Bug Fixes

* Update close-caption, and transcript
([#10077](#10077))
([2e86904](2e86904))
</details>

<details><summary>@esri/calcite-components: 2.12.0</summary>

##
[2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.1...@esri/calcite-components@2.12.0)
(2024-08-28)


### Features

* **accordion, accordion-item:** Add component tokens
([#9861](#9861))
([48f7f08](48f7f08))
* **action, action-bar, action-group, action-menu, action-pad:** Add
component tokens
([#10058](#10058))
([de96c24](de96c24))
* **alert:** Add 'queue' property to prioritize the ordering of alerts
when opened
([#10029](#10029))
([3aa47a4](3aa47a4))
* **combobox-item:** Add `heading` property (deprecates `textLabel`) and
add `label` property
([#9987](#9987))
([90920a0](90920a0))
* **dialog:** Add CSS variables to offset the position
([#9904](#9904))
([660f0c5](660f0c5))
* **dialog:** Add escapeDisabled property
([#10081](#10081))
([1ca8fba](1ca8fba))
* **dialog:** Add outsideCloseDisabled property
([#9978](#9978))
([f1d89b9](f1d89b9))
* **dialog:** Add resizable and dragEnabled properties
([#9804](#9804))
([e3e499e](e3e499e))
* **icon:** Add component tokens
([#10062](#10062))
([34d5689](34d5689))
* **input-time-zone:** Display selected time zone country in region mode
selection
([#9988](#9988))
([1575729](1575729))
* **loader:** Add `determinate-value` type
([#9957](#9957))
([7f21726](7f21726))
* **panel:** Add '--calcite-panel-content-space' style
([#10117](#10117))
([0e3ebcb](0e3ebcb))
* **table:** Update multiple selection iconography
([#10125](#10125))
([f2b2016](f2b2016))
* **tooltip:** Allow focusing and clicking on interactive elements
within a tooltip
([#9914](#9914))
([a3c144c](a3c144c))


### Bug Fixes

* **accordion-item:** Align focus styles across browsers
([#9944](#9944))
([2e29b42](2e29b42))
* **alert:** Properly form a queue of alerts
([#10032](#10032))
([b24d6ac](b24d6ac))
* **color-picker:** Prevent text selection when using color
sliders/field
([#10043](#10043))
([ab33e4d](ab33e4d))
* **combobox, input-date-picker, input-number, input-text,
input-time-picker, input, radio-button-group, segmented-control, select,
text-area:** Use toAriaBoolean in aria-invalid attribute to provide
valid AT error messaging
([#10079](#10079))
([78bc096](78bc096))
* **combobox:** Update placeholder-icon color
([#9956](#9956))
([d916ca4](d916ca4))
* **dialog, flow-item:** Slotted closable panels should not close the
component
([#10130](#10130))
([ce2513d](ce2513d))
* **dialog:** Allow shell to be slotted inside
([#10118](#10118))
([ea3a6de](ea3a6de))
* **dialog:** Fix escapeDisabled when the escape key is pressed on the
panel
([#10097](#10097))
([9a5f1f1](9a5f1f1))
* Ensure `beforeOpen`/`open` and `beforeClose`/`close` events emit
properly
([#9958](#9958))
([7e2764f](7e2764f))
* **filter:** Fix setFocus method
([#10149](#10149))
([f4a959a](f4a959a))
* **input-date-picker:** Fix selection for the "bs" and "it-CH" locales
([#9976](#9976))
([368d9e2](368d9e2))
* **input-date-picker:** Prevent console error when using a lang
([#10162](#10162))
([e7bf604](e7bf604))
* **input-time-zone:** Translate region names
([#9940](#9940))
([f975adb](f975adb))
* **input, combobox, input-date-picker, input-number, input-text,
input-time-picker, radio-button-group, segmented-control, select,
text-area:** Provide clear field error messaging for AT
([#9880](#9880))
([46ad7d2](46ad7d2))
* **input, input-number, input-text:** No longer set focus when a
validation message is clicked
([#10008](#10008))
([529bb5a](529bb5a))
* **label:** Prevent focusing and toggling elements slotted within a
label when a text selection occurs
([#9990](#9990))
([49d6ae1](49d6ae1))
* **list-item:** Prevent scrolling when item is focused.
([#9948](#9948))
([eab1e06](eab1e06))
* **panel:** Define heading and description line height
([#10085](#10085))
([5478eb9](5478eb9))
* **slider:** Prevent text selection when using the slider
([#10073](#10073))
([04bf325](04bf325))
* **slider:** Resolve step & snap floating point precision
([#10148](#10148))
([613bc47](613bc47))
* **stepper-item:** Update component to take full width when parent's
layout is "vertical"
([#10009](#10009))
([03a5a30](03a5a30))
* **tree,tree-item:** Replace checkbox with div and a11y attributes
([#9849](#9849))
([b1ac951](b1ac951))


### Performance Improvements

* **input-time-zone:** Improve memory footprint by leveraging browser
cache and releasing utils after their use
([#9945](#9945))
([a3d2141](a3d2141))


### Reverts

* "build(deps): remove unused cheerio package
([#10049](#10049))"
([#10057](#10057))
([d271ab1](d271ab1))
* Add stories
([#10131](#10131))
([e3a6590](e3a6590))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-ui-icons bumped from 3.31.0-next.4 to 3.31.0
</details>

<details><summary>@esri/calcite-components-angular: 2.12.0</summary>

##
[2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.1...@esri/calcite-components-angular@2.12.0)
(2024-08-28)


### Miscellaneous Chores

* **@esri/calcite-components-angular:** Synchronize components versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0
</details>

<details><summary>@esri/calcite-components-react: 2.12.0</summary>

##
[2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.1...@esri/calcite-components-react@2.12.0)
(2024-08-28)


### Miscellaneous Chores

* **@esri/calcite-components-react:** Synchronize components versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.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>
benelan added a commit that referenced this pull request Aug 28, 2024
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-ui-icons: 3.31.0</summary>

##

[3.31.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.30.0...@esri/calcite-ui-icons@3.31.0)
(2024-08-28)


### Features

* Add close-caption, transcript, flag, and flag-slash
([#10039](#10039))

([85c7d69](85c7d69))
* Add layer-connection
([#10067](#10067))

([46dd2ee](46dd2ee))


### Bug Fixes

* Update close-caption, and transcript
([#10077](#10077))

([2e86904](2e86904))
</details>

<details><summary>@esri/calcite-components: 2.12.0</summary>

##

[2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.1...@esri/calcite-components@2.12.0)
(2024-08-28)


### Features

* **accordion, accordion-item:** Add component tokens
([#9861](#9861))

([48f7f08](48f7f08))
* **action, action-bar, action-group, action-menu, action-pad:** Add
component tokens
([#10058](#10058))

([de96c24](de96c24))
* **alert:** Add 'queue' property to prioritize the ordering of alerts
when opened
([#10029](#10029))

([3aa47a4](3aa47a4))
* **combobox-item:** Add `heading` property (deprecates `textLabel`) and
add `label` property
([#9987](#9987))

([90920a0](90920a0))
* **dialog:** Add CSS variables to offset the position
([#9904](#9904))

([660f0c5](660f0c5))
* **dialog:** Add escapeDisabled property
([#10081](#10081))

([1ca8fba](1ca8fba))
* **dialog:** Add outsideCloseDisabled property
([#9978](#9978))

([f1d89b9](f1d89b9))
* **dialog:** Add resizable and dragEnabled properties
([#9804](#9804))

([e3e499e](e3e499e))
* **icon:** Add component tokens
([#10062](#10062))

([34d5689](34d5689))
* **input-time-zone:** Display selected time zone country in region mode
selection
([#9988](#9988))

([1575729](1575729))
* **loader:** Add `determinate-value` type
([#9957](#9957))

([7f21726](7f21726))
* **panel:** Add '--calcite-panel-content-space' style
([#10117](#10117))

([0e3ebcb](0e3ebcb))
* **table:** Update multiple selection iconography
([#10125](#10125))

([f2b2016](f2b2016))
* **tooltip:** Allow focusing and clicking on interactive elements
within a tooltip
([#9914](#9914))

([a3c144c](a3c144c))


### Bug Fixes

* **accordion-item:** Align focus styles across browsers
([#9944](#9944))

([2e29b42](2e29b42))
* **alert:** Properly form a queue of alerts
([#10032](#10032))

([b24d6ac](b24d6ac))
* **color-picker:** Prevent text selection when using color
sliders/field
([#10043](#10043))

([ab33e4d](ab33e4d))
* **combobox, input-date-picker, input-number, input-text,
input-time-picker, input, radio-button-group, segmented-control, select,
text-area:** Use toAriaBoolean in aria-invalid attribute to provide
valid AT error messaging
([#10079](#10079))

([78bc096](78bc096))
* **combobox:** Update placeholder-icon color
([#9956](#9956))

([d916ca4](d916ca4))
* **dialog, flow-item:** Slotted closable panels should not close the
component
([#10130](#10130))

([ce2513d](ce2513d))
* **dialog:** Allow shell to be slotted inside
([#10118](#10118))

([ea3a6de](ea3a6de))
* **dialog:** Fix escapeDisabled when the escape key is pressed on the
panel
([#10097](#10097))

([9a5f1f1](9a5f1f1))
* Ensure `beforeOpen`/`open` and `beforeClose`/`close` events emit
properly
([#9958](#9958))

([7e2764f](7e2764f))
* **filter:** Fix setFocus method
([#10149](#10149))

([f4a959a](f4a959a))
* **input-date-picker:** Fix selection for the "bs" and "it-CH" locales
([#9976](#9976))

([368d9e2](368d9e2))
* **input-date-picker:** Prevent console error when using a lang
([#10162](#10162))

([e7bf604](e7bf604))
* **input-time-zone:** Translate region names
([#9940](#9940))

([f975adb](f975adb))
* **input, combobox, input-date-picker, input-number, input-text,
input-time-picker, radio-button-group, segmented-control, select,
text-area:** Provide clear field error messaging for AT
([#9880](#9880))

([46ad7d2](46ad7d2))
* **input, input-number, input-text:** No longer set focus when a
validation message is clicked
([#10008](#10008))

([529bb5a](529bb5a))
* **label:** Prevent focusing and toggling elements slotted within a
label when a text selection occurs
([#9990](#9990))

([49d6ae1](49d6ae1))
* **list-item:** Prevent scrolling when item is focused.
([#9948](#9948))

([eab1e06](eab1e06))
* **panel:** Define heading and description line height
([#10085](#10085))

([5478eb9](5478eb9))
* **slider:** Prevent text selection when using the slider
([#10073](#10073))

([04bf325](04bf325))
* **slider:** Resolve step & snap floating point precision
([#10148](#10148))

([613bc47](613bc47))
* **stepper-item:** Update component to take full width when parent's
layout is "vertical"
([#10009](#10009))

([03a5a30](03a5a30))
* **tree,tree-item:** Replace checkbox with div and a11y attributes
([#9849](#9849))

([b1ac951](b1ac951))


### Performance Improvements

* **input-time-zone:** Improve memory footprint by leveraging browser
cache and releasing utils after their use
([#9945](#9945))

([a3d2141](a3d2141))


### Reverts

* "build(deps): remove unused cheerio package
([#10049](#10049))"
([#10057](#10057))

([d271ab1](d271ab1))
* Add stories
([#10131](#10131))

([e3a6590](e3a6590))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-ui-icons bumped from 3.31.0-next.4 to 3.31.0
</details>

<details><summary>@esri/calcite-components-angular: 2.12.0</summary>

##

[2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.1...@esri/calcite-components-angular@2.12.0)
(2024-08-28)


### Miscellaneous Chores

* **@esri/calcite-components-angular:** Synchronize components versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.0
</details>

<details><summary>@esri/calcite-components-react: 2.12.0</summary>

##

[2.12.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.1...@esri/calcite-components-react@2.12.0)
(2024-08-28)


### Miscellaneous Chores

* **@esri/calcite-components-react:** Synchronize components versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 2.12.0-next.34 to 2.12.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>

**Related Issue:** #

## Summary

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
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. skip visual snapshots Pull requests that do not need visual regression testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants