Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/assign-issues.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,6 @@ jobs:
- name: 'Auto-assign issue'
uses: pozil/auto-assign-issue@39c06395cbac76e79afc4ad4e5c5c6db6ecfdd2e # v2.2.0
with:
assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
assignees: brandyscarney, thetaPC, ShaneK
numOfAssignee: 1
allowSelfAssign: false
66 changes: 35 additions & 31 deletions core/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,10 @@
},
"devDependencies": {
"@axe-core/playwright": "^4.10.0",
"@capacitor/core": "^6.0.0",
"@capacitor/haptics": "^6.0.0",
"@capacitor/keyboard": "^6.0.0",
"@capacitor/status-bar": "^6.0.0",
"@capacitor/core": "^7.0.0",
"@capacitor/haptics": "^7.0.0",
"@capacitor/keyboard": "^7.0.0",
"@capacitor/status-bar": "^7.0.0",
"@clack/prompts": "^0.10.0",
"@ionic/eslint-config": "^0.3.0",
"@ionic/prettier-config": "^2.0.0",
Expand Down
44 changes: 36 additions & 8 deletions core/src/components/alert/alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,18 @@ export class Alert implements ComponentInterface, OverlayInterface {
return;
}

/**
* Ensure when alert container is being focused, and the user presses the tab + shift keys, the focus will be set to the last alert button.
*/
if (ev.target.classList.contains('alert-wrapper')) {
if (ev.key === 'Tab' && ev.shiftKey) {
ev.preventDefault();
const lastChildBtn = this.wrapperEl?.querySelector('.alert-button:last-child') as HTMLButtonElement;
lastChildBtn.focus();
return;
}
}

// The only inputs we want to navigate between using arrow keys are the radios
// ignore the keydown event if it is not on a radio button
if (
Expand Down Expand Up @@ -400,7 +412,19 @@ export class Alert implements ComponentInterface, OverlayInterface {

await this.delegateController.attachViewToDom();

await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation).then(() => {
/**
* Check if alert has only one button and no inputs.
* If so, then focus on the button. Otherwise, focus the alert wrapper.
* This will map to the default native alert behavior.
*/
if (this.buttons.length === 1 && this.inputs.length === 0) {
const queryBtn = this.wrapperEl?.querySelector('.alert-button') as HTMLButtonElement;
queryBtn.focus();
} else {
this.wrapperEl?.focus();
}
});

unlock();
}
Expand Down Expand Up @@ -725,8 +749,8 @@ export class Alert implements ComponentInterface, OverlayInterface {
const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
const mode = getIonMode(this);
const hdrId = `alert-${overlayIndex}-hdr`;
const subHdrId = `alert-${overlayIndex}-sub-hdr`;
const msgId = `alert-${overlayIndex}-msg`;
const subHdrId = `alert-${overlayIndex}-sub-hdr`;
const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert';

/**
Expand All @@ -739,12 +763,7 @@ export class Alert implements ComponentInterface, OverlayInterface {

return (
<Host
role={role}
aria-modal="true"
aria-labelledby={ariaLabelledBy}
aria-describedby={message !== undefined ? msgId : null}
tabindex="-1"
{...(htmlAttributes as any)}
style={{
zIndex: `${20000 + overlayIndex}`,
}}
Expand All @@ -761,7 +780,16 @@ export class Alert implements ComponentInterface, OverlayInterface {

<div tabindex="0" aria-hidden="true"></div>

<div class="alert-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
<div
class="alert-wrapper ion-overlay-wrapper"
role={role}
aria-modal="true"
aria-labelledby={ariaLabelledBy}
aria-describedby={message !== undefined ? msgId : null}
tabindex="0"
ref={(el) => (this.wrapperEl = el)}
{...(htmlAttributes as any)}
>
<div class="alert-head">
{header && (
<h2 id={hdrId} class="alert-title">
Expand Down
5 changes: 3 additions & 2 deletions core/src/components/alert/test/a11y/alert.e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const testAria = async (
await didPresent.next();

const alert = page.locator('ion-alert');
const alertwrapper = alert.locator('.alert-wrapper');

const header = alert.locator('.alert-title');
const subHeader = alert.locator('.alert-sub-title');
Expand All @@ -42,8 +43,8 @@ const testAria = async (
* expect().toHaveAttribute() can't check for a null value, so grab and check
* the values manually instead.
*/
const ariaLabelledBy = await alert.getAttribute('aria-labelledby');
const ariaDescribedBy = await alert.getAttribute('aria-describedby');
const ariaLabelledBy = await alertwrapper.getAttribute('aria-labelledby');
const ariaDescribedBy = await alertwrapper.getAttribute('aria-describedby');

expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
expect(ariaDescribedBy).toBe(expectedAriaDescribedBy);
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions core/src/components/alert/test/alert-id.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { h } from '@stencil/core';
import { newSpecPage } from '@stencil/core/testing';

import { Alert } from '../alert';
import { h } from '@stencil/core';

describe('alert: id', () => {
it('alert should be assigned an incrementing id', async () => {
Expand Down Expand Up @@ -49,7 +49,7 @@ describe('alert: id', () => {
template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>,
});

const alert = page.body.querySelector('ion-alert')!;
expect(alert.id).toBe(id);
const alertwrapper = page.body.querySelector('.alert-wrapper')!;
expect(alertwrapper.id).toBe(id);
});
});
3 changes: 2 additions & 1 deletion core/src/components/alert/test/basic/alert.e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
await page.keyboard.press(tabKey);
await expect(alertBtns.nth(0)).toBeFocused();

await page.keyboard.press(`Shift+${tabKey}`); // this will focus the alert-wrapper
await page.keyboard.press(`Shift+${tabKey}`);
await expect(alertBtns.nth(2)).toBeFocused();

Expand All @@ -30,7 +31,7 @@ configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
const alertFixture = new AlertFixture(page, screenshot);

const alert = await alertFixture.open('#basic');
await expect(alert).toHaveAttribute('data-testid', 'basic-alert');
await expect(alert.locator('.alert-wrapper')).toHaveAttribute('data-testid', 'basic-alert');
});

