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?
Tab button does not have a shape property.
## What is the new behavior?
- Adds support for the shape property in tab button.
- Adds styles for the "soft", "round" and "rectangular" shapes in the
ionic theme
- Defaults the shape to "round" for the ionic theme
- Adds an e2e test for shape with screenshots of all shapes
## 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. -->
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?
- Changed input focus token.
- Replaced some hard values with equivalent token.
- Updated snapshots.
## 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. -->
- [Input Ionic
Theme](https://ionic-framework-dprip7ii9-ionic1.vercel.app/src/components/input/test/basic?ionic:theme=ionic)
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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Add new display-contents and display-flex classes.
## 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.
-->
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. -->
- Updated toolbar font-size to use new tokens.
## 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. -->
- [Toolbar Ionic
Theme](https://ionic-framework-3vljb9d5n-ionic1.vercel.app/src/components/toolbar/test/theme-ionic)
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?
- Removed avatar border with ionic theme, to align with UX/UI design.
- Updated snapshots
## 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. -->
[Avatar Ionic
Sample](https://ionic-framework-nimqjtxw7-ionic1.vercel.app/src/components/avatar/test/shape?ionic:theme=ionic)
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. -->
When the menu is presented on an Android device, TalkBack's focus rings
may appear in the wrong position due to the transition (specifically
`transform` styles). This occurs because the focus rings are initially
displayed at the starting position of the elements before the transition
begins.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- When an overlay is being animated (presenting or dismissing), the
overlay will hide from screen readers. This allows Talkback to display
the focus rings on the correct position.
## 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.4.1-dev.11732305980.19d90e1c`
Related to https://github.com/ionic-team/ionic-framework/pull/29951
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. -->
PR https://github.com/ionic-team/ionic-framework/pull/29951 would hide
the overlays from screen readers while animating. This allows the
element to navigate to its correct destination for screen readers to
interact with. Otherwise, the focus rings would never appear. However,
this ended up breaking the interaction for iOS.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Overlays are hidden from screen readers while animating only if the
platform is `android`. Since the original issue only applied to Android
devices.
## 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.4.1-dev.11732033492.170e160c`
Test on iOS and Android devices.
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. -->
Using `Tab` or `Shift + Tab` to focus through elements in a modal won't
behave as expected when using `ion-checkbox` or `ion-radio` within an
`ion-item`. Previously, the behavior would result in the last item in a
list getting focus styling, but `document.activeElement` would still be
the first actionable item in the overlay
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
For checkboxes, the `ion-checkbox` element itself will be focused rather
than the encapsulating `ion-item`
For radios, the `ion-radio-group` will be used to focus the appropriate
element. This will be the first `ion-radio` if there is no "checked"
item, or the "checked" item if one exists.
## 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. -->
Issue number: resolves#29347
---------
<!-- 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. -->
Focusable elements like buttons cannot be accessed within the
`ion-header` when it's collapsed. They're only accessible once the small
title is displayed.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Moved the `aria-hidden` from the header to `ion-title`, this aligns
with native.
- Updated existing test.
## 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.4.1-dev.11732064156.12837790`
Issue number: resolves#29998
---------
<!-- 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?
Applying a custom layout to `ion-toast::part(container)`, for example
`width: 50%`, will make the part of the toast outside this element's
bounds non-interactive for swiping gestures.
## What is the new behavior?
Can swipe from anywhere on the toast with custom layout applied to
::part(container)
## 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
| Before | After |
|-------|-----------------------------------------------------|
| <video
src="https://github.com/user-attachments/assets/fc450066-5fb1-4fd9-bfbd-7f2cd55ce855"></video>
| <video
src="https://github.com/user-attachments/assets/991f6a42-f6fe-479b-9f68-7e7e35dca799"></video>
|
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's a flaky test that was disabled for segment. It's been known that
gesture tests are prone to be flaky.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Fixed the test by switching to the improved `dragElementBy` function
## 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
## What is the current behavior?
Segment view does not contains styling once at ionic theme.
## What is the new behavior?
Same default style as md should be added.
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
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?
The ion-range pin is only shown we the range is being dragged for all
themes.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- This PR updates the range pin so that it is alway visible when it is
enabled for the ionic theme.
## 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. -->
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?
No ionic theme custom implementation existed for the ion-range
component.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added ionic theme specific styling (based on the ios styling) for the
range according to UX requirements.
## 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. -->
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. -->
Segments can only be changed by clicking a segment button, or dragging
the indicator
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The segment/segment buttons can now be linked to segment content within
a segment view component. This content is scrollable/swipeable. Changing
the content will update the segment/indicator and vice-versa.
## 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. -->
**Limitations:**
- Segment buttons **cannot** be disabled when connected ton
`ion-segment-content` instances
- The `ion-segment` **cannot** be without a value when linked with an
`ion-segment-view`. If no value is provided, the value will default to
the value of the first `ion-segment-content`
[Preview](https://ionic-framework-jlt8by2io-ionic1.vercel.app/src/components/segment-view/test/basic)
[Preview (disabled
state)](https://ionic-framework-jlt8by2io-ionic1.vercel.app/src/components/segment-view/test/disabled)
---------
Co-authored-by: Brandy Carney <brandyscarney@gmail.com>
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. -->
Select only offers `alert`, `action-sheet`, and `popover` as interfaces
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Adds `modal` as an interface option for `ion-select`
## 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. -->
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
- The `header` will continue to always render as an `<h2>` element.
- If there is no `header` defined, the `subHeader` will continue to render as an `<h2>` element.
- If there is a `header` defined, the `subHeader` will render as an `<h3>` element.
- Updates `ariaLabelledBy` to include both `header` and `subHeader` ids when both are defined.
- Updates the `a11y` e2e test to use new values & check for tag names.
- Adds the `MenuCloseEventDetail` interface which includes an optional `role` property
- The `ionWillClose` and `ionDidClose` emit the `role` property for the following scenarios:
- A role of `'gesture'` when dragging the menu closed
- A role of `'backdrop'` when clicking on the backdrop to close the menu
- A role of `'backdrop'` when the the menu is closed using the escape key
- A role of `undefined` when the menu is closed from a button inside of
the menu
- Removes the `*.ionic.vars.scss` files for item, list and input and uses the design tokens directly
- Removes the `tab-bar.ionic.vars.scss` file and moves the variables to the default ionic theme file since this uses global css variables
- Applies border radius based on the `shape` defined on the parent accordion group
- Adds an e2e test for shape with focused items to show the border radius
- Adds screenshots for the e2e test
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. -->
Unable to use the `rtl` mixin from the ionic theme global import:
```scss
@use "../../themes/ionic/ionic.globals.scss" as globals;
:host {
@include globals.rtl() {
...
}
}
```
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Allows the `rtl` mixin to be accessed from the global sass import
## 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. -->
- Adds support for the `shape` property in accordion group.
- Adds styles for the `"soft"`, `"round"` and `"rectangular"` shapes in the `ionic` theme
- Defaults the shape to `"round"` for the ionic theme
- Adds an e2e test for `shape` with screenshots of all shapes
- Renames the `accordion.e2e.ts` files in other tests to `accordion-group.e2e.ts` which also renames the screenshot folder
