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

chore(): sync with main

Browse Source
This commit is contained in:
Liam DeBeasi
2023-01-18 09:36:43 -05:00
parent 90405eb0af a095201def
commit c01600191e
193 changed files with 824 additions and 975 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/src/components/segment/segment.tsx
View File

@ -165,7 +165,6 @@ export class Segment implements ComponentInterface {
async componentDidLoad() {
this.setCheckedClasses();
this.ensureFocusable();
this.gesture = (await import('../../utils/gesture')).createGesture({
el: this.el,
@ -519,19 +518,7 @@ export class Segment implements ComponentInterface {
const previous = this.checked || current;
this.checkButton(previous, current);
}
current.focus();
}
/* By default, focus is delegated to the selected `ion-segment-button`.
* If there is no selected button, focus will instead pass to the first child button.
**/
private ensureFocusable() {
if (this.value !== undefined) {
return;
}
const buttons = this.getButtons();
buttons[0]?.setAttribute('tabindex', '0');
current.setFocus();
}
render() {

14
core/src/components/segment/test/a11y/index.html
View File

@ -26,6 +26,20 @@
<ion-label>Shared Links</ion-label>
</ion-segment-button>
</ion-segment>
<br /><br />
<ion-segment aria-label="Tab Options" color="dark" select-on-focus>
<ion-segment-button aria-label="Bookmarks" value="bookmarks">
<ion-icon aria-hidden="true" name="bookmark"></ion-icon>
</ion-segment-button>
<ion-segment-button aria-label="Reading List" value="reading-list">
<ion-icon aria-hidden="true" name="glasses"></ion-icon>
</ion-segment-button>
<ion-segment-button aria-label="Shared Links" value="shared-links">
<ion-icon aria-hidden="true" name="link"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-content>
</ion-app>
</body>

11
core/src/components/segment/test/a11y/screen-readers.md
View File

@ -1,12 +1,12 @@
"native" refers to this sample: https://w3c.github.io/aria-practices/examples/tabs/tabs-2/tabs.html
"native" refers to this sample: https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual
### Tabbing to Segment Button
| | native | Ionic |
| ------------------------ | ------------------------------------------------ | ------------------------------------------------ |
| VoiceOver macOS - Chrome | BOOKMARKS, tab, 1 of 3, Tab Options, tab group | BOOKMARKS, tab, 1 of 3, Tab Options, tab group |
| VoiceOver macOS - Chrome | BOOKMARKS, tab, 1 of 3, Tab Options, tab group | BOOKMARKS, tab, 1 of 1, Tab Options, tab group |
| VoiceOver macOS - Safari | BOOKMARKS, tab, 1 of 3, Tab Options, tab group | BOOKMARKS, tab, 1 of 3, Tab Options, tab group |
| VoiceOver iOS | Bookmarks, tab | Bookmarks, tab |
| VoiceOver iOS | Bookmarks, tab, 1 of 3 | Bookmarks, tab, 1 of 3 |
| Android TalkBack | Bookmarks, tab | Bookmarks, tab |
| Windows NVDA | Tab Options, tab control, BOOKMARKS, tab, 1 of 3 | Tab Options, tab control, BOOKMARKS, tab, 1 of 3 |
@ -14,11 +14,12 @@
| | native | Ionic |
| ------------------------ | -------------------------------------------------------- | ------------------------ |
| VoiceOver macOS - Chrome | BOOKMARKS, selected, tab, 1 of 3, Tab Options, tab group | BOOKMARKS, selected, tab, 1 of 3, Tab Options, tab group |
| VoiceOver macOS - Chrome | BOOKMARKS, selected, tab, 1 of 3, Tab Options, tab group | BOOKMARKS, selected, tab, 1 of 1, Tab Options, tab group |
| VoiceOver macOS - Safari | BOOKMARKS, selected, tab, 1 of 3, Tab Options, tab group | BOOKMARKS, selected, tab, 1 of 3, Tab Options, tab group |
| VoiceOver iOS | selected, Bookmarks, tab | selected, Bookmarks, tab |
| VoiceOver iOS | selected, Bookmarks, tab, 1 of 3 | selected, Bookmarks, tab, 1 of 3 |
| Android TalkBack | selected | selected |
| Windows NVDA | BOOKMARKS, tab, 1 of 3, selected | BOOKMARKS, tab, 1 of 3, selected |
Note: The `aria-label` for tablist is typically only read on the first interaction.
VoiceOver + Chrome announces the wrong tab count due to the `role="tab"` being in the Shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=1405462

3
core/src/components/segment/test/a11y/segment.e2e.ts
View File

@ -6,8 +6,7 @@ test.describe('segment: a11y', () => {
test('should not have any axe violations', async ({ page }) => {
await page.goto('/src/components/segment/test/a11y');
// TODO(FW-403): Re-enable rule once segment button is updated to avoid nested-interactive
const results = await new AxeBuilder({ page }).disableRules('nested-interactive').analyze();
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});