1060293 - Remove dialer's buttons.css once gaia-button lands

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia::Dialer, defect)

Description

[Doug Sherk (:drs) (inactive)]

In bug 1059336, it would have been really helpful to have been able to include shared/style/buttons.css directly to get button styling for free. Unfortunately, the CSS in this file is overly broad and matches several button elements within the dialer which we don't want styled.

For now, we fixed this by copying and pasting some styles from shared/style/buttons.css into apps/communications/dialer/style/buttons.css, and making the selectors less overly broad.

We can fix this two ways:
1) Sanitize the button elements in the dialer, i.e. rename them so that they don't match the button selectors in shared/style/buttons.css
2) Create a gaia_button web component and use this for buttons that we want styled, since this would sandbox the styles.

Comment 1

[Doug Sherk (:drs) (inactive)]

We can get started on this sooner, but I don't think it's doable within this sprint.

Comment 2

[Paco Rampas [:paco]]

Attachment: patch in github

Comment 3

[Paco Rampas [:paco]]

Comment on attachment 8499526 [details] [review]
patch in github

Hi Doug,

With this patch, I have tried to sanitize the buttons. Now, the visualization is correctly. Could you check it?

Thanks.

Comment 4

[Doug Sherk (:drs) (inactive)]

Comment on attachment 8499526 [details] [review]
patch in github

Removing `role="button"` breaks a11y. I also think that needing the `[hidden] { display: none; }` rule is a good sign that we're doing something wrong.

Unfortunately, I don't see a way to do this that won't be extremely backwards and awkward. We don't have a gaia_button web component yet, so maybe it's time to introduce that.

I'm a bit surprised that we don't have this already. My guess is that this particular scenario doesn't happen much, and compartmentalizing a button is generally overkill.

Wilson, does this seem reasonable to you?

Comment 5

[Doug Sherk (:drs) (inactive)]

Also bringing in Yura to confirm that we shouldn't be removing `role="button"` attributes.

Comment 6

[Yura Zenevich [:yzen] (please use "needinfo")]

(In reply to Doug Sherk (:drs) from comment #5)
> Also bringing in Yura to confirm that we shouldn't be removing
> `role="button"` attributes.

Yeah in case where's it's applied on a div it will break a11y. It is redundant with the button element so should be OK to remove (unless there's some styling that depends on it and will be updated after bug 1074224 lands, it updates this block too so [role="button"] would no longer affect the styling).

Comment 7

[Wilson Page [:wilsonpage]]

(In reply to Doug Sherk (:drs) from comment #4)
> Comment on attachment 8499526 [details] [review]
> patch in github
> 
> Removing `role="button"` breaks a11y. I also think that needing the
> `[hidden] { display: none; }` rule is a good sign that we're doing something
> wrong.
> 
> Unfortunately, I don't see a way to do this that won't be extremely
> backwards and awkward. We don't have a gaia_button web component yet, so
> maybe it's time to introduce that.
> 
> I'm a bit surprised that we don't have this already. My guess is that this
> particular scenario doesn't happen much, and compartmentalizing a button is
> generally overkill.
> 
> Wilson, does this seem reasonable to you?

<gaia-button> is coming in v2.2. All apps that use existing buttons.css will be required to migrate to the web-component. Perhaps it's best to wait for the component to land on master?

Comment 8

[Doug Sherk (:drs) (inactive)]

(In reply to Wilson Page [:wilsonpage] from comment #7)
> <gaia-button> is coming in v2.2. All apps that use existing buttons.css will
> be required to migrate to the web-component. Perhaps it's best to wait for
> the component to land on master?

Great! Is there a bug tracking this?

Comment 9

[Wilson Page [:wilsonpage]]

(In reply to Doug Sherk (:drs) from comment #8)
> (In reply to Wilson Page [:wilsonpage] from comment #7)
> > <gaia-button> is coming in v2.2. All apps that use existing buttons.css will
> > be required to migrate to the web-component. Perhaps it's best to wait for
> > the component to land on master?
> 
> Great! Is there a bug tracking this?

It's still in the early prototyping stage, but there will be bugs assigned once it's time to land in Gaia apps.

Comment 10

[Doug Sherk (:drs) (inactive)]

(In reply to Wilson Page [:wilsonpage] from comment #9)
> It's still in the early prototyping stage, but there will be bugs assigned
> once it's time to land in Gaia apps.

Ok, since we don't have a way to track this, I'm setting a needinfo on you until bugs are filed.

Paco: Looks like there's nothing to do here until that's ready.

Comment 11

[BMO Automation]

Firefox OS is not being worked on