Merge pull request #46 from ijlee2/add-dynamic-tag

Allowed passing @TagName for dynamic tag

README.md

@@ -114,34 +114,50 @@ The addon provides 1 Glimmer component and 3 helpers:
 <details>
 <summary><code>&lt;ContainerQuery&gt;</code></summary>
 
-The component uses `...attributes` so that you can pass `class` or [`local-class`](https://github.com/salsify/ember-css-modules) _for styling_.<sup>1</sup>
+### Arguments
 
-It also accepts these arguments:
+You can pass these arguments to the component.
 
 | Name | Required | Description | Type |
 |--|:--:|--|--|
-| @features | Yes<sup>2</sup> | Container query definitions | POJO |
+| @features | Yes<sup>1</sup> | Container query definitions | POJO |
 | @dataAttributePrefix | No | Prefix for data attributes | string |
 | @debounce | No | Debounce time for resize (ms) | number ≥ 0 |
+| @tagName | No | Container tag name<sup>2</sup> | HTML tag name |
 
-The component returns a few values that you can consume:
+<sup>1. The component renders without error when `@features` isn't provided. In practice, you will always want to set `@features`.</sup>
+
+<sup>2. By default, the component is a `<div>` element. You can pass a valid HTML tag name to facilitate accessibility and semantic HTML.</sup>
+
+### Attributes
+
+You _may_<sup>1</sup> pass attributes to the component for these reasons:
+
+- Style (e.g. `class`, [`local-class`](https://github.com/salsify/ember-css-modules))
+- Accessibility (e.g. ARIA attributes<sup>2</sup>, roles)
+
+<sup>1. Do refrain from overusing splattributes (e.g. pass a `{{did-insert}}` modifier to fetch data), since the component's API may change and cause unexpected results. Practice separation of concerns when possible. For example, data fetching can be handled by another element or [`@use` decorator](https://github.com/emberjs/rfcs/blob/use-and-resources/text/0567-use-and-resources.md).</sup>
+
+<sup>2. When an [ARIA attribute has multiple values](https://github.com/ijlee2/ember-container-query/issues/38#issuecomment-647017665), the order of values can matter. At the moment, splattributes doesn't guarantee the order.</sup>
+
+### Outputs
+
+You can consume these values in your app or addon.
 
 | Name | Yielded | Description | Type |
 |--|:--:|--|--|
 | features | Yes | Container query results | POJO |
 | dimensions | Yes | Container dimensions | POJO |
 | data-container-query-_{featureName}_ | No | Data attributes for CSS selector | HTML data attribute |
 
-<sup>1. Do refrain from overusing splattributes (e.g. pass a `{{did-insert}}` modifier to fetch data), since the component's API may change and cause unexpected results. Practice separation of concerns when possible. For example, data fetching can be handled by another element or [`@use` decorator](https://github.com/emberjs/rfcs/blob/use-and-resources/text/0567-use-and-resources.md).</sup>
-
-<sup>2. The component renders without error when `@features` isn't provided. In practice, you will always want to set `@features`.</sup>
-
 </details>
 
 
 <details>
 <summary><code>{{cq-aspect-ratio}}</code>, <code>{{cq-height}}</code>, <code>{{cq-width}}</code></summary>
 
+### Arguments
+
 All helpers accept these arguments:
 
 | Name | Required | Description | Type |

addon/components/container-query.hbs

@@ -1,16 +1,18 @@
-<div
-  class="container-query"
-  data-test-container-query
-  {{did-insert this.queryContainer}}
-  {{did-resize this.queryContainer debounce=this.debounce}}
-  ...attributes
->
-  {{yield (hash
-    features=this.queryResults
-    dimensions=(hash
-      aspectRatio=this.aspectRatio
-      height=this.height
-      width=this.width
-    )
-  )}}
-</div>
+{{#let (element this.tagName) as |Tag|}}
+  <Tag
+    class="container-query"
+    data-test-container-query
+    {{did-insert this.queryContainer}}
+    {{did-resize this.queryContainer debounce=this.debounce}}
+    ...attributes
+  >
+    {{yield (hash
+      features=this.queryResults
+      dimensions=(hash
+        aspectRatio=this.aspectRatio
+        height=this.height
+        width=this.width
+      )
+    )}}
+  </Tag>
+{{/let}}

addon/components/container-query.js

@@ -20,6 +20,13 @@ export default class ContainerQueryComponent extends Component {
     return this.args.debounce ?? 0;
   }
 
+  constructor() {
+    super(...arguments);
+
+    // The dynamic tag is restricted to be immutable
+    this.tagName = this.args.tagName || 'div';
+  }
+
   @action queryContainer(element) {
     this.measureDimensions(element);
     this.evaluateQueries();

package.json

@@ -56,7 +56,8 @@
     "@ember/render-modifiers": "^1.0.2",
     "ember-cli-babel": "^7.21.0",
     "ember-cli-htmlbars": "^5.2.0",
-    "ember-did-resize-modifier": "^1.0.0"
+    "ember-did-resize-modifier": "^1.0.0",
+    "ember-element-helper": "^0.3.1"
   },
   "devDependencies": {
     "@ember/optional-features": "^1.3.0",
@@ -91,8 +92,8 @@
     "ember-template-lint": "^2.9.0",
     "ember-test-selectors": "^4.1.0",
     "ember-try": "^1.4.0",
-    "eslint": "^7.3.1",
-    "eslint-plugin-ember": "^8.9.0",
+    "eslint": "^7.4.0",
+    "eslint-plugin-ember": "^8.9.1",
     "eslint-plugin-node": "^11.1.0",
     "lerna-changelog": "^1.0.1",
     "loader.js": "^4.7.0",

tests/dummy/app/components/widgets/widget-1/index.hbs

@@ -4,6 +4,7 @@
     square=(cq-aspect-ratio min=0.8 max=1.25)
     wide=(cq-aspect-ratio min=1.25)
   }}
+  @tagName="section"
   local-class="container"
 >
   <header local-class="header">

tests/dummy/app/components/widgets/widget-2/index.hbs

@@ -4,6 +4,7 @@
     tall=(cq-height min=200 max=480)
     very-tall=(cq-height min=480)
   }}
+  @tagName="section"
   local-class="container"
   as |CQ|
 >

tests/dummy/app/components/widgets/widget-3/index.hbs

@@ -1,4 +1,4 @@
-<div local-class="container">
+<section local-class="container">
   <header local-class="header">
     <h2>Widget 3</h2>
 
@@ -17,4 +17,4 @@
       @concert={{this.concertData}}
     />
   </div>
-</div>
+</section>

tests/dummy/app/components/widgets/widget-4/index.hbs

@@ -1,4 +1,4 @@
-<div local-class="container">
+<section local-class="container">
   <header local-class="header">
     <h2>Widget 4</h2>
   </header>
@@ -12,4 +12,4 @@
       All memos
     </a>
   </div>
-</div>
+</section>

tests/dummy/app/components/widgets/widget-4/memo/index.hbs

@@ -4,6 +4,7 @@
     large=(cq-width min=200)
     short=(cq-height max=200)
   }}
+  @tagName="article"
   local-class="container"
   as |CQ|
 >

tests/dummy/app/components/widgets/widget-5/index.hbs

@@ -3,6 +3,7 @@
     large=(cq-width min=224)
     tall=(cq-height min=120)
   }}
+  @tagName="section"
   local-class="container"
   as |CQ|
 >

tests/dummy/config/environment.js

@@ -23,6 +23,12 @@ module.exports = function(environment) {
     }
   };
 
+  ENV['ember-a11y-testing'] = {
+    componentOptions: {
+      turnAuditOff: true
+    }
+  }
+
   if (environment === 'development') {
     // ENV.APP.LOG_RESOLVER = true;
     // ENV.APP.LOG_ACTIVE_GENERATION = true;