Skip to content

[redesign] implementing tabs interaction #157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from

Conversation

mansona
Copy link
Member

@mansona mansona commented Apr 12, 2019

@ghislaineguerin recently added "tabs" styles and this PR just adds functionality to those tabs.

I'm doing it as a bit of a contextual component to make it as easy as possible for people to use (at the expense of making it a bit more complicated than it probably ought to be)

@MelSumner I'm wondering about the accessibility of this component 🤔 should we make sure that it is accessible before merging it or should we create an issue to review it and fix it (so we can keep up the momentum)?

Copy link
Member

@MelSumner MelSumner left a comment

Choose a reason for hiding this comment

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

Please confirm that you've implemented this in an accessible way. It is a requirement of this project that it is implemented in an accessible way from the ground up.

You can reference https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html.

@mansona mansona changed the title implementing tabs interaction [redesign] implementing tabs interaction Apr 12, 2019
@mansona
Copy link
Member Author

mansona commented Apr 12, 2019

@MelSumner do you have any objection to us creating an issue to make this component accessible as a follow-up issue instead of blocking the merge into the redesign branch? I understand your position if we were merging to master and agree 👍

@MelSumner
Copy link
Member

@mansona yes, I object. Accessibility needs to be tested before we allow anything new. If we don't test for accessibility first, then it's an afterthought, and we already know that it causes a lot of issues to approach it that way (which is why we chose differently).

@@ -0,0 +1,9 @@
<div class="tabs-item {{if this.active 'tabs-item--active'}}">
<a class="tabs-link" href="javascript:void(0)" onclick={{action 'click'}}>{{@title}}</a>
Copy link
Member

Choose a reason for hiding this comment

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

this should be a button not a link


{{#if this.active}}
<EmberWormhole @to={{@wormholeId}}>
<p>{{yield}}</p>
Copy link
Member

@MelSumner MelSumner Apr 19, 2019

Choose a reason for hiding this comment

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

a <div> should wrap this content, not a <p>

@MelSumner
Copy link
Member

@mansona there are also some merge conflicts to be resolved, thank you!

@steveax
Copy link

steveax commented Jul 23, 2019

@MelSumner, @mansona, what's the status of this (and the related #158)? I could potentially help out if you're still looking to update the tabs in an accessible way.

Regards,

-S

@mansona
Copy link
Member Author

mansona commented Jul 24, 2019

@steveax Yes it still needs to be done, I guess I felt a little bit blocked on it because it was an intimidating task to achieve.

Are you on the Ember Community Discord? could you reach out to me there (my nick is @real_ate) and we can coordinate the work 😄

@mansona
Copy link
Member Author

mansona commented Aug 16, 2019

The new tabs component has been removed because it is no longer needed by the design so I'm closing this PR for now. We can revive it later if we feel like it needs to be 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants