@heroku/ember-malibu-icon - npm Package Compare versions

Comparing version 1.4.0-beta.1 to 1.4.0-beta.2

addon/components/malibu-icon.js

@@ -45,15 +45,22 @@ import Component from '@ember/component';
       if (this.title && role === 'presentation') {
-        warn(`Can't set @title and role="presentation" to malibu-icon with @name='${this.name}', as role="presentation" would hide the text from accessibility tools such as screenreaders`,
+        warn(
+        `<MalibuIcon @name="${this.name}" /> does not allow setting both @title and role="presentation, ` +
+        'as role="presentation" would hide the text from screenreaders/accessibility tools. ' +
+        'Please remove the @title argument if the icon is used in a presentational manner, or remove the `role` attribute.',
           false,
-          {id: 'ember-malibu-icon.mismatched-title-and-role'}
+          {
+            id: 'ember-malibu-icon.mismatched-title-and-role',
+            url: 'https://github.com/heroku/ember-malibu-icon#accessibility',
+          }
         );
       }
       warn(
-        `Please set a title for the ${this.name} icon ` +
+        `Please set @title for the ${this.name} MalibuIcon ` +
         'or set role="presentation" if you believe the icon does not ' +
-        'need a title and is solely presentational. ' +
-        'Learn more about accessible icons here: ' +
-        'http://design.herokai.com/malibu',
-        (this.title !== undefined || role === 'presentation') || this.title,
-        {id:"ember-malibu-icon.missing-title"}
+        'need a title and is solely presentational.',
+        (this.title !== undefined || role === 'presentation'),
+        {
+          id: 'ember-malibu-icon.missing-title',
+          url: 'https://github.com/heroku/ember-malibu-icon#accessibility',
+        }
       );
@@ -60,0 +67,0 @@ super.didRender(...arguments);

package.json

 {
   "name": "@heroku/ember-malibu-icon",
-  "version": "1.4.0-beta.1",
+  "version": "1.4.0-beta.2",
   "description": "Ember Malibu Icons",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -27,6 +27,6 @@ # Ember Malibu Icon
 
-**Accessibility** When rendering `MalibuIcon`, you must pass declare the icon as either:
+**Accessibility** When rendering `MalibuIcon`, you must declare the icon as either:
 
 * **informational**: Pass a non-empty string to `@title` argument. This will read the text to the screenreader instead of being announced as "Image".
-* **presentational**: Pass `role="presentation"` to the component. This will hide the icon from assistive technology. This should only be used for icons that don't convey additional meaning and are being used for aesthtic/design reasons.
+* **presentational**: Pass `role="presentation"` to the component. This will hide the icon from assistive technology. This should only be used for icons that don't convey additional meaning and are being used for aesthetic/design reasons.
 
@@ -38,3 +38,3 @@ #### Informational Usage Example
 ```handlebars
-<MalibuIcon @title="Add Buildpack {{buildpackName}}" size='28' iconClass='gradient-dark-gray' name='app-28' />
+<MalibuIcon @title="Add Buildpack {{buildpackName}}" @size="28" @iconClass="gradient-dark-gray" @name="app-28" />
 ```
@@ -46,3 +46,3 @@
 
-Given this screenshot, note the pencil icon. There is no text next to it to describe its intended purpose to the screenreader (in this case, "Edit"). `@title="Edit {{domain}}` would be a require improvement in this scenario.
+Given this screenshot, note the pencil icon. There is no text next to it to describe its intended purpose to the screenreader (in this case, "Edit"). `@title="Edit {{domain}}"` would be an improvement in this scenario.
 
@@ -57,6 +57,6 @@ #### Presentational Usage
 
-In this example, the GitHub logo is "presentational" because it does not convey additional meaning already presented to the user via the "GitHub" text next to it.
+In this example, the GitHub logo is "presentational" because it does not convey additional meaning not already presented to the user via the "GitHub" text next to it.
 
 ```handlebars
-<MalibuIcon size='28' iconClass='gradient-dark-gray' name='app-28' role="presentation"/>
+<MalibuIcon @size="28" @iconClass="gradient-dark-gray" @name="app-28" role="presentation" />
 ```
@@ -63,0 +63,0 @@

No alert changes

Improved metrics

Total package byte prevSize

51479

increased by0.48%

Lines of code

192

increased by3.78%

No dependency changes