Issue number: resolves#28466
---------
<!-- 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. -->
In https://github.com/ionic-team/ionic-framework/issues/27060 I fixed an
issue where the main title would be visible briefly before the
collapsible large title a) was configured and b) hid the main title. I
accomplished this by using CSS to target
`ion-header[collapse="condense"]`. However, I failed to account for when
the property is not reflected on the host. Some JS frameworks allow the
property to remain on the element but some do not.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- I improved this fix by also targeting the class set on the host. This
class is set regardless of property reflection status.
| main | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/991523da-8549-451b-930f-5df45c2783de"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/149c9546-2d9b-42a2-89f1-a17fa146aee6"></video>
|
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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: `7.5.4-dev.11699282935.1db450b0`
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Bumps [@playwright/test](https://github.com/microsoft/playwright) from
1.38.1 to 1.39.0.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/microsoft/playwright/releases"><code>@playwright/test</code>'s
releases</a>.</em></p>
<blockquote>
<h2>v1.39.0</h2>
<h2>Add custom matchers to your expect</h2>
<p>You can extend Playwright assertions by providing custom matchers.
These matchers will be available on the expect object.</p>
<pre lang="js"><code>import { expect as baseExpect } from
'@playwright/test';
export const expect = baseExpect.extend({
async toHaveAmount(locator: Locator, expected: number, options?: {
timeout?: number }) {
// ... see documentation for how to write matchers.
},
});
<p>test('pass', async ({ page }) => {
await expect(page.getByTestId('cart')).toHaveAmount(5);
});
</code></pre></p>
<p>See the documentation <a
href="https://playwright.dev/docs/test-configuration#add-custom-matchers-using-expectextend">for
a full example</a>.</p>
<h2>Merge test fixtures</h2>
<p>You can now merge test fixtures from multiple files or modules:</p>
<pre lang="js"><code>import { mergeTests } from '@playwright/test';
import { test as dbTest } from 'database-test-utils';
import { test as a11yTest } from 'a11y-test-utils';
<p>export const test = mergeTests(dbTest, a11yTest);
</code></pre></p>
<pre lang="js"><code>import { test } from './fixtures';
test('passes', async ({ database, page, a11y }) => {
// use database and a11y fixtures.
});
</code></pre>
<h2>Merge custom expect matchers</h2>
<p>You can now merge custom expect matchers from multiple files or
modules:</p>
<pre lang="js"><code>import { mergeTests, mergeExpects } from
'@playwright/test';
import { test as dbTest, expect as dbExpect } from
'database-test-utils';
import { test as a11yTest, expect as a11yExpect } from
'a11y-test-utils';
<p>export const test = mergeTests(dbTest, a11yTest);
</tr></table>
</code></pre></p>
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="3049d99bc8"><code>3049d99</code></a>
cherry-pick(<a
href="https://redirect.github.com/microsoft/playwright/issues/27555">#27555</a>):
chore: composed->merge</li>
<li><a
href="ae31f58b43"><code>ae31f58</code></a>
chore: mark 1.39.0 (<a
href="https://redirect.github.com/microsoft/playwright/issues/27550">#27550</a>)</li>
<li><a
href="5313514995"><code>5313514</code></a>
cherry-pick(<a
href="https://redirect.github.com/microsoft/playwright/issues/27549">#27549</a>):
docs: update release notes for 1.39</li>
<li><a
href="0d168dc8d0"><code>0d168dc</code></a>
chore: release notes for 1.39 (<a
href="https://redirect.github.com/microsoft/playwright/issues/27537">#27537</a>)</li>
<li><a
href="4f9b285c07"><code>4f9b285</code></a>
chore: update WebKit version to 17.4 (<a
href="https://redirect.github.com/microsoft/playwright/issues/27536">#27536</a>)</li>
<li><a
href="d11380e911"><code>d11380e</code></a>
docs: improve test.step documentation (<a
href="https://redirect.github.com/microsoft/playwright/issues/27535">#27535</a>)</li>
<li><a
href="9edb811434"><code>9edb811</code></a>
feat(chromium-tip-of-tree): roll to r1158 (<a
href="https://redirect.github.com/microsoft/playwright/issues/27533">#27533</a>)</li>
<li><a
href="d05c865389"><code>d05c865</code></a>
test: unflake a few tests (<a
href="https://redirect.github.com/microsoft/playwright/issues/27519">#27519</a>)</li>
<li><a
href="2776d8446b"><code>2776d84</code></a>
docs: how to update playwright in python (<a
href="https://redirect.github.com/microsoft/playwright/issues/27527">#27527</a>)</li>
<li><a
href="2407041090"><code>2407041</code></a>
fix(chromium): avoid premature continue of redirects (<a
href="https://redirect.github.com/microsoft/playwright/issues/27520">#27520</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/microsoft/playwright/compare/v1.38.1...v1.39.0">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
---------
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#24638, resolves#18592
---------
<!-- 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. -->
Developers have requested that Ionic Framework support the dynamic type
feature on iOS for accessibility purposes. Ionic applications do not
respond to font scaling on iOS which can create inaccessible
applications particularly for users with low vision. Ionic apps on
Android devices currently support the Android equivalent due to
functionality in the Chromium webview.
Developers have also requested a way of adjusting the fonts in their
Ionic UI components consistently.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Ionic components now use `rem` instead of `px` where appropriate. This
means devs can change the font size on `html` and the text in supported
Ionic components will scale up/down appropriately
- Add support for Dynamic Type on iOS (the iOS version of Dynamic Font
Scaling)
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: resolves#27060
---------
<!-- 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 main header is controlled by the header with `collapse="condense"`
set:
a04a11be35/core/src/components/header/header.tsx (L144)
The collapse header will hide the main header and then show it once the
user has scrolled enough. However, if the main header is rendered before
the collapse header is rendered, then the main header will be visible
for a brief moment before being hidden by the collapse header. This
gives the perception of flicker that is reported on the linked issue.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The main header will be hidden on load if it loads before the collapse
header
The selector was written in a way such that once the collapse header
loads, this CSS no longer applies (since the collapse header will add
`.header-collapse-main` to the main header)
| `main` | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/3cb11a57-e084-435a-89c2-e1c2afba04b1"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/c5caeb5e-3b33-4598-986f-bf097c46251c"></video>
|
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Note: `:has` browser compat is still fairly new. However, it is
available on both Chromium and WebKit browsers (and has been for at
least a year): https://caniuse.com/?search=%3Ahas
Given that this bug is a fairly minor UI glitch (as opposed to something
that would cause an app to crash or otherwise malfunction), I think this
is an acceptable tradeoff. As time goes on this will become less of a
concern as more users update their devices.
Dev build: `7.4.3-dev.11696365694.156f41d3`
Issue number: resolves#27966
---------
<!-- 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 large title on iOS added bottom padding to create space between the
title and the main content. However, this caused tall text to be cut off
on the top.
During development I also noticed that the padding value we were using
does not match the iOS spec.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The padding is now applied to the toolbar that contains the large
title. The title itself is positioned absolutely so adding
padding/margin to it never actually had the desired effect. What we want
is space between the title and any content in sibling toolbars. All the
padding on the title did was shift content within the title up to give
the impression of space between the title and other content.
- Adjusted the actual padding values to align with the iOS spec
Note: The screenshot diffs here are correct. By adding padding to the
toolbar we are increasing the height of the toolbar by 6px. As noted
above, we never truly had spacing between the large title and the
content since the text inside of the title was just being shifted by 6px
to give the impression of spacing.
Additionally, the padding values were further adjusted to match the iOS
spec:
| native | ionic | diff |
| - | - | - |
|
|
|
|
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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: `7.2.4-dev.11691683954.1b6ed4bb`
---------
Co-authored-by: ionitron <hi@ionicframework.com>
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 `ion-header` and `ion-footer` use a base64 encoded image for a box
shadow instead of using the CSS box-shadow property directly. The use of
the background image creates CSP violations. The historic reasoning of
using an image instead of box shadow was to improve scroll performance.
Browsers and devices have improved a lot since that was implemented (5
years ago).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the usage of `ion-header` and `ion-footer` to use a box
shadow. The value comes from Material's web implementation:
https://material-components.github.io/material-components-web-catalog/#/component/top-app-bar
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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: ionitron <hi@ionicframework.com>
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 team has observed that Playwright's default screenshot diff
threshold of 0.2 is not sensitive enough, and screenshots that should be
getting updated are not getting updated.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the threshold to 0.1
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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: ionitron <hi@ionicframework.com>
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Header tests us legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Header tests us generator syntax
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## 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: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
This is the first PR to introduce the infrastructure required to add
test generators to the Ionic Framework project. This PR introduces the
file name changes necessary to support two playwright configs, so I
recommend reviewing the PR by commit:
1e5012cea1
- Created a `playwright.config-legacy.ts` file and updates
`package.json`.
- Running `npm run test.e2e` will run the generator tests, and running
`npm run test.e2e.legacy` will run the legacy tests.
4fe8de7df7
- Updates the GitHub Action scripts to run both the modern and legacy
E2E tests. I added command modifiers to avoid collisions with output
directories.
e8bcfaf926
- Updates `*.e2e.ts` files to have the legacy format name:
`*.e2e-legacy.ts`. This naming scheme is required for the two Playwright
configs to pull in the correct files. When migrating tests to
generators, team members will rename the file to remove the `-legacy`
part.
5bf196c36d
(warning: lots of files!)
- Updates the `*.e2e.ts-snapshots` directories to have the legacy format
name: `*.e2e-legacy.ts-snapshots`. The screenshot directory in
Playwright is generated based on the test file name which is why we are
updating the screenshot directory. When migrating tests to generators,
team members will rename the directory to remove the `-legacy` part.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
* fix(menu): add basic accessibility features
* fix(menu): add focus trapping
* test(menu): add test for focus trapping
* style(menu): lint fixes
* fix(menu): focus first element inside instead of whole menu
* test(menu): fix focus trap test to account for new behavior
* refactor(menu): pull focus handler into its own prop
* test(menu): add a11y testing
* fix(menu): prevent nested aria landmark from header inside menu
* fix(menu): revert switch to nav element
* fix(menu): remove unnecessary import from test
* fix(menu): allow for custom aria-label
* fix(menu): move nested ARIA role logic to header for flexibility
* fix(item): only add focusable class if it actually is focusable
* fix(menu): allow focusing of menu itself, for a11y on menus with no focusable children
* fix(item): move isFocusable logic to state for better reactivity
* perf(item): only grab one focusable child
* fix(menu): hide page content from screen readers when menu is open
* fix(menu): fallback to focusing host element
* docs(menu): add comments
Co-authored-by: Liam DeBeasi <liamdebeasi@icloud.com>
