feat(toast): add htmlAttributes property for passing attributes to buttons (#27855)

Issue number: N/A

---------

## What is the current behavior?
Buttons containing only icons are not accessible as there is no way to
pass an `aria-label` attribute (or any other html attribute).

## What is the new behavior?
- Adds the `htmlAttributes` property on the `ToastButton` interface 
- Passes the `htmlAttributes` to the buttons
- Adds a test to verify `aria-label` and `aria-labelled-by` are passed
to the button

## Does this introduce a breaking change?

- [ ] Yes
- [x] No
This commit is contained in:
Brandy Carney
2023-07-31 11:07:00 -04:00
committed by GitHub
parent 5d1ee1646f
commit 9a685882b7
4 changed files with 46 additions and 5 deletions

View File

@ -405,7 +405,14 @@ export class Toast implements ComponentInterface, OverlayInterface {
return (
<div class={buttonGroupsClasses}>
{buttons.map((b) => (
<button type="button" class={buttonClass(b)} tabIndex={0} onClick={() => this.buttonClick(b)} part="button">
<button
{...b.htmlAttributes}
type="button"
class={buttonClass(b)}
tabIndex={0}
onClick={() => this.buttonClick(b)}
part="button"
>
<div class="toast-button-inner">
{b.icon && (
<ion-icon