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/datetime/datetime.tsx
View File

@@ -641,7 +641,7 @@ export class Datetime implements ComponentInterface {
aria-disabled={disabled ? 'true' : null}
aria-expanded={`${isExpanded}`}
aria-haspopup="true"
aria-labelledby={labelId}
aria-labelledby={label ? labelId : null}
class={{
[mode]: true,
'datetime-disabled': disabled,

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

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

2
core/src/components/datetime/test/standalone/index.html
View File

@@ -12,6 +12,6 @@
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-datetime id="basic" display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
<ion-datetime id="basic" display-format="MMMM" value="2012-12-15T13:47:20.789" aria-label="datetime picker"></ion-datetime>
</body>
</html>