test('should dismiss when async handler resolves', async ({ page }) => {
Expand Down
25 changes: 22 additions & 3 deletions core/src/components/range/range.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
import type { Attributes } from '@utils/helpers';
import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput } from '@utils/helpers';
import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput, isSafeNumber } from '@utils/helpers';
import { printIonWarning } from '@utils/logging';
import { isRTL } from '@utils/rtl';
import { createColorClasses, hostContext } from '@utils/theme';
Expand Down Expand Up @@ -109,7 +109,11 @@ export class Range implements ComponentInterface {
*/
@Prop() min = 0;
@Watch('min')
protected minChanged() {
protected minChanged(newValue: number) {
if (!isSafeNumber(newValue)) {
this.min = 0;
}

if (!this.noUpdate) {
this.updateRatio();
}
Expand All @@ -120,7 +124,11 @@ export class Range implements ComponentInterface {
*/
@Prop() max = 100;
@Watch('max')
protected maxChanged() {
protected maxChanged(newValue: number) {
if (!isSafeNumber(newValue)) {
this.max = 100;
}

if (!this.noUpdate) {
this.updateRatio();
}
Expand Down Expand Up @@ -151,6 +159,12 @@ export class Range implements ComponentInterface {
* Specifies the value granularity.
*/
@Prop() step = 1;
@Watch('step')
protected stepChanged(newValue: number) {
if (!isSafeNumber(newValue)) {
this.step = 1;
}
}

/**
* If `true`, tick marks are displayed based on the step value.
Expand Down Expand Up @@ -300,6 +314,11 @@ export class Range implements ComponentInterface {
}

this.inheritedAttributes = inheritAriaAttributes(this.el);
// If min, max, or step are not safe, set them to 0, 100, and 1, respectively.
// Each watch does this, but not before the initial load.
this.min = isSafeNumber(this.min) ? this.min : 0;
this.max = isSafeNumber(this.max) ? this.max : 100;
this.step = isSafeNumber(this.step) ? this.step : 1;
}

componentDidLoad() {
Expand Down
19 changes: 19 additions & 0 deletions core/src/components/range/test/range.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,25 @@ describe('Range', () => {
});
});

it('should handle undefined min and max values by falling back to defaults', async () => {
const page = await newSpecPage({
components: [Range],
html: `<ion-range id="my-custom-range">
<div slot="label">Range</div>
</ion-range>`,
});

const range = page.body.querySelector('ion-range')!;
// Here we have to cast this to any, but in its react wrapper it accepts undefined as a valid value
range.min = undefined as any;
range.max = undefined as any;
range.step = undefined as any;
await page.waitForChanges();
expect(range.min).toBe(0);
expect(range.max).toBe(100);
expect(range.step).toBe(1);
});

it('should return the clamped value for a range dual knob component', () => {
sharedRange.min = 0;
sharedRange.max = 100;
Expand Down
1 change: 1 addition & 0 deletions core/src/components/toggle/toggle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ export class Toggle implements ComponentInterface {
const isNowChecked = !checked;
this.checked = isNowChecked;

this.setFocus();
this.ionChange.emit({
checked: isNowChecked,
value,
Expand Down
12 changes: 12 additions & 0 deletions core/src/utils/floating-point/floating-point.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,24 @@ describe('floating point utils', () => {
const n = getDecimalPlaces(5);
expect(n).toBe(0);
});

it('should handle nullish values', () => {
expect(getDecimalPlaces(undefined as any)).toBe(0);
expect(getDecimalPlaces(null as any)).toBe(0);
expect(getDecimalPlaces(NaN as any)).toBe(0);
});
});

describe('roundToMaxDecimalPlaces', () => {
it('should round to the highest number of places as references', async () => {
const n = roundToMaxDecimalPlaces(5.12345, 1.12, 2.123);
expect(n).toBe(5.123);
});

it('should handle nullish values', () => {
expect(roundToMaxDecimalPlaces(undefined as any)).toBe(0);
expect(roundToMaxDecimalPlaces(null as any)).toBe(0);
expect(roundToMaxDecimalPlaces(NaN as any)).toBe(0);
});
});
});
Loading
Loading