Skip to content
This repository has been archived by the owner on May 2, 2023. It is now read-only.

fix(expandable): use aria-expanded attribute - TWIG-103 #199

Merged
merged 4 commits into from
Nov 4, 2019
Merged

Conversation

papegaill
Copy link
Contributor

PR description

Please drop a few lines about the PR: what it does, how to test it, etc.

QA Checklist

In order to ensure a safe and quick review, please check that your PR follow those guidelines:

  • I have put the vanilla component as devDependencies
  • I have put the specs package as devDependencies
  • I have added the components directly used in the twig file (with include or embed) as dependencies
  • My component is listed in @ecl-twig/ec-components's dependencies
  • My variables naming follow the guidelines (snake case for twig)
  • I have provided tests
  • I have provided documentation (for the "notes" tab)
  • If my local yarn.lock contains changes, I have committed it
  • I have given my PR the proper label (pr: review needed to indicate that I'm done and now waiting for a review ,pr: wip to indicate that I'm actively working on it ...)

@papegaill papegaill added the pr: review needed Use this label to show that your PR needs to be review label Oct 29, 2019
@planctus planctus added pr: under review and removed pr: review needed Use this label to show that your PR needs to be review labels Oct 29, 2019
Copy link
Contributor

@planctus planctus left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you overdid, here...in ECL the only thing was the addition of the default aria-expanded="false".

{% set _button_attributes = [
{ name: 'aria-controls', value: _aria_controls },
{ name: 'data-ecl-expandable-toggle', value: true },
{ name: 'data-ecl-label-expanded', value: _label_expanded },
{ name: 'data-ecl-label-collapsed', value: _label_collapsed }
{ name: 'data-ecl-label-collapsed', value: _label_collapsed },
{ name: 'aria-expanded', value: _expanded }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the aria-expanded attribute is handled by javascript in this component, so we just set it initially as false (at least this is the way it is done in ECL) and then is js playing with that. I see that by doing like you did we could offer the possibility of using the component with a "not-collapsed" state initially, but this is not what the ECL definition of the component does, so i would not introduce it here on our side as an extra parameter.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree but this was already the case before the actual PR, I was also a bit confused with this, see the parameter here:

- "expanded" (boolean) (default: false)

Anyway, I have removed the expanded parameter now.

@@ -83,7 +75,7 @@
<div
id="{{ _id ~ '-content' }}"
class="ecl-expandable__content"
{{ _content_hidden_attribute }}
{% if not _expanded %}hidden{% endif %}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as before, this is handled by javascript, we set it as hidden and then js will play with that. I would have honestly considered this as an improvement in case it was meant to provide a non javascript solution with the collapsed button hidden and the content revealed, but it's not the case, so to stick to the definition of the component as we have it ECL we set this as hidden by default and then we leave the task to the js.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as my previous comment this was already implemented... See:

Updated now.

@planctus
Copy link
Contributor

@papegaill , i had a confirmation on the ECL side about this, personally speaking i would make this as an expandable/collapsible thing, but the collapsible "use case" is already covered by the accordion where we say not to use it with less than three pieces of information, so the single "collapsible" is not an use case, therefore no need to handle any logic on our side.

@papegaill papegaill added pr: review needed Use this label to show that your PR needs to be review and removed pr: modification needed labels Nov 4, 2019
@planctus planctus added pr: under review and removed pr: review needed Use this label to show that your PR needs to be review labels Nov 4, 2019
@planctus planctus self-assigned this Nov 4, 2019
@planctus planctus merged commit 3c7f647 into develop Nov 4, 2019
@planctus planctus deleted the TWIG-103 branch November 4, 2019 15:50
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants