mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
8dd566b5c1241022e26cc91c0f415de20c0d0f34
3261 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Luis Rhenals
|
8dd566b5c1 |
fix(modal): add expandToScroll property to ModalOptions (#30357)
Issue number: resolves #30356 --------- <!-- 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? Cannot use expandToScroll property in ModalController.create ## What is the new behavior? ExpandToScroll can be added without syntax problems ## Does this introduce a breaking change? - [ ] Yes - [x] No |
||
|
Shane
|
b1bc58f1c8 |
fix(toggle): ensure proper visual selection when navigating via VoiceOver in Safari (#30349)
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, MacOS voice over on Safari does not recognize ion-toggle correctly and fails to highlight the element properly ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> By adding the role property to the host element, we're correctly identifying the toggle so Safari knows how to handle it. ## 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. --> |
||
|
Maria Hutt
|
105796f6bc |
fix(segment-view): prevent vertical scroll while scrolling horizontally (#30276)
Issue number: resolves #30001 --------- <!-- 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 segment view has content that is long enough to render outside of the viewport, then a user can scroll vertically and horizontally when the user scrolled down to see the content at the bottom. This causes disorientation as scrolling should only be in one direction. This only happens on a mobile device, specifically Android. It can be reproduce with a browser simulator. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated styling to take into account that content might be outside of the viewport. ## 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.5.2-dev.11743531350.19e040aa` |
||
|
Shane
|
bb40a1efe7 |
fix(checkbox): ensure proper visual selection when navigating via VoiceOver in Safari (#30300)
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, MacOS voice over on Safari does not recognize ion-checkbox correctly and fails to highlight the element properly ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> By adding the role property to the host element, we're correctly identifying ion-checkbox as a checkbox so Safari knows how to handle it. ## 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 Smith <brandyscarney@users.noreply.github.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
||
|
Victoria Unizhona
|
ac6e6a0317 |
fix(datetime): support typing time values in a 24-hour format (#30147)
- Adjusted the `selectMultiColumn` logic to handle keyboard values like 20 and 22 dynamically. - Introduced checks for the maximum column value to enable flexible input behavior. - Added e2e tests to verify correct value selection for both 12-hour and 24-hour formats. Issue number: resolves #28877 --------- ## What is the current behavior? In the ion-datetime component, when typing 2000 in the keyboard the resulted time value is 02:00 (in 24-hour format) Examples: https://forum.ionicframework.com/t/ion-datetime-disable-opening-keyboard/224558/6?u=dennisskylegs ## What is the new behavior? In the ion-datetime component, when typing 2000 in the keyboard the resulted time value is 20:00 (in 24-hour format) ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: ShaneK <shane@shanessite.net> |
||
|
Maria Hutt
|
1cfa915e8f |
fix(segment-button): ensure consistent disabled state for segment-content error handling (#30288)
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. --> Segment buttons do not consistently set themselves to a disabled state. When disabling them and rapidly refreshing the page, their state may vary—sometimes they appear disabled, and other times they do not. This was due to this [PR](https://github.com/ionic-team/ionic-framework/pull/30138). The reason that this PR was created was due to the console errors being shown too early when segment buttons and contents were dynamically rendered. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - I reverted the changes added through the other PR since the `setTimeout` was causing the inconsistency. - By moving the console errors to `componentWillLoad`, it provides `ion-segment-content` time to render before the console errors are thrown. ## 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.5.2-dev.11742514102.1b51674d` How to test: 1. Run the server locally 2. Navigate to the [segment view disabled](http://localhost:3333/src/components/segment-view/test/disabled) page 3. Verify that the "Paid", "Free", and "Top" buttons disabled 4. Rapid fire some hard refreshes 5. Verify that the "Paid", "Free", and "Top" buttons disabled 6. Navigate to this StackBlitz [repro](https://stackblitz.com/edit/yhktpj19-wxmxpmw7?file=src%2Fmain.tsx) 7. Install the dev build: `npm i @ionic/react@8.5.2-dev.11742514102.1b51674d @ionic/react-router@8.5.2-dev.11742514102.1b51674d` 8. Open the console log 9. Click on the "Add last child" button 10. Verify that there are no console errors like `Segment Button: Unable to find Segment Content with id="content3".` |
||
|
Maria Hutt
|
7789bb59ee |
fix(range): emit ionInput when value changes (#30293)
Issue number: resolves #29619
---------
<!-- 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. -->
The `ionInput` emits for range even when the value hasn't changed. This
does not match our documentation. It should only emit when the value
changes (and continuously while the user is dragging the knob).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Moved the emitter to the value watch function, to determine if the
value has changed.
- Added a 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. -->
How to test:
1. Navigate to the [range basic HTML
file](
|
||
|
Shane
|
c4b9212640 |
perf(sheet): fixing performance regression on modal sheets when expandToScroll is false (#30267)
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 a sheet is moved while `expandToScroll` is disabled, the DOM is queried excessively causing performance degradation. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> We now cache the targeted element in `onStart` and refer to it in `onMove` and `onEnd`, preventing over-querying the DOM ## 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. --> This regression was introduced in #30257 and quickly highlighted by a member of the community |
||
|
Israel de la Barrera
|
68be8e915c |
fix(modal): consider scrollable content while dragging when expandToScroll is false (#30257)
Issue number: internal --------- ## What is the current behavior? Changes introduced by #30235 caused two major issues: - Animations were not being played when increasing breakpoints. - When the scrollable content was at the top, and a big scroll to the bottom of the list was made, the modal would jump to a higher breakpoint. ## What is the new behavior? - When `expandToScroll` is false, the swipe gesture is allowed unless it's a pull down within scrollable content. - When `expandToScroll` is false, we cancel the `moveSheetToBreakpoint` when a scroll to top is being done within the scrollable content ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information | Before | After | |--------|-------| | <video src="https://github.com/user-attachments/assets/e1c22f48-f990-45cf-a6c4-1aec0d019c6d"> | <video src="https://github.com/user-attachments/assets/f01e0480-748f-40af-ac11-94f790f0e197"> | |
||
|
Maria Hutt
|
39f636f679 |
test(infinite): disable flaky test when running in CI (#30264)
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. --> Test is flaky with Safari but only on CI. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Disabled test for now ## 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. --> |
||
|
renovate[bot]
|
c63ec2e98d |
chore(deps): update playwright (#29840)
This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | Type | Update | |---|---|---|---|---|---|---|---| | [@axe-core/playwright](https://redirect.github.com/dequelabs/axe-core-npm) | [`^4.10.0` -> `^4.10.1`](https://renovatebot.com/diffs/npm/@axe-core%2fplaywright/4.10.0/4.10.1) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | devDependencies | patch | | [@playwright/test](https://playwright.dev) ([source](https://redirect.github.com/microsoft/playwright)) | [`^1.46.1` -> `^1.51.0`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.46.1/1.51.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | devDependencies | minor | | mcr.microsoft.com/playwright | `v1.46.1` -> `v1.51.0` | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | final | minor | --- ### Release Notes <details> <summary>dequelabs/axe-core-npm (@​axe-core/playwright)</summary> ### [`v4.10.1`](https://redirect.github.com/dequelabs/axe-core-npm/blob/HEAD/CHANGELOG.md#4101-2024-10-29) [Compare Source](https://redirect.github.com/dequelabs/axe-core-npm/compare/v4.10.0...v4.10.1) ##### Bug Fixes - Update axe-core to v4.10.1 ([#​1124](https://redirect.github.com/dequelabs/axe-core-npm/issues/1124)) ([099818b]( |
||
|
Mehran Poursadeghi
|
504fb6a25f |
feat(input, textarea): dir is inherited to native form control (#30102)
Issue number: resolves #30193 resolves #29577 Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
||
|
Brandy Smith
|
18e26acb01 |
feat(radio-group): add helperText and errorText properties (#30222)
Issue number: N/A --------- ## What is the current behavior? Radio group does not support helper and error text. ## What is the new behavior? Adds support for helper and error text. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information - [Supporting Text: Preview](https://ionic-framework-git-rou-11554-ionic1.vercel.app/src/components/radio-group/test/supporting-text) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Brandy Smith
|
bbdaec0cc1 |
feat(select): add helperText and errorText properties (#30143)
Issue number: resolves #29205 --------- ## What is the current behavior? Select does not support helper and error text. ## What is the new behavior? - Adds support for `helperText` and `errorText` - Adds parts for `helper-text`, `error-text` and `supporting-text` - Adds an e2e test for helper and error text with functional tests and screenshot tests ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Preview](https://ionic-framework-git-rou-11551-ionic1.vercel.app/src/components/select/test/bottom-content) --------- Co-authored-by: swimer11 <65334157+swimer11@users.noreply.github.com> --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Brandy Smith
|
94ca2e54cb |
feat(toggle): add helperText and errorText properties (#30161)
Issue number: N/A --------- ## What is the current behavior? Toggle does not support helper and error text. ## What is the new behavior? Adds support for helper and error text, similar to input and textarea. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information - [Bottom Content: Preview](https://ionic-framework-git-rou-11552-ionic1.vercel.app/src/components/toggle/test/bottom-content) - [Item: Preview](https://ionic-framework-git-rou-11552-ionic1.vercel.app/src/components/toggle/test/item) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
||
|
Brandy Smith
|
99d2f1c750 |
feat(checkbox): add helperText and errorText properties (#30140)
Issue number: resolves #29810 --------- ## What is the current behavior? Checkbox does not support helper and error text. ## What is the new behavior? Adds support for helper and error text, similar to input and textarea. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information - [Bottom Content: Preview](https://ionic-framework-git-rou-11141-ionic1.vercel.app/src/components/checkbox/test/bottom-content) - [Item: Preview](https://ionic-framework-git-rou-11141-ionic1.vercel.app/src/components/checkbox/test/item) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Maria Hutt
|
335672d523 | refactor(modal): allow dragging when expandToScroll is false (#30235) | ||
|
Brandy Smith
|
9fe44559ce | Merge branch 'main' into chore-feat-8.5-main | ||
|
Maria Hutt
|
ba8d8f4896 |
fix(toggle): trigger focus and blur on click (#30234)
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. --> The blur and focus events do not trigger when clicking even though the value changes. Those events are only triggered when dragged. This leads to Angular validation to not work accurately when clicking so the `ion-touched` is never added to the toggle since it relies on the blur event. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The blur and focus events also trigger on click. This follows the same logic as `ion-checkbox`. ## 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. --> How to test: Recommendation to use `toggle/test/basic/index.html`: [Preview](https://ionic-framework-git-toggle-focus-ionic1.vercel.app/src/components/toggle/test/basic) Add the following script: ```js <script> document.addEventListener('ionChange', () => { console.log('toggle: ionChange') }); document.addEventListener('ionFocus', () => { console.log('toggle: ionFocus') }); document.addEventListener('ionBlur', () => { console.log('toggle: ionBlur') }); </script> ``` Verify that the focus and blur events trigger when clicking and dragging. |
||
|
fudom
|
322319397c |
fix(range): handle unsupported values for range min and max (#30070)
Issue number: resolves #29667 --------- ## What is the current behavior? Currently, if min/max are set to undefined on `IonRange` (which is an accepted value), it breaks the DOM. ## What is the new behavior? After these changes, if min/max are set to undefined or any unsupported value (such as infinity or a NaN), it will fall back to the default values for min and max (currently, 1 and 100 respectively). ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information --------- Co-authored-by: ShaneK <shane@shanessite.net> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
José Rio
|
4df0e0f4c0 |
fix(alert): change focused element and improve keyboard navigation (#30220)
Issue number: internal ## What is the current behavior? > Once Alert gets open the focusable element was the ion-alert itself. > <img width="279" alt="Screenshot 2025-02-27 at 18 07 19" src="https://github.com/user-attachments/assets/50ad3b75-ba32-4dd1-b17e-c5a5bf16f93b" /> ## What is the new behavior? In order to mimick native alert a11y behaviour... Changed the focused element based on the amount of existing buttons. > If there is only 1 button, it should be that one focused > <img width="304" alt="Screenshot 2025-02-27 at 18 04 52" src="https://github.com/user-attachments/assets/e273f65a-5347-4a29-a156-f6e57852f0dc" /> > Otherwise it should focus the `.alert-wrapper` container > <img width="284" alt="Screenshot 2025-02-27 at 18 05 02" src="https://github.com/user-attachments/assets/4a8507f3-a31f-40b9-8cd7-478ec881e3ed" /> > > **NOTE**: The yellow outline it's just for demo purposes, it was not implemented 🤪 ## Does this introduce a breaking change? - [ ] Yes - [X] No ## Other information - Also updated support to the shiftTab keyboard navigation. - Updated tests and screenshots with the latest changes. --------- Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
||
|
Brandy Smith
|
4322935540 |
fix(textarea): update helper text and counter color (#30148)
Issue number: N/A --------- ## What is the current behavior? Helper text is lighter than it should be. ## What is the new behavior? - Updates helper and counter text to match MD design - Updates e2e test to include more coverage ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Preview](https://ionic-framework-git-rou-11559-ionic1.vercel.app/src/components/textarea/test/bottom-content) > Note that the fill toggle will only work in `md` mode --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Brandy Smith
|
fdd52832c6 |
fix(input): update helper text and counter color (#30149)
Issue number: N/A --------- ## What is the current behavior? Helper text is lighter than it should be. ## What is the new behavior? - Updates helper and counter text to match MD design - Updates e2e test to include more coverage ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Preview](https://ionic-framework-git-rou-11558-ionic1.vercel.app/src/components/input/test/bottom-content) > Note that the fill toggle will only work in `md` mode --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
ShaneK
|
ecaeb390cf | Merge branch 'main' of github.com:ionic-team/ionic-framework into merge/main-into-8.5 | ||
|
João Ferreira
|
8eaeb22e7a |
fix(select): auto-scroll to selected item for all interfaces (#30202)
Issue number: resolves #19296 --------- <!-- 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 ion-select is with the interface action-sheet or alert is not scrolling to the selected item on open ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - change test page so all select have scroll; - guarantee focusVisibleElement is called on all interfaces; ## 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 Smith <brandyscarney@users.noreply.github.com> |
||
|
Pedro Lourenço
|
14b6538d98 |
fix(segment-button): protect connectedCallback for when segment-content has not yet been created (cherry-pick) (#30138)
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 `connectedCallback` method is called for a segment-button and its corresponding segment-content has not been created in that instant, a console error is thrown and the method returns. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `connectedCallback` will now wait, at most 1 second, for the corresponding segment-content to be created. - The new behaviour can be tested in segment-view/basic. ## 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. --> |
||
|
Giuliana Silva
|
41da4c3565 |
feat(checkbox): add required prop (#30157)
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?
- Currently, the screen reader do not announce the component as required
when `required={true}`.
## What is the new behavior?
- Added a new `required` prop to be used for accessibility purposes that
adds the `required` attribute to checkbox's inner native input.
## 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.
-->
|
||
|
Giuliana Silva
|
0b549835b6 |
feat(select): add required prop (#30155)
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?
- Currently, the screen reader do not announce the component as required
when `required={true}`.
## What is the new behavior?
- Added a new `required` prop to be used for accessibility purposes that
adds the `aria-required` attribute to select's inner native button.
## 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. -->
|
||
|
Giuliana Silva
|
0bbb9f37b4 |
feat(toggle): add required prop (#30156)
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?
- Currently, the screen reader do not announce the component as required
when `required={true}`.
## What is the new behavior?
- Added a new `required` prop to be used for accessibility purposes that
adds the `required` attribute to toggle's inner native input.
## 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.
-->
|
||
|
Israel de la Barrera
|
166e43554e |
feat(modal): add expandToScroll property to allow scrolling at all breakpoints (#30097)
Issue number: resolves #24631 Co-authored-by: Maria Hutt <13530427+thetaPC@users.noreply.github.com> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
fudom
|
ac4ea3232b |
feat(toolbar): add shadow parts for background, container, and content (#30069)
Resolves #30068 --------- Add `part` attributes to toolbar for the `background`, `container` and `content`. |
||
|
Maria Hutt
|
3f8346e718 |
fix(select-modal): match radio styles to iOS native (#30119)
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 `select-modal` displays radios, a bottom border is shown under the radio icon and text. However, native iOS does not have the border under the icon. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The bottom border is displayed under the radio text only. - The `ion-item` within `select-modal` has been given the prop of `lines="none"` since border styling has been done through `select-md.ios.scss` and because `md` doesn't use it. - 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. --> [Preview (iOS)](https://ionic-framework-git-rou-11404-ionic1.vercel.app/src/components/select/test/basic?ionic%3Amode=ios) [Preview (md)](https://ionic-framework-git-rou-11404-ionic1.vercel.app/src/components/select/test/basic) |
||
|
Tanner Reits
|
000f55303e |
fix(segment): add logic to connect to segment-view in componentDidLoad() callback (#30060)
Issue number: resolves #30000 --------- <!-- 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. --> The "swipeable segments" feature does not work correctly in an Angular environment (tested with both standalone and module architecture). The issues is that the `ion-segment-view` element is not correctly "attached" to the segment since it does not exist at the time the `connectedCallback()` is first executed. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Added the logic to connect the `ion-segment-view` to the `componentDidLoad()` callback in addition to the `connectedCallback()`. The existing logic was left in place for the case where the element is removed and reattached to the DOM. ## 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.2-dev.11733239325.140ef7c3` |
||
|
Maria Hutt
|
845071c97a |
fix(menu): hide from screen readers while animating (#30036)
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 |
||
|
Tanner Reits
|
8ee42bbc1e |
fix(overlays): focus management with checkbox/radio (#30026)
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. --> |
||
|
Maria Hutt
|
23763abf79 |
fix(header): use aria attributes to hide small title when collapsed (#30027)
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` |
||
|
Alexander Harding
|
470decca7b |
fix(toast): swipe gesture works with custom container layout (#29999)
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> | |
||
|
Maria Hutt
|
3216108ca1 |
test(segment): fix flaky gesture test and re-enable (#30008)
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 |
||
|
Tanner Reits
|
89508fb891 |
feat(segment-view): adds support for new ion-segment-view component (#29969)
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> |
||
|
Tanner Reits
|
3628ea875a |
feat(select): add modal as interface (#29972)
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> |
||
|
Brandy Carney
|
0fdcb32ce0 |
fix(alert): use correct heading structure for subHeader when header exists (#29964)
- 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. |
||
|
Brandy Carney
|
ee2fa19a1e |
feat(menu): pass role to ionWillClose and ionDidClose events (#29954)
- 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 |
||
|
Brandy Carney
|
2d6eeee267 | test(alert): skip flaky test (#29985) | ||
|
Brandy Carney
|
c3b58f1620 |
fix(overlays): hide the focus trap div from screen readers (#29970)
Issue number: resolves #29858 --------- ## What is the current behavior? When swiping between elements using Android TalkBack, a green box is shown for certain overlays and it gains focus at the beginning and end of those overlays: <img width="419" alt="Screenshot 2024-10-25 at 2 44 45 PM" src="https://github.com/user-attachments/assets/dffd8126-ec1d-4b6f-87fc-6488c7c09aab"> ## What is the new behavior? The `aria-hidden` attribute is now added to the focus trap divs to hide them from screen readers, without preventing these divs from trapping keyboard focus. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev build: `8.3.4-dev.11729882231.1b2e7f13` |
||
|
Maria Hutt
|
5a7314553a |
fix(input, textarea): ensure screen readers announce helper and error text when focused (#29958)
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. --> Screen readers do not announce helper and error text when user is focused on the input or textarea. This does not align with the accessibility guidelines. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The appropriate `aria` tags are added to the native input and textarea in order to associate them to the helper and error texts. - `aria-describedBy` will only be added to the native element based on helper or error text. If helper text exists then the helper text ID will be used. If the error text exists and the component has the `ion-touched ion-invalid` classes, then the error text ID will be used. - `aria-invalid` will only be added if the error text exists and the component has the `ion-touched ion-invalid` classes. - Added tests. ## 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. --> How to test: 1. Navigate to the [input page](https://ionic-framework-lio43tje7-ionic1.vercel.app/src/components/input/test/bottom-content) on the `main` branch 2. Turn on the screen reader of your choice 3. Notice that the screen reader does not announce the helper or error text when the input is focused 4. Navigate to the [input page](https://ionic-framework-git-rou-11274-ionic1.vercel.app/src/components/input/test/bottom-content) on the `ROU-11274` branch 5. Turn on the screen reader of your choice 6. Verify that the screen reader announces the helper or error text when the input is focused on 7. Navigate to the [textarea page](https://ionic-framework-lio43tje7-ionic1.vercel.app/src/components/textarea/test/bottom-content) on the `main` branch 8. Repeat steps 2-3 9. Navigate to the [textarea page](https://ionic-framework-git-rou-11274-ionic1.vercel.app/src/components/textarea/test/bottom-content) on the `ROU-11274` branch 10. Repeat steps 5-6 Known Webkit issues: This fix will not work on macOS [16](https://bugs.webkit.org/show_bug.cgi?id=254081) and [17](https://bugs.webkit.org/show_bug.cgi?id=262895) as VoiceOver will not read any text using `aria-describedby`. Works fine on macOS 18. |
||
|
Maria Hutt
|
7294e969bb |
fix(backdrop): remove tabindex for improved accessibility (#29956)
Issue number: resolves #29773 --------- <!-- 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. --> Certain Chrome and Edge versions (confirmed: Chrome v127 and Edge v127) would indicate that the backdrop has an accessibility violation: ``` Blocked aria-hidden on a <ion-backdrop> element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at ``` The error is happening because `tabindex` and `aria-hidden` are being passed to `ion-backdrop`. The `tabindex` attribute is used to make an element focusable, regardless of value. When `aria-hidden` is applied to an element, then the element is hidden from screen readers. This violates the accessibility standards since `ion-backdrop` would be considered a focusable element but not visible to screen readers. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removed `tabindex`, this aligns with frameworks known for accessibility (Chakra UI) ## 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.3.4-dev.11729533091.1ac77a0c` How to test: 1. Use either Chrome v127 or Edge v127 2. Navigate to the [alert basic page](https://ionic-framework-3pvgcj4b9-ionic1.vercel.app/src/components/alert/test/basic) from the `main` branch 3. Open browser console 4. Click on the first button on the alert page 5. Click on the backdrop 6. Notice the error message in the browser console (if you don't see it, then use a private browser or clear cache) 7. Navigate to the [alert basic page](https://ionic-framework-git-rou-11175-ionic1.vercel.app/src/components/alert/test/basic) from the `ROU-11175` branch 8. Repeat steps 2-6 9. Verify that the error does not appear |
||
|
Maria Hutt
|
cdb4456be2 |
test(styles): update button styles for test pages (#29931)
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. -->
Test styles causes native buttons to have [certain
styling](https://github.com/ionic-team/ionic-framework/blob/main/core/scripts/testing/styles.css#L52-L64).
This was done to spruce up the buttons used for testing purposes only.
However, this ended up adding styles to native buttons within Ionic
components.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Test styles for native buttons are only applied to buttons that are
not part of a Ionic component
## 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. -->
How to test:
1. Run the project locally from the `main` branch
2.
[Comment](
|
||
|
Brandy Carney
|
668b2dac57 |
docs(app): add setFocus to the documentation (#29916)
Issue number: resolves #29830 --------- ## What is the current behavior? The `setFocus` method on `ion-app` is marked internal. ## What is the new behavior? Document the `setFocus` method as a way for developers to programmatically focus elements. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information The method isn’t new, it was just marked as internal, which prevented it from being documented. I can mark this as a `feat` though if anyone thinks it should be. Related documentation PR: https://github.com/ionic-team/ionic-docs/pull/3842 |
||
|
Maria Hutt
|
078ed0b86a |
fix(segment): prevent flickering for scrollable on iOS (#29884)
Issue number: resolves #29523 --------- <!-- 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. --> The scrollable segment flickers on iOS physical devices or simulators when the active button is near the edge of the screen. The jump is due to the button being scrolled to the center and snaps back to the edge since the button was scrolled past the container. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Switched to `scrollTo` provides for a smoother transition. - Gave co author credit to the original reporter since they provided part of the solution - No new tests were created since functionality stays the same and testing on Playwright would be impossible to recreate ## 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.3.2-dev.11726779768.16e1f1d2 How to test: 1. Create a new app through any starter 2. Add a scrollable segment with at least 6 buttons (code snippet example below) 3. Recommended to change the segment mode to `md` since it's easier to see the flicker 4. Build the app and open it in an iOS or simulator (if more instructions on how to do this is needed, reach out to me) 5. Click on the third button 6. Click on the first button 7. Notice the flicker 8. Click over to the third to last button 9. Click on either the last two buttons 10. Notice the flicker 11. Install the dev build 12. Verify the load does not flicker 13. Repeat steps 4 and 5 14. Verify the flicker is no longer there 15. Repeat steps 7 and 8 16. Verify the flicker is no longer there ```js <ion-segment value="2" scrollable="true" mode="md"> <ion-segment-button value="1"> <ion-label>Button 1</ion-label> </ion-segment-button> <ion-segment-button value="2"> <ion-label>Button 2</ion-label> </ion-segment-button> <ion-segment-button value="3"> <ion-label>Button 3</ion-label> </ion-segment-button> <ion-segment-button value="4"> <ion-label>Button 4</ion-label> </ion-segment-button> <ion-segment-button value="5"> <ion-label>Button 5</ion-label> </ion-segment-button> <ion-segment-button value="6"> <ion-label>Button 6</ion-label> </ion-segment-button> </ion-segment> ``` --------- Co-authored-by: rostislavcz <58735164+rostislavcz@users.noreply.github.com> |
||
|
Maria Hutt
|
35b1a45929 |
fix(range): disable scroll when range is being dragged (#29241)
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 a few tests that were disabled due to being flaky from gestures. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> While fixing the tests, I found a bug that the scroll was never being disabled on scroll. Additionally, we were not taking into account that a custom scroll target could be used so it was never disabled either. - Fixed the flaky tests. - Content doesn't scroll when range is being dragged. - Content can be either `ion-content` or a custom scroll target. ## 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/.github/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 for `ion-content`](https://ionic-framework-git-fw-2873-ionic1.vercel.app/src/components/range/test/scroll) [Preview for custom scroll target](https://ionic-framework-git-fw-2873-ionic1.vercel.app/src/components/range/test/scroll-target) How to test: 1. Open either of the previews 2. Render the screen with the device simulator from the browser 3. Verify that you can scroll the page 4. Drag the range but don't let go 5. Verify that you cannot scroll the page 6. Repeat steps 2-5 with the other preview |