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

fix(inputs): fix aria with shadow-dom (#16329)

Browse Source
This commit is contained in:
Manu MA
2018-11-16 19:26:55 +01:00
committed by GitHub
parent 10971cc3ca
commit fd79b57748
41 changed files with 399 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
core/src/components/input/input.tsx
View File

@@ -1,7 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
import { Color, Mode, StyleEvent, TextFieldTypes, TextInputChangeEvent } from '../../interface';
import { debounceEvent, renderHiddenInput } from '../../utils/helpers';
import { debounceEvent, findItemLabel, renderHiddenInput } from '../../utils/helpers';
import { createColorClasses, hostContext } from '../../utils/theme';
@Component({
@@ -145,11 +145,6 @@ export class Input implements ComponentInterface {
*/
@Prop() required = false;
/**
* This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer.
*/
@Prop() results?: number;
/**
* If `true`, the element will have its spelling and grammar checked.
*/
@@ -181,13 +176,8 @@ export class Input implements ComponentInterface {
*/
@Watch('value')
protected valueChanged() {
const inputEl = this.nativeInput;
const value = this.getValue();
if (inputEl && inputEl.value !== value) {
inputEl.value = value;
}
this.emitStyle();
this.ionChange.emit({ value });
this.ionChange.emit({ value: this.value });
}
/**
@@ -200,11 +190,6 @@ export class Input implements ComponentInterface {
*/
@Event() ionChange!: EventEmitter<TextInputChangeEvent>;
/**
* Emitted when the styles change.
*/
@Event() ionStyle!: EventEmitter<StyleEvent>;
/**
* Emitted when the input loses focus.
*/
@@ -225,6 +210,12 @@ export class Input implements ComponentInterface {
*/
@Event() ionInputDidUnload!: EventEmitter<void>;
/**
* Emitted when the styles change.
* @internal
*/
@Event() ionStyle!: EventEmitter<StyleEvent>;
componentWillLoad() {
// By default, password inputs clear after focus when they have content
if (this.clearOnEdit === undefined && this.type === 'password') {
@@ -240,7 +231,6 @@ export class Input implements ComponentInterface {
}
componentDidUnload() {
this.nativeInput = undefined;
this.ionInputDidUnload.emit();
}
@@ -324,6 +314,7 @@ export class Input implements ComponentInterface {
hostData() {
return {
'aria-disabled': this.disabled ? 'true' : null,
class: {
...createColorClasses(this.color),
'in-item': hostContext('ion-item', this.el),
@@ -335,19 +326,25 @@ export class Input implements ComponentInterface {
render() {
const value = this.getValue();
renderHiddenInput(this.el, this.name, value, this.disabled);
renderHiddenInput(false, this.el, this.name, value, this.disabled);
const labelId = this.inputId + '-lbl';
const label = findItemLabel(this.el);
if (label) {
label.id = labelId;
}
return [
<input
ref={input => this.nativeInput = input as any}
aria-disabled={this.disabled ? 'true' : null}
class="native-input"
ref={input => this.nativeInput = input}
aria-labelledby={labelId}
disabled={this.disabled}
accept={this.accept}
autoCapitalize={this.autocapitalize}
autoComplete={this.autocomplete}
autoCorrect={this.autocorrect}
autoFocus={this.autofocus}
class="native-input"
disabled={this.disabled}
inputMode={this.inputmode}
min={this.min}
max={this.max}
@@ -357,7 +354,6 @@ export class Input implements ComponentInterface {
name={this.name}
pattern={this.pattern}
placeholder={this.placeholder || ''}
results={this.results}
readOnly={this.readonly}
required={this.required}
spellCheck={this.spellcheck}
@@ -370,7 +366,6 @@ export class Input implements ComponentInterface {
onFocus={this.onFocus}
onKeyDown={this.onKeydown}
/>,
<slot></slot>,
(this.clearInput && !this.readonly && !this.disabled) && <button
type="button"
class="input-clear-icon"

2
core/src/components/input/readme.md
View File

@@ -34,7 +34,6 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email
| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `null \| string \| undefined` | `undefined` |
| `readonly` | `readonly` | If `true`, the user cannot modify the value. | `boolean` | `false` |
| `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` | `false` |
| `results` | `results` | This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer. | `number \| undefined` | `undefined` |
| `size` | `size` | The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. | `number \| undefined` | `undefined` |
| `spellcheck` | `spellcheck` | If `true`, the element will have its spelling and grammar checked. | `boolean` | `false` |
| `step` | `step` | Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number. | `string \| undefined` | `undefined` |
@@ -52,7 +51,6 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email
| `ionInput` | Emitted when a keyboard input ocurred. | KeyboardEvent |
| `ionInputDidLoad` | Emitted when the input has been created. | void |
| `ionInputDidUnload` | Emitted when the input has been removed. | void |
| `ionStyle` | Emitted when the styles change. | StyleEvent |
## Methods