fix: support aria-controls with multiple ids in Toogler #11167

MoarCoding · 2018-04-12T10:01:32Z

-- edited by @ncoden

DanielRuf · 2018-04-12T11:48:17Z

js/foundation.toggler.js

@@ -65,6 +65,21 @@ class Toggler extends Plugin {
        'aria-controls': id,


There is still the old logic left, var id and others are set multiple times which can cause issues.
It might make more sense to create new variables in the new code block or extend the old logic with the new one.

Quite right! Missed that one. I'll have another look to make sure that I haven't missed anything outside of the changed code. PR coming soon.

MoarCoding · 2018-04-12T13:12:24Z

I removed the old code, but now I get a failed check. I can't see what I did wrong so could you take a look?

DanielRuf · 2018-04-12T13:32:38Z

The Travis test? Well, it seems there was a timeout accessing the Browserstack API in general. I'll try to rerun the test.

MoarCoding · 2018-04-12T13:44:04Z

Thanks!

DanielRuf · 2018-04-12T13:46:18Z

The Browserstack test successfully ran now. You can also do it by clicking on the retry button.

https://travis-ci.org/zurb/foundation-sites/builds/365598109 (you get there by clicking on the green checkmark / red cross next to your commit).

MoarCoding · 2018-04-12T13:58:44Z

Thanks. Good to know.

DanielRuf · 2018-04-12T14:38:34Z

Hm, why did you close the PR?
Was it by accident?

MoarCoding · 2018-04-12T19:23:57Z

More through inexperience. =) I've only just begun using git and this is my first contribution to open source. I'll study https://foundation.zurb.com/get-involved/code-contributor-guide.html a bit more.

DanielRuf · 2018-04-12T19:33:02Z

Ah, your first contribution here. Congrats 🎉
We can also push changes to your branch and can give you feedback through reviews.

Great that you spotted the issue.

So far everything is ok and tests are stilk ok. I'll try to test your changes later.

ncoden · 2018-04-12T20:59:23Z

Hi @MoarCoding. Thanks for your issue & PR, that's a nice first contribution 🎉!

I have a few comments to make about it. I hope it will help you to improve yourself in Git and working on Open Source projects.

