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

Comparing version 1.4.0 to 1.5.0

addon/components/malibu-icon.js

@@ -41,20 +41,9 @@ import Component from '@ember/component';
       const svg = document.querySelector(`#${this.svgID}`);
-      const role = svg.getAttribute('role');
-      if (this.title && role === 'presentation') {
-        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',
-            url: 'https://github.com/heroku/ember-malibu-icon#accessibility',
-          }
-        );
-      }
+      const ariaHidden = svg.getAttribute('aria-hidden');
+
       warn(
-        `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.',
-        (this.title !== undefined || role === 'presentation'),
+        `Please set @title for <MalibuIcon @name="${this.name}" /> ` +
+        'or set aria-hidden="true" if you believe the icon does not ' +
+        'need a title and is solely decorative.',
+        (this.title || ariaHidden === 'true'),
         {
@@ -65,2 +54,14 @@ id: 'ember-malibu-icon.missing-title',
       );
+
+      warn(
+        `<MalibuIcon @name="${this.name}" /> does not allow setting both @title and aria-hidden="true", ` +
+        'as aria-hidden="true" would hide the text from screenreaders/accessibility tools. ' +
+        'Please remove the @title argument if the icon is used in a decorative manner, or remove the `aria-hidden` attribute.',
+        !(this.title && ariaHidden === 'true'),
+        {
+          id: 'ember-malibu-icon.mismatched-title-and-aria-hidden',
+          url: 'https://github.com/heroku/ember-malibu-icon#accessibility',
+        }
+      );
+
       super.didRender(...arguments);
@@ -67,0 +68,0 @@ }

addon/helpers/malibu-icon.js

@@ -32,2 +32,3 @@ /**
   const labelID = guidFor({});
+  const ariaHidden = parameters['aria-hidden'] || 'false';
   const role = parameters.role || 'img';
@@ -37,7 +38,7 @@
     `Please set a title for the ${name} icon ` +
-    'or set role="presentation" if you believe the icon does not ' +
-    'need a title and is solely presentational. ' +
+    'or set aria-hidden="true" if you believe the icon does not ' +
+    'need a title and is solely decorative. ' +
     'Learn more about accessible icons here: ' +
     'http://design.herokai.com/malibu',
-    parameters.title !== undefined || role === 'presentation',
+    parameters.title !== undefined || ariaHidden === 'true',
     {id:"ember-malibu-icon.missing-title"}
@@ -50,4 +51,5 @@ );
       class="icon malibu-icon ${escape(iconClass)}"
+      aria-hidden="${escape(ariaHidden)}"
+      aria-labelledby="${escape(title ? labelID : '')}"
       role="${escape(role)}"
-      aria-labelledby="${escape(title ? labelID : '')}"
     >
@@ -54,0 +56,0 @@ <title id="${escape(title ? labelID : '')}">${escape(title)}</title>

app.json

 {
   "name": "ember-malibu-icon",
   "description": "Ember Malibu Icon",
-  "scripts": {
-  },
+  "scripts": {},
   "env": {
+    "NPM_CONFIG_PRODUCTION": "false"
   },
-  "formation": {
-  },
-  "addons": [
-
-  ],
+  "formation": {},
+  "addons": [],
   "buildpacks": [
-    { "url": "https://codon-buildpacks.s3.amazonaws.com/buildpacks/heroku/emberjs.tgz" }
+    { "url": "https://github.com/heroku/heroku-buildpack-nodejs" },
+    { "url": "https://github.com/heroku/heroku-buildpack-ember-cli" },
+    { "url": "https://github.com/heroku/heroku-buildpack-static" }
   ],
@@ -25,3 +24,3 @@ "environments": {
         "EMBER_ENV": "test",
-        "NODE_ENV":  "test"
+        "NODE_ENV": "test"
       },
@@ -28,0 +27,0 @@ "scripts": {

package.json

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

README.md

@@ -30,3 +30,3 @@ # Ember Malibu Icon
 * **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 aesthetic/design reasons.
+* **decorative**: Pass `aria-hidden="true"` 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.
 
@@ -47,3 +47,3 @@ #### Informational Usage Example
 
-#### Presentational Usage
+#### Decorative Usage
 
@@ -54,8 +54,8 @@ Use this when the icon does not convey additional meaning. There should be visual text accompanying the icon. **Never use this when only the icon is rendered**.
 
-![Image showing the text "GitHub" next to an SVG icon of the GitHub logo.](/docs/images/presentational.png)
+![Image showing the text "GitHub" next to an SVG icon of the GitHub logo.](/docs/images/decorative.png)
 
-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.
+In this example, the GitHub logo is "decorative" 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" aria-hidden="true" />
 ```
@@ -62,0 +62,0 @@

No alert changes

Improved metrics

Total package byte prevSize

51848

increased by0.14%

No dependency changes