Allowed passing @tagName for dynamic tag #46
Conversation
ijlee2
force-pushed
the
add-dynamic-tag
branch
6 times, most recently
from
bef6ec8 to
1f0c9ff
Compare
| @@ -23,6 +23,12 @@ module.exports = function(environment) { | |||
| } | |||
| }; | |||
|
|
|||
| ENV['ember-a11y-testing'] = { | |||
| componentOptions: { | |||
| turnAuditOff: true | |||
There was a problem hiding this comment.
I turned off ember-a11y-testing in development because I ran into an error while testing window resize:
element-resize-detector.js:165 Uncaught Axe is already running. Use `await axe.run()` to wait for the previous run to finish before starting a new run.
| super(...arguments); | ||
|
|
||
| // The dynamic tag is restricted to be immutable | ||
| this.tagName = this.args.tagName || 'div'; |
There was a problem hiding this comment.
I used the OR operator || so that, in addition to null and undefined (which can be covered by the nullish coalescing operator ??), the empty string '' would also result in the default <div> tag.
There was a problem hiding this comment.
Your note on setting this in the constructor and not letting it be dynamic I think is pretty sensible 👍
|
|
||
|
|
||
| test('The component continues to have the <div> tag when it is resized', async function(assert) { | ||
| await resizeContainer(500, 300); |
There was a problem hiding this comment.
😍 First time seeing these, very nice. Test helpers were on my list but didn't get a chance to making these properly.
There was a problem hiding this comment.
Yeah, it's amazing how we can write an ordinary function as a test helper. Writing tests in Ember is quite fun.
TODO
ember-element-helper@tagName(e.g. is the value immutable?)@tagNameto simplify layout@tagName@tagNameDescription
This PR addresses and can close the issue #38.
Based on @chadian's suggestion, I pulled in
ember-element-helperas a dependency so that developers can create a dynamic tag (instead of<div>) to facilitate accessibility and semantic HTML.If I understood correctly the migration plan that
ember-element-helperoffered in its README:then I believe
ember-element-helperwill remain a dependency until Ember 3.16 (this addon's current minimum compatibility version) is no longer an LTS (long-term support) version.Notes
Currently, the
ember-element-helperaddon allows the tag name to change at a later time. In the original RFC, the tag name was considered to be immutable.I couldn't think of a use case for mutable tag. To be safe, I set
this.tagNamein the constructor so that the value stays the same even if@tagNamechanges.In the demo app, I tested what would happen if I let
<Widgets::Widget-2>update@tagName. I created a tracked property in the component, then updated the value usinglater()from@ember/runloop. I noticed the rerender of the content inside<ContainerQuery>when the component's tag is updated.References