-
Notifications
You must be signed in to change notification settings - Fork 253
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
Changes from 4 commits
73f22a5
8eae383
632b328
b1bc780
eb498ef
4f6c3fb
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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.defaultText; | ||
|
||
registerIcon(name, d); | ||
registerIcon(name, d, acc); |
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.defaultText; | ||
|
||
registerIcon(name, d); | ||
registerIcon(name, d, acc); |
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.defaultText; | ||
|
||
registerIcon(name, d); | ||
registerIcon(name, d, acc); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,4 +9,5 @@ BUTTON_ARIA_TYPE_EMPHASIZED | |
LINK_SUBTLE | ||
LINK_EMPHASIZED | ||
SWITCH_ON | ||
SWITCH_OFF | ||
SWITCH_OFF | ||
TOKEN_ARIA_DELETABLE |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,6 +15,7 @@ | |
<ui5-icon | ||
class="ui5-button-icon" | ||
src="{{icon}}" | ||
show-tooltip={{iconOnly}} | ||
></ui5-icon> | ||
{{/if}} | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -30,6 +30,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: { | ||
}, | ||
|
@@ -98,6 +123,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.accText; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. getResourceBundle().getText() should be here There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We have to fix it first to not break. It should return the english text if no text is found in the translation There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done |
||
} | ||
|
||
get dir() { | ||
return getRTL() ? "rtl" : "ltr"; | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should be the whole object, not the default text, so that it can be translated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done