Skip to content
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.

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

feat(ui5-icon): accessibility implementation #709

Merged
merged 6 commits into from
Aug 7, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 4 additions & 0 deletions packages/base/src/ResourceBundle.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,10 @@ class ResourceBundleWrapper {
}

getText(textObj, ...params) {
if (!this._resourceBundle.hasText(textObj.key)) {
return textObj.defaultText;
}

return this._resourceBundle.getText(textObj.key, ...params);
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/base/src/SVGIconRegistry.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const registry = new Map();

const registerIcon = (name, d) => {
registry.set(name, { name, d });
const registerIcon = (name, d, accData) => {
registry.set(name, { d, accData });
};

const getIconData = name => {
Expand Down
4 changes: 3 additions & 1 deletion packages/base/src/icons/message-error.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { registerIcon } from "../SVGIconRegistry.js";
import { ICON_MESSAGE_ERROR } from "../../../main/src/i18n/defaults.js";

const name = "sap-icon://message-error";
const d = "M257 334q15 0 26.5 10.5T295 372q0 15-11.5 27T257 411q-17 0-28-12t-11-27q0-17 11-27.5t28-10.5zm0-231q15 0 26.5 10.5T295 141l-18 136q-3 14-7.5 18t-12.5 4-13-3.5-7-18.5l-19-136q0-17 11-27.5t28-10.5zM256 0q53 0 100 20t81.5 55 54.5 81.5 20 99.5-20 100-54.5 81.5T356 492t-100 20-99.5-20T75 437.5 20 356 0 256t20-99.5T75 75t81.5-55T256 0zm0 480q46 0 87-17.5t71.5-48 48-71T480 256q0-46-17.5-87t-48-71.5-71.5-48T256 32t-87 17.5-71.5 48-48 71.5T32 256q0 47 17.5 87.5t48 71 71.5 48 87 17.5z";
const acc = ICON_MESSAGE_ERROR;

registerIcon(name, d);
registerIcon(name, d, acc);
4 changes: 3 additions & 1 deletion packages/base/src/icons/message-information.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { registerIcon } from "../SVGIconRegistry.js";
import { ICON_MESSAGE_INFORMATION } from "../../../main/src/i18n/defaults.js";

const name = "sap-icon://message-information";
const d = "M448 32q13 0 22.5 9t9.5 22v384q0 14-9.5 23.5T448 480H64q-14 0-23-9.5T32 447V63q0-13 9-22t23-9h384zm0 31H64v384h384V63zM320 416H192v-33h33V255h-32v-31h95v159h32v33zm-64-225q-14 0-23-9t-9-22q0-14 9-23.5t23-9.5q13 0 22.5 9.5T288 160q0 13-9.5 22t-22.5 9z";
const acc = ICON_MESSAGE_INFORMATION;

registerIcon(name, d);
registerIcon(name, d, acc);
4 changes: 3 additions & 1 deletion packages/base/src/icons/message-success.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { registerIcon } from "../SVGIconRegistry.js";
import { ICON_MESSAGE_SUCCESS } from "../../../main/src/i18n/defaults.js";

const name = "sap-icon://message-success";
const d = "M448 32q13 0 22.5 9t9.5 23v384q0 13-9.5 22.5T448 480H64q-14 0-23-9.5T32 448V64q0-14 9-23t23-9h384zm0 32H64v384h384V64zM244 384l-113-95 33-47 74 56 103-170 41 42z";
const acc = ICON_MESSAGE_SUCCESS;

registerIcon(name, d);
registerIcon(name, d, acc);
4 changes: 3 additions & 1 deletion packages/base/src/icons/message-warning.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion packages/main/lib/i18n-transform/USED_KEYS.txt
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,5 @@ BUTTON_ARIA_TYPE_EMPHASIZED
LINK_SUBTLE
LINK_EMPHASIZED
SWITCH_ON
SWITCH_OFF
SWITCH_OFF
TOKEN_ARIA_DELETABLE
1 change: 1 addition & 0 deletions packages/main/src/Button.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
<ui5-icon
class="ui5-button-icon"
src="{{icon}}"
show-tooltip={{iconOnly}}
></ui5-icon>
{{/if}}

Expand Down
6 changes: 5 additions & 1 deletion packages/main/src/Icon.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,13 @@
viewBox="0 0 512 512"
role="img"
preserveAspectRatio="xMidYMid meet"
aria-label="{{accessibleNameText}}"
xmlns="http://www.w3.org/2000/svg"
>
<g role="presentation" aria-hidden="true">
{{#if hasIconTooltip}}
<title id="{{_id}}-tooltip">{{accessibleNameText}}</title>
{{/if}}
<g role="presentation">
<path transform="translate(0, 512) scale(1, -1)" d={{d}} />
</g>
</svg>
47 changes: 47 additions & 0 deletions packages/main/src/Icon.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
import { getIconData } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
import { fetchResourceBundle, getResourceBundle } from "@ui5/webcomponents-base/dist/ResourceBundle.js";
import IconTemplate from "./generated/templates/IconTemplate.lit.js";

// Styles
Expand Down Expand Up @@ -30,6 +31,31 @@ const metadata = {
src: {
type: String,
},

/**
* Defines the text alternative of the <code>ui5-icon</code>.
* If not provided a default text alternative will be set, if present.
* <br><br>
* <b>Note:</b> Every icon should have a text alternative in order to
* calculate its accessible name.
*
* @type {string}
* @public
*/
accessibleName: {
type: String,
},

/**
* Defines whether the <code>ui5-icon</code> should have a tooltip.
*
* @type {boolean}
* @defaultvalue false
* @public
*/
showTooltip: {
type: Boolean,
},
},
events: {
},
Expand Down Expand Up @@ -63,6 +89,11 @@ const metadata = {
* @public
*/
class Icon extends UI5Element {
constructor() {
super();
this.resourceBundle = getResourceBundle("@ui5/webcomponents");
}

static get metadata() {
return metadata;
}
Expand All @@ -79,6 +110,12 @@ class Icon extends UI5Element {
return iconCss;
}

static async define(...params) {
await fetchResourceBundle("@ui5/webcomponents");

super.define(...params);
}

_normalizeIconURI(iconURI) {
return this._hasIconPrefix(iconURI) ? iconURI : `sap-icon://${iconURI}`;
}
Expand All @@ -98,6 +135,16 @@ class Icon extends UI5Element {
return icon.d;
}

get hasIconTooltip() {
return this.showTooltip && this.accessibleNameText;
}

get accessibleNameText() {
const icon = getIconData(this._normalizeIconURI(this.src));

return this.accessibleName || (icon.accData && this.resourceBundle.getText(icon.accData));
}

get dir() {
return getRTL() ? "rtl" : "ltr";
}
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/MessageStrip.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
@click={{_closeClick}}
>
<ui5-icon
class="ui5-messagestrip-close-icon"
class="ui5-messagestrip-close-icon"
src="sap-icon://decline"
>
</ui5-icon>
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/Panel.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
<ui5-icon
src="sap-icon://navigation-right-arrow"
class="ui5-panel-header-button-icon"
accessible-name="{{_icon.title}}"
>
</ui5-icon>
</ui5-button>
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/Token.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@
<span class="ui5-token--text"><slot></slot></span>

{{#unless readonly}}
<ui5-icon @click="{{_delete}}" src="{{iconURI}}" class="ui5-token--icon"></ui5-icon>
<ui5-icon @click="{{_delete}}" src="{{iconURI}}" accessible-name="{{tokenDeletableText}}" show-tooltip="true" class="ui5-token--icon"></ui5-icon>
{{/unless}}
</div>
17 changes: 16 additions & 1 deletion packages/main/src/Token.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {
} from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
import "@ui5/webcomponents-base/dist/icons/decline.js";
import "@ui5/webcomponents-base/dist/icons/cancel.js";
import { fetchResourceBundle, getResourceBundle } from "@ui5/webcomponents-base/dist/ResourceBundle.js";
import { TOKEN_ARIA_DELETABLE } from "./i18n/defaults.js";

import Icon from "./Icon.js";
import TokenTemplate from "./generated/templates/TokenTemplate.lit.js";
Expand Down Expand Up @@ -117,6 +119,12 @@ class Token extends UI5Element {
return styles;
}

constructor() {
super();

this.resourceBundle = getResourceBundle("@ui5/webcomponents");
}

_select() {
this.fireEvent("select");
}
Expand All @@ -143,12 +151,19 @@ class Token extends UI5Element {
}
}

get tokenDeletableText() {
return this.resourceBundle.getText(TOKEN_ARIA_DELETABLE);
}

get iconURI() {
return getTheme() === "sap_fiori_3" ? "sap-icon://decline" : "sap-icon://sys-cancel";
}

static async define(...params) {
await Icon.define();
await Promise.all([
Icon.define(),
fetchResourceBundle("@ui5/webcomponents"),
]);

super.define(...params);
}
Expand Down
Loading