Skip to content

feat(alert, toast): pass arbitrary HTML attributes to host element #23891

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 15, 2021
Merged

feat(alert, toast): pass arbitrary HTML attributes to host element #23891

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a451e6d
feat(alert, toast): role can now be customized
willmartian Sep 8, 2021
b058555
feat(alert, toast): add additionalAttributes prop
willmartian Sep 13, 2021
5a1e88c
test(alert): add e2e test
willmartian Sep 14, 2021
59c5dd2
test(alert, toast): update htmlAttributes test
willmartian Sep 14, 2021
ffaf4e4
fix(alert, toast): add interface to docs; remove labelledby and descr…
willmartian Sep 14, 2021
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: 2 additions & 0 deletions core/api.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ ion-alert,prop,keyboardClose,boolean,true,false,false
ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-alert,prop,message,IonicSafeString | string | undefined,undefined,false,false
ion-alert,prop,mode,"ios" | "md",undefined,false,false
ion-alert,prop,role,string | undefined,undefined,false,false
ion-alert,prop,subHeader,string | undefined,undefined,false,false
ion-alert,prop,translucent,boolean,false,false,false
ion-alert,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
Expand Down Expand Up @@ -1273,6 +1274,7 @@ ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefin
ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,false
ion-toast,prop,mode,"ios" | "md",undefined,false,false
ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
ion-toast,prop,role,string | undefined,undefined,false,false
ion-toast,prop,translucent,boolean,false,false,false
ion-toast,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
ion-toast,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
Expand Down
16 changes: 16 additions & 0 deletions core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,10 @@ export namespace Components {
* Present the alert overlay after it has been created.
*/
"present": () => Promise<void>;
/**
* The ARIA role of the alert. When unset, the role defaults to 'alertdialog' if the alert contains inputs and 'alert' if it does not.
*/
"role"?: string;
/**
* The subtitle in the heading of the alert. Displayed under the title.
*/
Expand Down Expand Up @@ -2598,6 +2602,10 @@ export namespace Components {
* Present the toast overlay after it has been created.
*/
"present": () => Promise<void>;
/**
* The ARIA role of the toast. When unset, the role defaults to 'dialog' if the toast contains buttons and 'status' if it does not.
*/
"role"?: string;
/**
* If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/
Expand Down Expand Up @@ -3446,6 +3454,10 @@ declare namespace LocalJSX {
*/
"onIonAlertWillPresent"?: (event: CustomEvent<void>) => void;
"overlayIndex": number;
/**
* The ARIA role of the alert. When unset, the role defaults to 'alertdialog' if the alert contains inputs and 'alert' if it does not.
*/
"role"?: string;
/**
* The subtitle in the heading of the alert. Displayed under the title.
*/
Expand Down Expand Up @@ -5931,6 +5943,10 @@ declare namespace LocalJSX {
* The position of the toast on the screen.
*/
"position"?: 'top' | 'bottom' | 'middle';
/**
* The ARIA role of the toast. When unset, the role defaults to 'dialog' if the toast contains buttons and 'status' if it does not.
*/
"role"?: string;
/**
* If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/
Expand Down
11 changes: 10 additions & 1 deletion core/src/components/alert/alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,12 @@ export class Alert implements ComponentInterface, OverlayInterface {
*/
@Prop() animated = true;

/**
* The ARIA role of the alert. When unset, the role defaults
* to 'alertdialog' if the alert contains inputs and 'alert' if it does not.
*/
@Prop() role?: string;

/**
* Emitted after the alert has presented.
*/
Expand Down Expand Up @@ -555,10 +561,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
const hdrId = `alert-${overlayIndex}-hdr`;
const subHdrId = `alert-${overlayIndex}-sub-hdr`;
const msgId = `alert-${overlayIndex}-msg`;
const role = this.role || (this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert');

return (
<Host
role="dialog"
role={role}
aria-labelledby={header !== undefined ? hdrId : null}
aria-describedby={msgId}
aria-modal="true"
tabindex="-1"
style={{
Expand Down
1 change: 1 addition & 0 deletions core/src/components/alert/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1773,6 +1773,7 @@ export default defineComponent({
| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `message` | `message` | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `role` | `role` | The ARIA role of the alert. When unset, the role defaults to 'alertdialog' if the alert contains inputs and 'alert' if it does not. | `string \| undefined` | `undefined` |
| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |

Expand Down
1 change: 1 addition & 0 deletions core/src/components/toast/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,6 +410,7 @@ export default defineComponent({
| `message` | `message` | Message to be shown in the toast. | `IonicSafeString \| string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` |
| `role` | `role` | The ARIA role of the toast. When unset, the role defaults to 'dialog' if the toast contains buttons and 'status' if it does not. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |


Expand Down
21 changes: 18 additions & 3 deletions core/src/components/toast/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,12 @@ export class Toast implements ComponentInterface, OverlayInterface {
*/
@Prop() animated = true;

/**
* The ARIA role of the toast. When unset, the role defaults
* to 'dialog' if the toast contains buttons and 'status' if it does not.
*/
@Prop() role?: string;

/**
* Emitted after the toast has presented.
*/
Expand Down Expand Up @@ -263,6 +269,9 @@ export class Toast implements ComponentInterface, OverlayInterface {
'toast-wrapper': true,
[`toast-${this.position}`]: true
};
const hdrId = `toast-${this.overlayIndex}-hdr`;
const msgId = `toast-${this.overlayIndex}-msg`;
const role = this.role || (allButtons.length > 0 ? 'dialog' : 'status');

return (
<Host
Expand All @@ -278,15 +287,21 @@ export class Toast implements ComponentInterface, OverlayInterface {
onIonToastWillDismiss={this.dispatchCancelHandler}
>
<div class={wrapperClass}>
<div class="toast-container" part="container">
<div
class="toast-container"
part="container"
role={role}
aria-labelledby={this.header !== undefined ? hdrId : null}
aria-describedby={this.message !== undefined ? msgId : null}
>
{this.renderButtons(startButtons, 'start')}

<div class="toast-content">
{this.header !== undefined &&
<div class="toast-header" part="header">{this.header}</div>
<div id={hdrId} class="toast-header" part="header">{this.header}</div>
}
{this.message !== undefined &&
<div class="toast-message" part="message" innerHTML={sanitizeDOMString(this.message)}></div>
<div id={msgId} class="toast-message" part="message" innerHTML={sanitizeDOMString(this.message)}></div>
}
</div>

Expand Down