Skip to content

feat: supports aria-hidden #869

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 18, 2020
Merged

feat: supports aria-hidden #869

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
export namespace Components {
interface IonIcon {
"ariaHidden"?: string;
/**
* Specifies the label to use for accessibility. Defaults to the icon name.
*/
Expand Down Expand Up @@ -66,6 +67,7 @@ declare global {
}
declare namespace LocalJSX {
interface IonIcon {
"ariaHidden"?: string;
/**
* Specifies the label to use for accessibility. Defaults to the icon name.
*/
Expand Down
4 changes: 3 additions & 1 deletion src/components/icon/icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ export class Icon {
*/
@Prop({ mutable: true, reflectToAttr: true }) ariaLabel?: string;

@Prop({reflect: true}) ariaHidden?: string;

/**
* Specifies which icon to use on `ios` mode.
*/
Expand Down Expand Up @@ -130,7 +132,7 @@ export class Icon {
}
}

if (!this.ariaLabel) {
if (!this.ariaLabel && this.ariaHidden !== 'true') {
const label = getName(this.name, this.icon, this.mode, this.ios, this.md);
// user did not provide a label
// come up with the label based on the icon name
Expand Down
27 changes: 14 additions & 13 deletions src/components/icon/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,20 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | -------------- |
| `ariaLabel` | `aria-label` | Specifies the label to use for accessibility. Defaults to the icon name. | `string \| undefined` | `undefined` |
| `color` | `color` | The color to use for the background of the item. | `string \| undefined` | `undefined` |
| `flipRtl` | `flip-rtl` | Specifies whether the icon should horizontally flip when `dir` is `"rtl"`. | `boolean \| undefined` | `undefined` |
| `icon` | `icon` | A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property. | `any` | `undefined` |
| `ios` | `ios` | Specifies which icon to use on `ios` mode. | `string \| undefined` | `undefined` |
| `lazy` | `lazy` | If enabled, ion-icon will be loaded lazily when it's visible in the viewport. Default, `false`. | `boolean` | `false` |
| `md` | `md` | Specifies which icon to use on `md` mode. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `string` | `getIonMode()` |
| `name` | `name` | Specifies which icon to use from the built-in set of icons. | `string \| undefined` | `undefined` |
| `size` | `size` | The size of the icon. Available options are: `"small"` and `"large"`. | `string \| undefined` | `undefined` |
| `src` | `src` | Specifies the exact `src` of an SVG file to use. | `string \| undefined` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | -------------- |
| `ariaHidden` | `aria-hidden` | Set the icon to hidden, respectively `true`, to remove it from the accessibility tree. | `string \| undefined` | `undefined` |
| `ariaLabel` | `aria-label` | Specifies the label to use for accessibility. Defaults to the icon name. | `string \| undefined` | `undefined` |
| `color` | `color` | The color to use for the background of the item. | `string \| undefined` | `undefined` |
| `flipRtl` | `flip-rtl` | Specifies whether the icon should horizontally flip when `dir` is `"rtl"`. | `boolean \| undefined` | `undefined` |
| `icon` | `icon` | A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property. | `any` | `undefined` |
| `ios` | `ios` | Specifies which icon to use on `ios` mode. | `string \| undefined` | `undefined` |
| `lazy` | `lazy` | If enabled, ion-icon will be loaded lazily when it's visible in the viewport. Default, `false`. | `boolean` | `false` |
| `md` | `md` | Specifies which icon to use on `md` mode. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `string` | `getIonMode()` |
| `name` | `name` | Specifies which icon to use from the built-in set of icons. | `string \| undefined` | `undefined` |
| `size` | `size` | The size of the icon. Available options are: `"small"` and `"large"`. | `string \| undefined` | `undefined` |
| `src` | `src` | Specifies the exact `src` of an SVG file to use. | `string \| undefined` | `undefined` |


----------------------------------------------
Expand Down
32 changes: 32 additions & 0 deletions src/components/icon/test/icon.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { newSpecPage } from '@stencil/core/testing';
import { Icon } from '../icon';

describe('icon', () => {
it('renders', async () => {
const { root } = await newSpecPage({
components: [Icon],
html: '<ion-icon></ion-icon>',
});
expect(root).toEqualHtml(`
<ion-icon class="md" role="img">
<mock:shadow-root>
<div class="icon-inner"></div>
</mock:shadow-root>
</ion-icon>
`);
});

it('renders aria-hidden and no aria-label', async () => {
const { root } = await newSpecPage({
components: [Icon],
html: `<ion-icon aria-hidden="true"></ion-icon>`,
});
expect(root).toEqualHtml(`
<ion-icon class="md" role="img" aria-hidden="true">
<mock:shadow-root>
<div class="icon-inner"></div>
</mock:shadow-root>
</ion-icon>
`);
});
});
5 changes: 5 additions & 0 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,11 @@ <h2>Custom CSS</h2>
<ion-icon class="custom" src="./assets/web_asset.svg"></ion-icon>
<ion-icon class="custom" src="./assets/work_outline.svg"></ion-icon>

<h2>Aria</h2>
<ion-icon name="cellular"></ion-icon>
<ion-icon name="cellular" aria-label="Mobile data"></ion-icon>
<ion-icon name="cellular" aria-hidden="true"></ion-icon>

<h1>RTL</h1>

<h2>Default: Non-arrows</h2>
Expand Down