javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): allow aria-label to be inherited to inner button (#22632)

Browse Source 
resolves #22629
This commit is contained in:
Liam DeBeasi
2020-12-07 12:31:05 -05:00
committed by GitHub
parent ff39d40255
commit 818e387fe8
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/button/button.tsx
View File

@ -3,7 +3,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
import { getIonMode } from '../../global/ionic-global'; import { getIonMode } from '../../global/ionic-global';
import { AnimationBuilder, Color, RouterDirection } from '../../interface'; import { AnimationBuilder, Color, RouterDirection } from '../../interface';
import { AnchorInterface, ButtonInterface } from '../../utils/element-interface'; import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import { hasShadowDom } from '../../utils/helpers'; import { hasShadowDom, inheritAttributes } from '../../utils/helpers';
import { createColorClasses, hostContext, openURL } from '../../utils/theme'; import { createColorClasses, hostContext, openURL } from '../../utils/theme';
/** /**
@ -28,6 +28,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
private inItem = false; private inItem = false;
private inListHeader = false; private inListHeader = false;
private inToolbar = false; private inToolbar = false;
private inheritedAttributes: { [k: string]: any } = {};
@Element() el!: HTMLElement; @Element() el!: HTMLElement;
@ -134,6 +135,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
this.inToolbar = !!this.el.closest('ion-buttons'); this.inToolbar = !!this.el.closest('ion-buttons');
this.inListHeader = !!this.el.closest('ion-list-header'); this.inListHeader = !!this.el.closest('ion-list-header');
this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider'); this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
} }
private get hasIconOnly() { private get hasIconOnly() {
@ -184,7 +186,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
render() { render() {
const mode = getIonMode(this); const mode = getIonMode(this);
const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong } = this; const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes } = this;
const finalSize = size === undefined && this.inItem ? 'small' : size; const finalSize = size === undefined && this.inItem ? 'small' : size;
const TagType = href === undefined ? 'button' : 'a' as any; const TagType = href === undefined ? 'button' : 'a' as any;
const attrs = (TagType === 'button') const attrs = (TagType === 'button')
@ -227,6 +229,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
disabled={disabled} disabled={disabled}
onFocus={this.onFocus} onFocus={this.onFocus}
onBlur={this.onBlur} onBlur={this.onBlur}
{...inheritedAttributes}
> >
<span class="button-inner"> <span class="button-inner">
<slot name="icon-only"></slot> <slot name="icon-only"></slot>

1
core/src/components/button/test/standalone/index.html
View File

@ -50,6 +50,7 @@
<ion-button class="wide">wide</ion-button> <ion-button class="wide">wide</ion-button>
<ion-button class="large">large</ion-button> <ion-button class="large">large</ion-button>
<ion-button class="round">rounded</ion-button> <ion-button class="round">rounded</ion-button>
<ion-button aria-label="this is my custom label">custom aria-label</ion-button>
<!-- Custom Colors --> <!-- Custom Colors -->
<ion-button class="custom">custom</ion-button> <ion-button class="custom">custom</ion-button>