Write your commits names and Pull Request title in the "imperative" form.
It must describe "what this commit/PR does", like if the sentence was starting by now the software should.... I renamed your PR to ...support aria-controls with multiple ids in Toogler
Use prefixes for commits names and Pull Request title
like feat (new feature), fix (you repair something), docs (documentation), refactor (you change the code without introducing changes), style (you simply change code formatting), tests (units or visual tests) or chore (for boring day-to-day tasks not touching the actual code). I would recommend you to use them for Foundation, but also your others projects. You can take a look at the AngularJs Git Commit Message Convention also.
Describe everything you did and why in your commits and Pull Requests body.
Even if you talked about it in the PR you're resolving. It's always helpful later. Explains what you did if the code is not clear enough (but it should be) and for which reasons. Give references (in this case the W3C Reference about aria-controls would be useful. You should always reference the issue you are closing (like Closes #11166).
Configure Git so it uses your GitHub email address.
See https://help.github.com/articles/setting-your-commit-email-address-in-git/. This way we can know you are the author of these commits. You can also sign them if you like.
Always open a pull request from a dedicated branch.
Like fix/toggler-support-aria-controls-multiple-ids-11166), so you develop branch stay clean and you can provide multiple Pull Requests for various issues.

And finally, here are some helpful ressources for Git: 📚

ncoden · 2018-04-12T21:26:05Z

js/foundation.toggler.js

+
+      //make sure not to duplicate id in aria-controls
+      $this.attr({
+        'aria-controls': `${$this.attr('aria-controls') ? $this.attr('aria-controls').replace(id, '') : ''} ${id}`.trim(),


This would actually remove test1 inside id="test15 test25" and change it to id="5 test25 test1". You should use RegExp instead with the boundary special character \b.

ncoden · 2018-04-12T21:28:52Z

js/foundation.toggler.js

-        'aria-expanded': this.$element.is(':hidden') ? false : true
+    var id = this.$element[0].id,
+        $triggers = $(`[data-open~="${id}"], [data-close~="${id}"], [data-toggle~="${id}"]`),
+        that = this;


Foundation uses Babel, so you can use all ES2015 features like arrow functions. See https://github.com/lukehoban/es6features

I think this part could be cleaned a bit. I'll take care of this.

…ibute Changes: * Only add the id if it does not exist in `aria-contolers` with better RegExp detection * Use ES6 features to simplify code * Add comments

ncoden

@MoarCoding I took care of the requested changes. Please let me know what you think about it ;)

DanielRuf

works very good, did not see any issue

MoarCoding · 2018-04-13T11:52:17Z

Thanks, @ncoden! I'll make sure to tick those boxes when submitting my next PR.

2bfd3e0 fixed bug where aria-controls is not updated with multiple ids 3e6e35c Removed old code 6437acf fix: improve id detection/replacment for Toggler `aria-controls` attribute Co-Authored-By: Nicolas Coden <nicolas@ncoden.fr> Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>

fixed bug where aria-controls is not updated with multiple ids

2bfd3e0

MoarCoding mentioned this pull request Apr 12, 2018

Foundation.toggler.js does not update aria-controls with ids of multiple toggled nodes #11166

Closed

DanielRuf reviewed Apr 12, 2018

View reviewed changes

Removed old code

3e6e35c

MoarCoding closed this Apr 12, 2018

MoarCoding reopened this Apr 12, 2018

ncoden changed the title ~~fixed bug where aria-controls is not updated with multiple ids~~ fix: support aria-controls with multiple ids in Toogler Apr 12, 2018

ncoden suggested changes Apr 12, 2018

View reviewed changes

fix: improve id detection/replacment for Toggler aria-controls attr…

6437acf

…ibute Changes: * Only add the id if it does not exist in `aria-contolers` with better RegExp detection * Use ES6 features to simplify code * Add comments

ncoden approved these changes Apr 12, 2018

View reviewed changes

ncoden requested a review from DanielRuf April 12, 2018 22:18

DanielRuf approved these changes Apr 13, 2018

View reviewed changes

DanielRuf mentioned this pull request Apr 13, 2018

docs: fix small typo in Sass doc of $card-background #11173

Merged

ncoden merged commit d312a5b into foundation:develop Apr 13, 2018

ncoden added this to the 6.5.0 milestone Apr 24, 2018

This was referenced Jun 16, 2018

🚀 Release v6.5.0-rc.1 #11340

Merged

fix: keep a scrollbar on document when Reveal opens #7831 #11341

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: support aria-controls with multiple ids in Toogler #11167

fix: support aria-controls with multiple ids in Toogler #11167

MoarCoding commented Apr 12, 2018 •

edited by ncoden

DanielRuf Apr 12, 2018

MoarCoding Apr 12, 2018

MoarCoding commented Apr 12, 2018

DanielRuf commented Apr 12, 2018

MoarCoding commented Apr 12, 2018

DanielRuf commented Apr 12, 2018

MoarCoding commented Apr 12, 2018

DanielRuf commented Apr 12, 2018 •

edited

MoarCoding commented Apr 12, 2018

DanielRuf commented Apr 12, 2018

ncoden commented Apr 12, 2018 •

edited

ncoden Apr 12, 2018

ncoden Apr 12, 2018 •

edited

ncoden left a comment

DanielRuf left a comment

MoarCoding commented Apr 13, 2018 •

edited

		@@ -65,6 +65,21 @@ class Toggler extends Plugin {
		'aria-controls': id,

fix: support aria-controls with multiple ids in Toogler #11167

fix: support aria-controls with multiple ids in Toogler #11167

Conversation

MoarCoding commented Apr 12, 2018 • edited by ncoden

DanielRuf Apr 12, 2018

Choose a reason for hiding this comment

MoarCoding Apr 12, 2018

Choose a reason for hiding this comment

MoarCoding commented Apr 12, 2018

DanielRuf commented Apr 12, 2018

MoarCoding commented Apr 12, 2018

DanielRuf commented Apr 12, 2018

MoarCoding commented Apr 12, 2018

DanielRuf commented Apr 12, 2018 • edited

MoarCoding commented Apr 12, 2018

DanielRuf commented Apr 12, 2018

ncoden commented Apr 12, 2018 • edited

ncoden Apr 12, 2018

Choose a reason for hiding this comment

ncoden Apr 12, 2018 • edited

Choose a reason for hiding this comment

ncoden left a comment

Choose a reason for hiding this comment

DanielRuf left a comment

Choose a reason for hiding this comment

MoarCoding commented Apr 13, 2018 • edited

MoarCoding commented Apr 12, 2018 •

edited by ncoden

DanielRuf commented Apr 12, 2018 •

edited

ncoden commented Apr 12, 2018 •

edited

ncoden Apr 12, 2018 •

edited

MoarCoding commented Apr 13, 2018 •

edited