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

fix(breadcrumb): add aria-label to collapsed indicator (#26615)

Browse Source
This commit is contained in:
Sean Perkins
2023-01-23 10:37:00 -05:00
committed by GitHub
parent e612253fc6
commit f8a2c79488
4 changed files with 74 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/breadcrumb/breadcrumb.tsx
View File

@ -212,13 +212,14 @@ export class Breadcrumb implements ComponentInterface {
{showCollapsedIndicator && (
<button
part="collapsed-indicator"
aria-label="Show more breadcrumbs"
onClick={() => this.collapsedIndicatorClick()}
ref={(collapsedEl) => (this.collapsedRef = collapsedEl)}
class={{
'breadcrumbs-collapsed-indicator': true,
}}
>
<ion-icon icon={ellipsisHorizontal} lazy={false}></ion-icon>
<ion-icon aria-hidden="true" icon={ellipsisHorizontal} lazy={false}></ion-icon>
</button>
)}
{showSeparator && (

23
core/src/components/breadcrumb/test/aria.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { newSpecPage } from '@stencil/core/testing';
import { Breadcrumb } from '../breadcrumb';
describe('breadcrumb: collapsed indicator', () => {
it('should have an aria-label', async () => {
const page = await newSpecPage({
components: [Breadcrumb],
/**
* `showCollapsedIndicator` is an internal API used by `ion-breadcrumbs`.
* This test makes use of it to render the collapsed indicator.
*/
html: `<ion-breadcrumb show-collapsed-indicator="true">Text</ion-breadcrumb>`,
});
const collapsedIndicator = page.body
.querySelector('ion-breadcrumb')!
.shadowRoot!.querySelector('.breadcrumbs-collapsed-indicator')!;
const ariaLabel = collapsedIndicator.getAttribute('aria-label');
expect(ariaLabel).toEqual('Show more breadcrumbs');
});
});