544 Commits

Author SHA1 Message Date
7a293d768c v8.7.7 2025-10-15 19:00:38 +00:00
03303d73f0 fix(select): improve screen reader announcement timing for validation errors (#30723)
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Currently, when an error text is shown, it may not announce itself to
voice assistants. This is because the way error text currently works is
by always existing in the DOM, but being hidden when there is no error.
When the error state changes, the error text is shown, but as far as the
voice assistant can tell it's always been there and nothing has changed.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updated aria attributes
- Added observer with an observer

We had to do this with a mutation observer and state because it's
important in some frameworks, like Angular, that state changes to cause
a re-render. This, combined with some minor aria changes, makes it so
that when a field is declared invalid, it immediately announces the
invalid state instead of waiting for the user to go back to the invalid
field.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


[Preview](https://ionic-framework-git-fw-6797-ionic1.vercel.app/src/components/select/test/validation/)
2025-10-15 17:50:07 +00:00
ce048a507a chore(): update package lock files 2025-10-08 18:36:26 +00:00
2156f99c2a v8.7.6 2025-10-08 18:35:35 +00:00
99d2b731f5 chore(): update package lock files 2025-09-24 19:52:26 +00:00
515249d2c3 v8.7.5 2025-09-24 19:51:40 +00:00
a40d957ad9 fix(modal): allow sheet modals to skip focus trap (#30689)
Issue number: resolves #30684

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Recently, we [fixed some issues with aria-hidden in
modals](https://github.com/ionic-team/ionic-framework/pull/30563),
unfortunately at this time we neglected modals that opt out of focus
trapping. As a result, a lot of modals that disable focus trapping still
have it happening and it doesn't get cleaned up properly on dismiss.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
We're now properly checking for and skipping focus traps on modals that
do not want them.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

I created regression tests for Angular in this to prevent this from
happening again. I initially tried to do this with core, but the issue
doesn't seem to reproduce with core.

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Current dev build:
```
 8.7.5-dev.11758652700.103435a3
```
2025-09-24 19:29:58 +00:00
b3b02416a3 chore(): update package lock files 2025-09-17 15:56:32 +00:00
be1f3f32f0 v8.7.4 2025-09-17 15:55:52 +00:00
c339bc3682 fix(input): improve error text accessibility (#30635)
Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Currently, when an error text is shown, it may not announce itself to
voice assistants. This is because the way error text currently works is
by always existing in the DOM, but being hidden when there is no error.
When the error state changes, the error text is shown, but as far as the
voice assistant can tell it's always been there and nothing has changed.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

With these changes, both input and textarea have been updated so they'll
properly announce error text when it shows up. We had to do this with a
mutation observer and state because it's important in some frameworks,
like Angular, that state changes to cause a re-render. This, combined
with some minor aria changes, makes it so that when a field is declared
invalid, it immediately announces the invalid state instead of waiting
for the user to go back to the invalid field.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Current dev build:
```
8.7.4-dev.11756220757.185b8cbf
```

## Screens

[Textarea](https://ionic-framework-git-ionic-49-ionic1.vercel.app/src/components/textarea/test/validation)

[Input](https://ionic-framework-git-ionic-49-ionic1.vercel.app/src/components/input/test/validation)

---------

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
2025-09-04 15:11:59 +00:00
49f96d7f1e fix(overlays,picker): remove invalid aria-hidden attribute (#30563)
Issue number: resolves #30040

---------

## What is the current behavior?
- The usage of `aria-hidden="true"` attributes both on overlay and
picker components was causing some console error/warnings messages.
- This was being caused due the fact of the activeElement (focused
element) was inside those elements with this attribute that's equal to
true in all cases.


![d13215a4-a610-4b1f-81d8-ce3ae05df790](https://github.com/user-attachments/assets/1b79c8bf-b23a-4165-8fb4-894be27bbad4)

## What is the new behavior?
- There is no need of making usage of this attribute due the facts:
- 1. Once overlay is closed the focus will be redirect to the element
that triggers the overlay, this way screen readers will be also
redirected to the same context of focused element.
- 2. After overlay is closed, it will be set as a `display: none;`
through the selector `:host(.overlay-hidden)`, which by itself will
disable overlay content for the screen readers.

- Removed overlay tests since they were basically checking about
`aria-hidden` attribute.
- Updated PickerColumn and PickerColumnOption structure in order to fit
the a11y needs.
- Added a focus management system to better drive users when making
usage of keyboard navigation inside picker.
- Skip A11Y test validation when reported violation is color contrast
related.

### ⚠️ NOTE:
- Reported devTools issue/warning when selecting picker is **from now
on** expected due to focus an input that's set with `tabIndex="-1"` and
`aria-hidden="true"` - Which turns into an A11Y violation when it gets
focused.
It happens that it gets focused dynamically in order to open the native
numeric keyboard **once user selects highlighted picker values zone**,
in order to allow users to insert numeric values through the keyboard.
If this `aria-hidden` and `tabindex` are removed/updated, the existing
functionality will be lost since ScreenReaders will start to ignore the
updated value through the PickerChange and will be focused onto the
focused input.
This mentioned input has an onChange event that's used to update the
`aria-valuetext` on each `picker-column` which is being capture by the
ScreenReader.
That said, this new devTools reported issue/warning is a false positive
since A11Y behaviour is being covered through a different perspective.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

## Testing:

-  [ActionSheet
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/action-sheet/test/a11y)
-  [Alert
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/alert/test/a11y)
-  [DateTime
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/datetime/test/basic)
-  [DateTime Button
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/datetime-button/test/basic)
-  [Modal
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/modal/test/a11y)
-  [Popover
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/popover/test/basic)
-  [Select
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/select/test/basic)
-  [Picker, PickerColumn and PickerColumnOption
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/picker/test/basic)
-  [Toast
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/toast/test/a11y)

## Other Information

Dev build: `8.7.4-dev.11756388042.1a103a79`

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
2025-09-03 22:54:11 +00:00
b57a7c1d49 chore(): update package lock files 2025-08-20 18:37:37 +00:00
ac6968cc10 v8.7.3 2025-08-20 18:36:46 +00:00
4c1d0127b6 chore(): update package lock files 2025-08-06 17:05:40 +00:00
7075808ba8 v8.7.2 2025-08-06 17:04:58 +00:00
1cd81b9230 fix(reorder-group): add children fallback for framework compatibility (#30593)
Issue number: resolves #30592

---------

## What is the current behavior?
Reorder group is failing for Angular, React & Vue due to the change from
`children` to `__children`.

## What is the new behavior?
- Fallback to `children` if `__children` is undefined.
- Adds an e2e test for Angular (depends on
https://github.com/ionic-team/ionic-framework/pull/30594)
- Tasks have been created to migrate and add e2e tests for the other
frameworks

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

Dev build: `8.7.2-dev.11754087334.1815cf22`

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-08-05 14:27:18 +00:00
05026c5a48 test(angular): migrate to playwright (#30594)
- Migrates Angular test app tests from Cypress to Playwright
- Resolves test TODOs with Angular 18
- Resolves nav TODO by adding in standalone components
- Updates browserslist to remove warnings

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-08-05 13:58:46 +00:00
8d39ea0c6e chore(): update package lock files 2025-07-31 15:56:19 +00:00
e4c042834c v8.7.1 2025-07-31 15:55:42 +00:00
227d637998 chore(): update package lock files 2025-07-30 21:05:52 +00:00
cbb4ad5683 v8.7.0 2025-07-30 21:05:10 +00:00
74cd71af24 feat(deps): update ionicons to v8 (#30390)
Issue number: resolves #30445

---------

Updates all packages to use the latest version of Ionicons v8

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-07-30 16:45:20 -04:00
30d1910d6e feat(modal): add IonModalToken for injecting modal elements in Angular components (#30474)
Issue number: resolves #internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Currently, we provide no injection access to angular modals, which makes
it difficult to connect to their events normally.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

This is an attempt to allow easier programmatic access to the internals
of injected modals.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `8.6.2-dev.11749830167.1460aa73`
2025-07-30 16:43:02 -04:00
b154f4ed09 feat(reorder-group): add ionReorderStart, ionReorderMove, ionReorderEnd events (#30471)
Issue number: resolves #23148 resolves #27614

---------

The `ion-reorder-group` only emits an `ionItemReorder` event when the reorder gesture ends AND the item position has changed. There is no way to listen for when the gesture starts, is actively moving, or ends without the item changing position.

- Adds an `ionReorderStart` event that is fired without any details on the start of the gesture.
- Adds an `ionReorderMove` event that is fired continuously during gesture move and includes the `from` and `to` detail.
- Adds an `ionReorderEnd` event that is fired at the end of the gesture and always includes the `from` and `to` detail, even if they are the same.
- Deprecates the `ionItemReorder` event, recommending to use the `ionReorderEnd` instead.

- [ ] Yes
- [x] No

While this does not introduce a breaking change, it does deprecate the `ionItemReorder` event in favor of the `ionReorderEnd` event. This event behaves a bit differently since it is always emitted on end. If the `from` and `to` are the same, it will still emit them, so it's possible to check if they are the same to determine if `ionReorderEnd` fired without moving item positions.

----

Co-authored-by: sfinktah <sfinktah@github.spamtrak.org>
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-07-30 16:42:53 -04:00
ffcf5d0268 chore(): update package lock files 2025-07-30 20:15:16 +00:00
759147fab6 v8.6.7 2025-07-30 20:14:30 +00:00
baed34722b chore(): update package lock files 2025-07-30 18:12:14 +00:00
708d5845b9 v8.6.6 2025-07-30 18:11:38 +00:00
75df16286b chore(): update package lock files 2025-07-16 19:53:50 +00:00
5a3ad9c54a v8.6.5 2025-07-16 19:53:16 +00:00
be543c1b1e chore(): update package lock files 2025-07-09 20:16:22 +00:00
d2aa07f354 v8.6.4 2025-07-09 20:15:44 +00:00
ffdb2c17b1 chore(): update package lock files 2025-07-02 21:38:18 +00:00
a3c51e5e34 v8.6.3 2025-07-02 21:37:16 +00:00
08e3e7ab51 fix(angular): update schematics to support Angular's latest build system (#30525)
Issue number: resolves ionic-team/ionic-docs#2091

---------

## What is the current behavior?
Documentation to test `ng add` schematic for @ionic/angular is outdated
& it fails when running with:
```
Invalid projectType for my-app: undefined
```

## What is the new behavior?
Fix the schematic to support the latest Angular build system & update
the documentation for testing local Ionic Framework with `ng add`.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

_I am using `Angular CLI: 20.0.4`_

Run these commands first to see the error: 
```sh
ng new my-app --style=css --ssr=false --zoneless=false
cd my-app
ng add @ionic/angular --skip-confirmation
```

Switch to this branch (`fix-angular-schematics`) and then follow the
[new
steps](b9b345303c/packages/angular/README.md (testing-local-ionic-framework-with-ng-add))
and confirm the error is gone.

--------

`Co-authored-by: soundproofboot <colinedwinbares@gmail.com>`

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-07-02 15:23:43 +00:00
7b9f306d1f chore(angular): upgrade test apps to latest (#30517)
Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Angular base has outdated files, which has lead to many duplicated files
within the versioned apps. Base files should always be the latest.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updated base files to the latest
- Removed duplicate files from the versioned apps since base will
provide them
- Added files to the older versioned apps since they no longer align
with the latest files with base

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

N/A
2025-06-30 20:10:51 +00:00
bcc730c77b chore(angular): update typescript to support Angular 20 (#30516)
Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Angular 20 test app is using an unsupported Typescript version.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Angular 20 only supports Typescript 5.8+. I forgot to update it in an
earlier [PR](https://github.com/ionic-team/ionic-framework/pull/30507).

- Upgraded TS to the proper version.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

N/A
2025-06-27 20:45:18 +00:00
4b5753a4ce test(angular): add ng20 test app (#30507)
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

There are tests apps for Angular 16, 17, 18, and 19 only. Angular 20 has
been released and should be included.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adds a test app for Angular 20

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

N/A
2025-06-24 18:59:25 +00:00
bc36d44e9a chore(): update package lock files 2025-06-18 17:04:49 +00:00
0ea65fea6f v8.6.2 2025-06-18 17:03:32 +00:00
e27c14a00a chore(): update package lock files 2025-06-11 15:37:41 +00:00
446b64ef36 v8.6.1 2025-06-11 15:37:04 +00:00
fed4d62a0d chore(): update package lock files 2025-06-04 14:58:14 +00:00
3e76b8339e v8.6.0 2025-06-04 14:57:34 +00:00
6afcd530e6 Merge branch 'main' into chore/update-from-main 2025-06-04 10:33:07 -04:00
4e76bd3761 chore(): update package lock files 2025-06-04 13:46:14 +00:00
3b1a0eb00b v8.5.9 2025-06-04 13:45:35 +00:00
4d6a067677 feat(input-otp): add new input-otp component (#30386)
Adds a new component `ion-input-otp` which provides the OTP input functionality

- Displays as an input group with multiple boxes accepting a single character
- Accepts `type` which determines whether the boxes accept numbers or text/numbers and determines the keyboard to display
- Supports changing the displayed keyboard using the `inputmode` property
- Accepts a `length` property to control the number of input boxes
- Accepts the following properties to change the design: `fill`, `shape`, `size`, `color`
- Accepts a `separators` property to show a separator between 1 or more input boxes
- Supports the `disabled`, `readonly` and invalid states
- Supports limiting the accepted input via the `pattern` property
- Emits the following events: `ionInput`, `ionChange`, `ionComplete`, `ionBlur`, `ionFocus`
- Exposes the following method: `setFocus`

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Shane <shane@shanessite.net>
2025-05-29 15:10:37 -04:00
b587ccde56 chore(): update package lock files 2025-05-28 18:16:34 +00:00
57f8666e44 v8.5.8 2025-05-28 18:15:54 +00:00