Skip to content
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

Bug: Button behavior (state) after click not correct #459

Open
dfsbb opened this issue Jun 16, 2020 · 6 comments
Open

Bug: Button behavior (state) after click not correct #459

dfsbb opened this issue Jun 16, 2020 · 6 comments
Labels
bug Something isn't working comp: lean Issues related to @sbb-esta/angular lean design effort1: hours prio4: low Should be done after all higher priorities are done ux feedback

Comments

@dfsbb
Copy link

dfsbb commented Jun 16, 2020

Describe the bug
When I click a button (any mode), after the click the state of the button should go back to default. At the moment after the click the button state stays on hover/focus. Only when I take the focus off the button the state changes. That's in my opinion not correct.

Affected are: public library, business library

To Reproduce
Steps to reproduce the behavior:

  1. https://angular.app.sbb.ch/business/components/button
  2. click on the button
  3. after the click the state of the button is still hover/focus

see also: button_after_click_not_correct_state

Expected behavior
After the click the state of the button should go back to default state.

@dfsbb dfsbb added the bug Something isn't working label Jun 16, 2020
@dfsbb dfsbb changed the title Bug: Bug: Button behavior (state) after click not correct Jun 16, 2020
@kyubisation
Copy link
Collaborator

In my opinion the focused state (which this is), should also be highlighted.
@Frenggi What is your opinion on this?

@dfsbb
Copy link
Author

dfsbb commented Jun 16, 2020

@kyubisation yes you're right. Maybe I explained it not exactly. ;-) What I mean is, that after a click on a button the focus should not stay on this button. See sbb.ch behavior of the timetable search.

@kyubisation
Copy link
Collaborator

You could easily do this by setting the focus in the (click) event handler on the desired element, which should have the desired effect.
Or am I still misunderstanding something?
Because from an accessibility aspect it's not the best design to simply remove the focus.

@dfsbb
Copy link
Author

dfsbb commented Jun 16, 2020

Okay, I see...
So maybe we should think about to change the focus state styling?
https://digital.sbb.ch/de/webapps/components/button onClick looks like the hover state. But should the focus state really look exactly the same as the onClick and hover state? I have never seen that in forms before, that a clicked button still looks like clicked or hovered after the click. ;-)
@Frenggi, what do you think?

@Frenggi
Copy link

Frenggi commented Jun 16, 2020

As already discussed bilateral with @dfsbb, I agree that the button should not look the same after a click.
When I check other design systems (e.g. material design) the "focused" and the "onclick" / "pressed" are separated visually. I think we should do this as well. And then the button stays focused after click.

@kyubisation kyubisation added comp: lean Issues related to @sbb-esta/angular lean design effort1: hours prio4: low Should be done after all higher priorities are done labels Sep 16, 2020
@mhaertwig
Copy link
Collaborator

@mcilurzo there's no design specification for this. Can you have a look, please?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working comp: lean Issues related to @sbb-esta/angular lean design effort1: hours prio4: low Should be done after all higher priorities are done ux feedback
Projects
None yet
Development

No branches or pull requests

4 participants