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(datetime, input, textarea): remove aria-labelledby when there is no adjacent ion-label (#23211)

Browse Source 
* fix(datetime, input, textarea): remove aria-labelledby when there is no adjacent ion-label

* Update core/src/components/input/test/a11y/input.spec.ts

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

* Update core/src/components/textarea/test/a11y/textarea.spec.ts

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

* Update core/src/components/datetime/test/a11y/datetime.spec.ts

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

* remove hard-coded label, fix whitespace

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:
William Martin
2021-04-20 12:34:32 -04:00
committed by GitHub
parent 35c8802c22
commit a31fb55bac
8 changed files with 113 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -408,7 +408,7 @@ export class Input implements ComponentInterface {
<input
class="native-input"
ref={input => this.nativeInput = input}
aria-labelledby={labelId}
aria-labelledby={label ? labelId : null}
disabled={this.disabled}
accept={this.accept}
autoCapitalize={this.autocapitalize}

30
core/src/components/input/test/a11y/input.spec.ts Normal file
View File

@@ -0,0 +1,30 @@
import { newSpecPage } from '@stencil/core/testing';
import { Input } from '../../input';
import { Item } from '../../../item/item';
import { Label } from '../../../label/label';
describe('Input a11y', () => {
it('does not set a default aria-labelledby when there is not a neighboring ion-label', async () => {
const page = await newSpecPage({
components: [Input, Item, Label],
html: `<ion-input></ion-input>`
})
const ariaLabelledBy = page.body.querySelector('ion-input > input').getAttribute('aria-labelledby');
expect(ariaLabelledBy).toBe(null);
});
it('set a default aria-labelledby when a neighboring ion-label exists', async () => {
const page = await newSpecPage({
components: [Input, Item, Label],
html: `<ion-item>
<ion-label>A11y Test</ion-label>
<ion-input></ion-input>
</ion-item>`
})
const label = page.body.querySelector('ion-label');
const ariaLabelledBy = page.body.querySelector('ion-input > input').getAttribute('aria-labelledby');
expect(ariaLabelledBy).toBe(label.id);
});
});

19
core/src/components/input/test/attributes/index.html
View File

@@ -46,6 +46,10 @@
<ion-input id="input3" value="inputs"></ion-input>
</ion-item>
<ion-item>
<ion-input id="input4" placeholder="No Label" aria-label="input4"></ion-input>
</ion-item>
<ion-list>
<ion-item>
Number Test&nbsp;
@@ -59,6 +63,10 @@
Default Test&nbsp;
<span id="defaultInputResult"></span>
</ion-item>
<ion-item>
No Label Test&nbsp;
<span id="noLabelInputResult"></span>
</ion-item>
</ion-list>
</ion-list>
@@ -74,6 +82,9 @@
var defaultInput = checkInput('input3');
updateResult(defaultInput, 'defaultInputResult');
var noLabelInput = checkInput('input4');
updateResult(noLabelInput, 'noLabelInputResult');
// Update results of input
function updateResult(result, resultId) {
var resultEl = document.getElementById(resultId);
@@ -122,6 +133,14 @@
readonly: undefined,
disabled: undefined
});
} else if (id === 'input4') {
return testAttributes(el, inputEl, {
id: 'input4',
type: undefined,
readonly: undefined,
disabled: undefined,
'aria-label': 'input4'
});
}
return false;
}