@ionic/core 7.5.8-dev.11702398696.1ab62ea9 → 7.5.8-dev.11702664817.19cab605
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/button.js +2 -2
- package/components/ion-title.js +22 -1
- package/dist/cjs/ion-app_8.cjs.entry.js +22 -2
- package/dist/cjs/ion-button_2.cjs.entry.js +2 -2
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/button/button.ios.css +1 -1
- package/dist/collection/components/button/button.md.css +1 -1
- package/dist/collection/components/button/test/wrap/button.e2e.js +12 -24
- package/dist/collection/components/picker/picker.js +4 -1
- package/dist/collection/components/title/test/a11y/title.e2e.js +39 -0
- package/dist/collection/components/title/test/title.spec.js +132 -0
- package/dist/collection/components/title/title.js +22 -1
- package/dist/docs.json +2 -23
- package/dist/esm/ion-app_8.entry.js +22 -2
- package/dist/esm/ion-button_2.entry.js +2 -2
- package/dist/esm-es5/ion-app_8.entry.js +1 -1
- package/dist/esm-es5/ion-button_2.entry.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-6ad34705.system.entry.js → p-464975c5.system.entry.js} +1 -1
- package/dist/ionic/{p-0add7211.entry.js → p-4bee86bd.entry.js} +1 -1
- package/dist/ionic/p-b3d0a3d6.system.entry.js +4 -0
- package/dist/ionic/p-e3584231.system.js +1 -1
- package/dist/ionic/p-ea74e0c6.entry.js +4 -0
- package/dist/types/components/picker/picker.d.ts +3 -0
- package/dist/types/components.d.ts +0 -1
- package/hydrate/index.js +23 -3
- package/package.json +1 -1
- package/dist/ionic/p-3ba01a9c.system.entry.js +0 -4
- package/dist/ionic/p-fe4dde76.entry.js +0 -4
package/components/button.js
CHANGED
|
@@ -8,9 +8,9 @@ import { o as openURL, c as createColorClasses, h as hostContext } from './theme
|
|
|
8
8
|
import { b as getIonMode } from './ionic-global.js';
|
|
9
9
|
import { d as defineCustomElement$1 } from './ripple-effect.js';
|
|
10
10
|
|
|
11
|
-
const buttonIosCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;white-space:
|
|
11
|
+
const buttonIosCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #3880ff);--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted(ion-icon){font-size:1.35em;pointer-events:none}::slotted(ion-icon[slot=start]){-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=end]){-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=icon-only]){font-size:1.8em}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--color));color:var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff))}:host{--border-radius:14px;--padding-top:13px;--padding-bottom:13px;--padding-start:1em;--padding-end:1em;--transition:background-color, opacity 100ms linear;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:3.1em;font-size:min(1rem, 48px);font-weight:500;letter-spacing:0}:host(.button-solid){--background-activated:var(--ion-color-primary-shade, #3171e0);--background-focused:var(--ion-color-primary-shade, #3171e0);--background-hover:var(--ion-color-primary-tint, #4c8dff);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1}:host(.button-outline){--border-radius:14px;--border-width:1px;--border-style:solid;--background-activated:var(--ion-color-primary, #3880ff);--background-focused:var(--ion-color-primary, #3880ff);--background-hover:transparent;--background-focused-opacity:.1;--color-activated:var(--ion-color-primary-contrast, #fff)}:host(.button-clear){--background-activated:transparent;--background-activated-opacity:0;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:transparent;--background-focused-opacity:.1;font-size:min(1.0625rem, 51px);font-weight:normal}:host(.in-buttons){font-size:clamp(17px, 1.0625rem, 21.08px);font-weight:400}:host(.button-large){--border-radius:16px;--padding-top:17px;--padding-start:1em;--padding-end:1em;--padding-bottom:17px;min-height:3.1em;font-size:min(1.25rem, 60px)}:host(.button-small){--border-radius:6px;--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:min(0.8125rem, 39px)}:host(.button-has-icon-only){--padding-top:0;--padding-bottom:0}:host(.button-round){--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-strong){font-weight:600}:host(.button-outline.ion-focused.ion-color) .button-native,:host(.button-clear.ion-focused.ion-color) .button-native{color:var(--ion-color-base)}:host(.button-outline.ion-focused.ion-color) .button-native::after,:host(.button-clear.ion-focused.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-shade)}@media (any-hover: hover){:host(.button-clear:not(.ion-activated):hover),:host(.button-outline:not(.ion-activated):hover){opacity:0.6}:host(.button-clear.ion-color:hover) .button-native,:host(.button-outline.ion-color:hover) .button-native{color:var(--ion-color-base)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:transparent}:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-tint)}:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) .button-native::after{background:#fff;opacity:0.1}}:host(.button-clear.ion-activated){opacity:0.4}:host(.button-outline.ion-activated.ion-color) .button-native{color:var(--ion-color-contrast)}:host(.button-outline.ion-activated.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}";
|
|
12
12
|
|
|
13
|
-
const buttonMdCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;white-space:
|
|
13
|
+
const buttonMdCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #3880ff);--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted(ion-icon){font-size:1.35em;pointer-events:none}::slotted(ion-icon[slot=start]){-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=end]){-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=icon-only]){font-size:1.8em}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--color));color:var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff))}:host{--border-radius:4px;--padding-top:8px;--padding-bottom:8px;--padding-start:1.1em;--padding-end:1.1em;--transition:box-shadow 280ms cubic-bezier(.4, 0, .2, 1),\n background-color 15ms linear,\n color 15ms linear;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:36px;font-size:0.875rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase}:host(.button-solid){--background-activated:transparent;--background-hover:var(--ion-color-primary-contrast, #fff);--background-focused:var(--ion-color-primary-contrast, #fff);--background-activated-opacity:0;--background-focused-opacity:.24;--background-hover-opacity:.08;--box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}:host(.button-solid.ion-activated){--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)}:host(.button-outline){--border-width:2px;--border-style:solid;--box-shadow:none;--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:var(--ion-color-primary, #3880ff);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}:host(.button-outline.ion-activated.ion-color) .button-native{background:transparent}:host(.button-clear){--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:var(--ion-color-primary, #3880ff);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}:host(.button-round){--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-large){--padding-top:14px;--padding-start:1em;--padding-end:1em;--padding-bottom:14px;min-height:2.8em;font-size:1.25rem}:host(.button-small){--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:0.8125rem}:host(.button-has-icon-only){--padding-top:0;--padding-bottom:0}:host(.button-strong){font-weight:bold}::slotted(ion-icon[slot=icon-only]){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-contrast)}:host(.button-clear.ion-color.ion-focused) .button-native::after,:host(.button-outline.ion-color.ion-focused) .button-native::after{background:var(--ion-color-base)}@media (any-hover: hover){:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-contrast)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:var(--ion-color-base)}}";
|
|
14
14
|
|
|
15
15
|
const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
|
|
16
16
|
constructor() {
|
package/components/ion-title.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
4
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
5
|
+
import { d as doc } from './index5.js';
|
|
5
6
|
import { c as createColorClasses } from './theme.js';
|
|
6
7
|
import { b as getIonMode } from './ionic-global.js';
|
|
7
8
|
|
|
@@ -34,9 +35,29 @@ const ToolbarTitle = /*@__PURE__*/ proxyCustomElement(class ToolbarTitle extends
|
|
|
34
35
|
return this.size !== undefined ? this.size : 'default';
|
|
35
36
|
}
|
|
36
37
|
render() {
|
|
38
|
+
var _a;
|
|
39
|
+
const { el } = this;
|
|
37
40
|
const mode = getIonMode(this);
|
|
38
41
|
const size = this.getSize();
|
|
39
|
-
|
|
42
|
+
/**
|
|
43
|
+
* If there is already a level one heading
|
|
44
|
+
* within the context of the page then
|
|
45
|
+
* do not add another one.
|
|
46
|
+
*/
|
|
47
|
+
const root = (_a = el.closest('.ion-page')) !== null && _a !== void 0 ? _a : doc === null || doc === void 0 ? void 0 : doc.body;
|
|
48
|
+
const hasHeading = root === null || root === void 0 ? void 0 : root.querySelector('h1, [role="heading"][aria-level="1"]');
|
|
49
|
+
const hasRole = el.hasAttribute('role');
|
|
50
|
+
/**
|
|
51
|
+
* The first `ion-title` on the page is considered
|
|
52
|
+
* the heading. This can be customized by setting
|
|
53
|
+
* role="heading" aria-level="1" on another element
|
|
54
|
+
* or by using h1.
|
|
55
|
+
*
|
|
56
|
+
* Level 1 headings must be contained inside of a landmark,
|
|
57
|
+
* so we check for ion-header which is typically the landmark.
|
|
58
|
+
*/
|
|
59
|
+
const isHeading = hasRole === false && hasHeading === null && (root === null || root === void 0 ? void 0 : root.querySelector('ion-title')) === el && (el === null || el === void 0 ? void 0 : el.closest('ion-header[role]')) !== null;
|
|
60
|
+
return (h(Host, { role: isHeading ? 'heading' : null, "aria-level": isHeading ? '1' : null, class: createColorClasses(this.color, {
|
|
40
61
|
[mode]: true,
|
|
41
62
|
[`title-${size}`]: true,
|
|
42
63
|
'title-rtl': document.dir === 'rtl',
|
|
@@ -16,8 +16,8 @@ const cubicBezier = require('./cubic-bezier-f2dccc53.js');
|
|
|
16
16
|
const frameworkDelegate = require('./framework-delegate-1c29b14a.js');
|
|
17
17
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
18
18
|
const index$2 = require('./index-d4c2e02c.js');
|
|
19
|
+
const index$3 = require('./index-306a7476.js');
|
|
19
20
|
require('./index-5915f9b3.js');
|
|
20
|
-
require('./index-306a7476.js');
|
|
21
21
|
require('./keyboard-9390928c.js');
|
|
22
22
|
require('./capacitor-46980811.js');
|
|
23
23
|
|
|
@@ -1196,9 +1196,29 @@ const ToolbarTitle = class {
|
|
|
1196
1196
|
return this.size !== undefined ? this.size : 'default';
|
|
1197
1197
|
}
|
|
1198
1198
|
render() {
|
|
1199
|
+
var _a;
|
|
1200
|
+
const { el } = this;
|
|
1199
1201
|
const mode = ionicGlobal.getIonMode(this);
|
|
1200
1202
|
const size = this.getSize();
|
|
1201
|
-
|
|
1203
|
+
/**
|
|
1204
|
+
* If there is already a level one heading
|
|
1205
|
+
* within the context of the page then
|
|
1206
|
+
* do not add another one.
|
|
1207
|
+
*/
|
|
1208
|
+
const root = (_a = el.closest('.ion-page')) !== null && _a !== void 0 ? _a : index$3.doc === null || index$3.doc === void 0 ? void 0 : index$3.doc.body;
|
|
1209
|
+
const hasHeading = root === null || root === void 0 ? void 0 : root.querySelector('h1, [role="heading"][aria-level="1"]');
|
|
1210
|
+
const hasRole = el.hasAttribute('role');
|
|
1211
|
+
/**
|
|
1212
|
+
* The first `ion-title` on the page is considered
|
|
1213
|
+
* the heading. This can be customized by setting
|
|
1214
|
+
* role="heading" aria-level="1" on another element
|
|
1215
|
+
* or by using h1.
|
|
1216
|
+
*
|
|
1217
|
+
* Level 1 headings must be contained inside of a landmark,
|
|
1218
|
+
* so we check for ion-header which is typically the landmark.
|
|
1219
|
+
*/
|
|
1220
|
+
const isHeading = hasRole === false && hasHeading === null && (root === null || root === void 0 ? void 0 : root.querySelector('ion-title')) === el && (el === null || el === void 0 ? void 0 : el.closest('ion-header[role]')) !== null;
|
|
1221
|
+
return (index.h(index.Host, { role: isHeading ? 'heading' : null, "aria-level": isHeading ? '1' : null, class: theme.createColorClasses(this.color, {
|
|
1202
1222
|
[mode]: true,
|
|
1203
1223
|
[`title-${size}`]: true,
|
|
1204
1224
|
'title-rtl': document.dir === 'rtl',
|
|
@@ -131,9 +131,9 @@ const isRTL = (hostEl) => {
|
|
|
131
131
|
return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl';
|
|
132
132
|
};
|
|
133
133
|
|
|
134
|
-
const buttonIosCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;white-space:
|
|
134
|
+
const buttonIosCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #3880ff);--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted(ion-icon){font-size:1.35em;pointer-events:none}::slotted(ion-icon[slot=start]){-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=end]){-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=icon-only]){font-size:1.8em}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--color));color:var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff))}:host{--border-radius:14px;--padding-top:13px;--padding-bottom:13px;--padding-start:1em;--padding-end:1em;--transition:background-color, opacity 100ms linear;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:3.1em;font-size:min(1rem, 48px);font-weight:500;letter-spacing:0}:host(.button-solid){--background-activated:var(--ion-color-primary-shade, #3171e0);--background-focused:var(--ion-color-primary-shade, #3171e0);--background-hover:var(--ion-color-primary-tint, #4c8dff);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1}:host(.button-outline){--border-radius:14px;--border-width:1px;--border-style:solid;--background-activated:var(--ion-color-primary, #3880ff);--background-focused:var(--ion-color-primary, #3880ff);--background-hover:transparent;--background-focused-opacity:.1;--color-activated:var(--ion-color-primary-contrast, #fff)}:host(.button-clear){--background-activated:transparent;--background-activated-opacity:0;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:transparent;--background-focused-opacity:.1;font-size:min(1.0625rem, 51px);font-weight:normal}:host(.in-buttons){font-size:clamp(17px, 1.0625rem, 21.08px);font-weight:400}:host(.button-large){--border-radius:16px;--padding-top:17px;--padding-start:1em;--padding-end:1em;--padding-bottom:17px;min-height:3.1em;font-size:min(1.25rem, 60px)}:host(.button-small){--border-radius:6px;--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:min(0.8125rem, 39px)}:host(.button-has-icon-only){--padding-top:0;--padding-bottom:0}:host(.button-round){--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-strong){font-weight:600}:host(.button-outline.ion-focused.ion-color) .button-native,:host(.button-clear.ion-focused.ion-color) .button-native{color:var(--ion-color-base)}:host(.button-outline.ion-focused.ion-color) .button-native::after,:host(.button-clear.ion-focused.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-shade)}@media (any-hover: hover){:host(.button-clear:not(.ion-activated):hover),:host(.button-outline:not(.ion-activated):hover){opacity:0.6}:host(.button-clear.ion-color:hover) .button-native,:host(.button-outline.ion-color:hover) .button-native{color:var(--ion-color-base)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:transparent}:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-tint)}:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) .button-native::after{background:#fff;opacity:0.1}}:host(.button-clear.ion-activated){opacity:0.4}:host(.button-outline.ion-activated.ion-color) .button-native{color:var(--ion-color-contrast)}:host(.button-outline.ion-activated.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}";
|
|
135
135
|
|
|
136
|
-
const buttonMdCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;white-space:
|
|
136
|
+
const buttonMdCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-solid){--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #3880ff);--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-clear){--border-width:0;--background:transparent;--color:var(--ion-color-primary, #3880ff)}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted(ion-icon){font-size:1.35em;pointer-events:none}::slotted(ion-icon[slot=start]){-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=end]){-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=icon-only]){font-size:1.8em}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-base)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--color));color:var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff))}:host{--border-radius:4px;--padding-top:8px;--padding-bottom:8px;--padding-start:1.1em;--padding-end:1.1em;--transition:box-shadow 280ms cubic-bezier(.4, 0, .2, 1),\n background-color 15ms linear,\n color 15ms linear;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:36px;font-size:0.875rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase}:host(.button-solid){--background-activated:transparent;--background-hover:var(--ion-color-primary-contrast, #fff);--background-focused:var(--ion-color-primary-contrast, #fff);--background-activated-opacity:0;--background-focused-opacity:.24;--background-hover-opacity:.08;--box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}:host(.button-solid.ion-activated){--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)}:host(.button-outline){--border-width:2px;--border-style:solid;--box-shadow:none;--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:var(--ion-color-primary, #3880ff);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}:host(.button-outline.ion-activated.ion-color) .button-native{background:transparent}:host(.button-clear){--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:var(--ion-color-primary, #3880ff);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}:host(.button-round){--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}:host(.button-large){--padding-top:14px;--padding-start:1em;--padding-end:1em;--padding-bottom:14px;min-height:2.8em;font-size:1.25rem}:host(.button-small){--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:0.8125rem}:host(.button-has-icon-only){--padding-top:0;--padding-bottom:0}:host(.button-strong){font-weight:bold}::slotted(ion-icon[slot=icon-only]){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-contrast)}:host(.button-clear.ion-color.ion-focused) .button-native::after,:host(.button-outline.ion-color.ion-focused) .button-native::after{background:var(--ion-color-base)}@media (any-hover: hover){:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-contrast)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:var(--ion-color-base)}}";
|
|
137
137
|
|
|
138
138
|
const Button = class {
|
|
139
139
|
constructor(hostRef) {
|
|
@@ -89,9 +89,9 @@
|
|
|
89
89
|
"components/textarea/textarea.js",
|
|
90
90
|
"components/thumbnail/thumbnail.js",
|
|
91
91
|
"components/title/title.js",
|
|
92
|
+
"components/toolbar/toolbar.js",
|
|
92
93
|
"components/toast/toast.js",
|
|
93
|
-
"components/toggle/toggle.js"
|
|
94
|
-
"components/toolbar/toolbar.js"
|
|
94
|
+
"components/toggle/toggle.js"
|
|
95
95
|
],
|
|
96
96
|
"compiler": {
|
|
97
97
|
"name": "@stencil/core",
|
|
@@ -6,33 +6,29 @@ import { configs, test } from "../../../../utils/test/playwright/index";
|
|
|
6
6
|
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
|
7
7
|
test.describe(title('button: wrap'), () => {
|
|
8
8
|
test('should render button with long text', async ({ page }) => {
|
|
9
|
-
// TODO(FW-4599): remove ion-text-wrap class
|
|
10
9
|
await page.setContent(`
|
|
11
|
-
<ion-button
|
|
10
|
+
<ion-button>This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
|
|
12
11
|
`, config);
|
|
13
12
|
const button = page.locator('ion-button');
|
|
14
13
|
await expect(button).toHaveScreenshot(screenshot(`button-wrap`));
|
|
15
14
|
});
|
|
16
15
|
test('should render small button with long text', async ({ page }) => {
|
|
17
|
-
// TODO(FW-4599): remove ion-text-wrap class
|
|
18
16
|
await page.setContent(`
|
|
19
|
-
<ion-button
|
|
17
|
+
<ion-button size="small">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
|
|
20
18
|
`, config);
|
|
21
19
|
const button = page.locator('ion-button');
|
|
22
20
|
await expect(button).toHaveScreenshot(screenshot(`button-wrap-small`));
|
|
23
21
|
});
|
|
24
22
|
test('should render large button with long text', async ({ page }) => {
|
|
25
|
-
// TODO(FW-4599): remove ion-text-wrap class
|
|
26
23
|
await page.setContent(`
|
|
27
|
-
<ion-button
|
|
24
|
+
<ion-button size="large">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
|
|
28
25
|
`, config);
|
|
29
26
|
const button = page.locator('ion-button');
|
|
30
27
|
await expect(button).toHaveScreenshot(screenshot(`button-wrap-large`));
|
|
31
28
|
});
|
|
32
29
|
test('should render button with long text and icons', async ({ page }) => {
|
|
33
|
-
// TODO(FW-4599): remove ion-text-wrap class
|
|
34
30
|
await page.setContent(`
|
|
35
|
-
<ion-button
|
|
31
|
+
<ion-button>
|
|
36
32
|
<ion-icon slot="start" name="heart"></ion-icon>
|
|
37
33
|
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
|
|
38
34
|
<ion-icon slot="end" name="star"></ion-icon>
|
|
@@ -42,17 +38,15 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
|
|
42
38
|
await expect(button).toHaveScreenshot(screenshot(`button-wrap-icons`));
|
|
43
39
|
});
|
|
44
40
|
test('should render block button with long text', async ({ page }) => {
|
|
45
|
-
// TODO(FW-4599): remove ion-text-wrap class
|
|
46
41
|
await page.setContent(`
|
|
47
|
-
<ion-button
|
|
42
|
+
<ion-button expand="block">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
|
|
48
43
|
`, config);
|
|
49
44
|
const button = page.locator('ion-button');
|
|
50
45
|
await expect(button).toHaveScreenshot(screenshot(`button-wrap-block`));
|
|
51
46
|
});
|
|
52
47
|
test('should render block button with long text and icons', async ({ page }) => {
|
|
53
|
-
// TODO(FW-4599): remove ion-text-wrap class
|
|
54
48
|
await page.setContent(`
|
|
55
|
-
<ion-button
|
|
49
|
+
<ion-button expand="block">
|
|
56
50
|
<ion-icon slot="start" name="heart"></ion-icon>
|
|
57
51
|
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
|
|
58
52
|
<ion-icon slot="end" name="star"></ion-icon>
|
|
@@ -62,17 +56,15 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
|
|
62
56
|
await expect(button).toHaveScreenshot(screenshot(`button-wrap-block-icons`));
|
|
63
57
|
});
|
|
64
58
|
test('should render full button with long text', async ({ page }) => {
|
|
65
|
-
// TODO(FW-4599): remove ion-text-wrap class
|
|
66
59
|
await page.setContent(`
|
|
67
|
-
<ion-button
|
|
60
|
+
<ion-button expand="full">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
|
|
68
61
|
`, config);
|
|
69
62
|
const button = page.locator('ion-button');
|
|
70
63
|
await expect(button).toHaveScreenshot(screenshot(`button-wrap-full`));
|
|
71
64
|
});
|
|
72
65
|
test('should render full button with long text and icons', async ({ page }) => {
|
|
73
|
-
// TODO(FW-4599): remove ion-text-wrap class
|
|
74
66
|
await page.setContent(`
|
|
75
|
-
<ion-button
|
|
67
|
+
<ion-button expand="full">
|
|
76
68
|
<ion-icon slot="start" name="heart"></ion-icon>
|
|
77
69
|
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
|
|
78
70
|
<ion-icon slot="end" name="star"></ion-icon>
|
|
@@ -82,10 +74,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
|
|
82
74
|
await expect(button).toHaveScreenshot(screenshot(`button-wrap-full-icons`));
|
|
83
75
|
});
|
|
84
76
|
test('should render an item button with long text', async ({ page }) => {
|
|
85
|
-
// TODO(FW-4599): remove ion-text-wrap class
|
|
86
77
|
await page.setContent(`
|
|
87
78
|
<ion-item>
|
|
88
|
-
<ion-button
|
|
79
|
+
<ion-button slot="end">
|
|
89
80
|
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
|
|
90
81
|
</ion-button>
|
|
91
82
|
</ion-item>
|
|
@@ -94,10 +85,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
|
|
94
85
|
await expect(item).toHaveScreenshot(screenshot(`button-wrap-item-button`));
|
|
95
86
|
});
|
|
96
87
|
test('should render an item button with long text and icons', async ({ page }) => {
|
|
97
|
-
// TODO(FW-4599): remove ion-text-wrap class
|
|
98
88
|
await page.setContent(`
|
|
99
89
|
<ion-item>
|
|
100
|
-
<ion-button
|
|
90
|
+
<ion-button slot="end">
|
|
101
91
|
<ion-icon slot="start" name="heart"></ion-icon>
|
|
102
92
|
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
|
|
103
93
|
<ion-icon slot="end" name="star"></ion-icon>
|
|
@@ -108,11 +98,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
|
|
108
98
|
await expect(item).toHaveScreenshot(screenshot(`button-wrap-item-button-icons`));
|
|
109
99
|
});
|
|
110
100
|
test('should render a list header button with long text', async ({ page }) => {
|
|
111
|
-
// TODO(FW-4599): remove ion-text-wrap class
|
|
112
101
|
await page.setContent(`
|
|
113
102
|
<ion-list-header>
|
|
114
103
|
<ion-label>List Header</ion-label>
|
|
115
|
-
<ion-button
|
|
104
|
+
<ion-button>
|
|
116
105
|
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
|
|
117
106
|
</ion-button>
|
|
118
107
|
</ion-list-header>
|
|
@@ -121,11 +110,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
|
|
121
110
|
await expect(listHeader).toHaveScreenshot(screenshot(`button-wrap-list-header-button`));
|
|
122
111
|
});
|
|
123
112
|
test('should render a toolbar button with long text', async ({ page }) => {
|
|
124
|
-
// TODO(FW-4599): remove ion-text-wrap class
|
|
125
113
|
await page.setContent(`
|
|
126
114
|
<ion-toolbar>
|
|
127
115
|
<ion-buttons slot="end">
|
|
128
|
-
<ion-button
|
|
116
|
+
<ion-button>
|
|
129
117
|
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
|
|
130
118
|
</ion-button>
|
|
131
119
|
</ion-buttons>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
|
+
import AxeBuilder from "@axe-core/playwright";
|
|
4
5
|
import { expect } from "@playwright/test";
|
|
5
6
|
import { configs, test } from "../../../../utils/test/playwright/index";
|
|
6
7
|
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
|
@@ -59,3 +60,41 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
|
|
|
59
60
|
});
|
|
60
61
|
});
|
|
61
62
|
});
|
|
63
|
+
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
|
64
|
+
test.describe(title('title: level 1 heading'), () => {
|
|
65
|
+
test('should not have accessibility violations', async ({ page }) => {
|
|
66
|
+
/**
|
|
67
|
+
* Level 1 headings must be inside of a landmark (ion-header)
|
|
68
|
+
*/
|
|
69
|
+
await page.setContent(`
|
|
70
|
+
<ion-header>
|
|
71
|
+
<ion-toolbar>
|
|
72
|
+
<ion-title>My Title</ion-title>
|
|
73
|
+
</ion-toolbar>
|
|
74
|
+
</ion-header>
|
|
75
|
+
`, config);
|
|
76
|
+
const results = await new AxeBuilder({ page }).analyze();
|
|
77
|
+
expect(results.violations).toEqual([]);
|
|
78
|
+
});
|
|
79
|
+
test('should not have accessibility violations with multiple h1 elements on a hidden page', async ({ page }) => {
|
|
80
|
+
await page.setContent(`
|
|
81
|
+
<div class="ion-page ion-page-hidden">
|
|
82
|
+
<ion-header>
|
|
83
|
+
<ion-toolbar>
|
|
84
|
+
<ion-title>My Title</ion-title>
|
|
85
|
+
</ion-toolbar>
|
|
86
|
+
</ion-header>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="ion-page">
|
|
89
|
+
<ion-header>
|
|
90
|
+
<ion-toolbar>
|
|
91
|
+
<ion-title>My Title</ion-title>
|
|
92
|
+
</ion-toolbar>
|
|
93
|
+
</ion-header>
|
|
94
|
+
</div>
|
|
95
|
+
`, config);
|
|
96
|
+
const results = await new AxeBuilder({ page }).analyze();
|
|
97
|
+
expect(results.violations).toEqual([]);
|
|
98
|
+
});
|
|
99
|
+
});
|
|
100
|
+
});
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
+
*/
|
|
4
|
+
import { newSpecPage } from "@stencil/core/testing";
|
|
5
|
+
import { Header } from "../../header/header";
|
|
6
|
+
import { Toolbar } from "../../toolbar/toolbar";
|
|
7
|
+
import { ToolbarTitle } from "../title";
|
|
8
|
+
describe('title: a11y', () => {
|
|
9
|
+
it('should add heading level 1 attributes when inside of a landmark', async () => {
|
|
10
|
+
const page = await newSpecPage({
|
|
11
|
+
components: [Header, Toolbar, ToolbarTitle],
|
|
12
|
+
html: `
|
|
13
|
+
<ion-header>
|
|
14
|
+
<ion-toolbar>
|
|
15
|
+
<ion-title>Title</ion-title>
|
|
16
|
+
</ion-toolbar>
|
|
17
|
+
</ion-header>
|
|
18
|
+
`,
|
|
19
|
+
});
|
|
20
|
+
const title = page.body.querySelector('ion-title');
|
|
21
|
+
expect(title.getAttribute('role')).toBe('heading');
|
|
22
|
+
expect(title.getAttribute('aria-level')).toBe('1');
|
|
23
|
+
});
|
|
24
|
+
it('should not override a custom role', async () => {
|
|
25
|
+
const page = await newSpecPage({
|
|
26
|
+
components: [Header, Toolbar, ToolbarTitle],
|
|
27
|
+
html: `
|
|
28
|
+
<ion-header>
|
|
29
|
+
<ion-toolbar>
|
|
30
|
+
<ion-title role="article">Title 1</ion-title>
|
|
31
|
+
</ion-toolbar>
|
|
32
|
+
</ion-header>
|
|
33
|
+
`,
|
|
34
|
+
});
|
|
35
|
+
const title = page.body.querySelector('ion-title');
|
|
36
|
+
expect(title.getAttribute('role')).toBe('article');
|
|
37
|
+
expect(title.hasAttribute('aria-level')).toBe(false);
|
|
38
|
+
});
|
|
39
|
+
it('should not add heading level 1 attributes when outside of a landmark', async () => {
|
|
40
|
+
const page = await newSpecPage({
|
|
41
|
+
components: [Header, Toolbar, ToolbarTitle],
|
|
42
|
+
html: `
|
|
43
|
+
<ion-title>Title</ion-title>
|
|
44
|
+
`,
|
|
45
|
+
});
|
|
46
|
+
const title = page.body.querySelector('ion-title');
|
|
47
|
+
expect(title.hasAttribute('role')).toBe(false);
|
|
48
|
+
expect(title.hasAttribute('aria-level')).toBe(false);
|
|
49
|
+
});
|
|
50
|
+
it('at most one ion-title should have level 1 attributes', async () => {
|
|
51
|
+
const page = await newSpecPage({
|
|
52
|
+
components: [Header, Toolbar, ToolbarTitle],
|
|
53
|
+
html: `
|
|
54
|
+
<ion-header>
|
|
55
|
+
<ion-toolbar>
|
|
56
|
+
<ion-title>Title 1</ion-title>
|
|
57
|
+
</ion-toolbar>
|
|
58
|
+
</ion-header>
|
|
59
|
+
<ion-header>
|
|
60
|
+
<ion-toolbar>
|
|
61
|
+
<ion-title>Title 2</ion-title>
|
|
62
|
+
</ion-toolbar>
|
|
63
|
+
</ion-header>
|
|
64
|
+
`,
|
|
65
|
+
});
|
|
66
|
+
const titles = page.body.querySelectorAll('ion-title');
|
|
67
|
+
expect(titles[0].getAttribute('role')).toBe('heading');
|
|
68
|
+
expect(titles[0].getAttribute('aria-level')).toBe('1');
|
|
69
|
+
expect(titles[1].hasAttribute('role')).toBe(false);
|
|
70
|
+
expect(titles[1].hasAttribute('aria-level')).toBe(false);
|
|
71
|
+
});
|
|
72
|
+
it('should not add level 1 attributes if other level 1 headings exist', async () => {
|
|
73
|
+
const page = await newSpecPage({
|
|
74
|
+
components: [Header, Toolbar, ToolbarTitle],
|
|
75
|
+
html: `
|
|
76
|
+
<h1>Title</h1>
|
|
77
|
+
<ion-header>
|
|
78
|
+
<ion-toolbar>
|
|
79
|
+
<ion-title>Title 1</ion-title>
|
|
80
|
+
</ion-toolbar>
|
|
81
|
+
</ion-header>
|
|
82
|
+
`,
|
|
83
|
+
});
|
|
84
|
+
const title = page.body.querySelector('ion-title');
|
|
85
|
+
expect(title.hasAttribute('role')).toBe(false);
|
|
86
|
+
expect(title.hasAttribute('aria-level')).toBe(false);
|
|
87
|
+
});
|
|
88
|
+
it('should not add level 1 attributes if other level 1 attributes exist', async () => {
|
|
89
|
+
const page = await newSpecPage({
|
|
90
|
+
components: [Header, Toolbar, ToolbarTitle],
|
|
91
|
+
html: `
|
|
92
|
+
<div role="heading" aria-level="1">Title</div>
|
|
93
|
+
<ion-header>
|
|
94
|
+
<ion-toolbar>
|
|
95
|
+
<ion-title>Title 1</ion-title>
|
|
96
|
+
</ion-toolbar>
|
|
97
|
+
</ion-header>
|
|
98
|
+
`,
|
|
99
|
+
});
|
|
100
|
+
const title = page.body.querySelector('ion-title');
|
|
101
|
+
expect(title.hasAttribute('role')).toBe(false);
|
|
102
|
+
expect(title.hasAttribute('aria-level')).toBe(false);
|
|
103
|
+
});
|
|
104
|
+
it('should have level 1 attributes even if there is a level 1 heading on another page', async () => {
|
|
105
|
+
const page = await newSpecPage({
|
|
106
|
+
components: [Header, Toolbar, ToolbarTitle],
|
|
107
|
+
html: `
|
|
108
|
+
<div class="ion-page">
|
|
109
|
+
<ion-header>
|
|
110
|
+
<ion-toolbar>
|
|
111
|
+
<ion-title>Title 1</ion-title>
|
|
112
|
+
</ion-toolbar>
|
|
113
|
+
</ion-header>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div class="ion-page">
|
|
117
|
+
<ion-header>
|
|
118
|
+
<ion-toolbar>
|
|
119
|
+
<ion-title>Title 2</ion-title>
|
|
120
|
+
</ion-toolbar>
|
|
121
|
+
</ion-header>
|
|
122
|
+
</div>
|
|
123
|
+
`,
|
|
124
|
+
});
|
|
125
|
+
const pages = page.body.querySelectorAll('.ion-page');
|
|
126
|
+
pages.forEach((page) => {
|
|
127
|
+
const title = page.querySelector('ion-title');
|
|
128
|
+
expect(title.getAttribute('role')).toBe('heading');
|
|
129
|
+
expect(title.getAttribute('aria-level')).toBe('1');
|
|
130
|
+
});
|
|
131
|
+
});
|
|
132
|
+
});
|