simorgh icon indicating copy to clipboard operation
simorgh copied to clipboard

Published 20 hours ago • verified publisher icon bbc

WSTEAM1-1011 UGC Form Submit Button

Open emilysaffron opened this issue 9 months ago • 9 comments

Resolves JIRA WSTEAM1-1011

Overall changes

Adds styling for submit button

Code changes

  • Adds Service neutral core to palette
  • Styles submit button

Testing

  1. visit http://localhost.bbc.com:7081/mundo/send/u50853489?renderer_env=live and check it matches the designs for stage 1 , button designs
  2. Check it matches a11y and screenreader UX

Helpful Links

Add Links to useful resources related to this PR if applicable.

Coding Standards

Repository use guidelines

emilysaffron avatar May 09 '24 15:05 emilysaffron

Is the focus indicator correct? This is the Submit button with tab order. I was expecting a black line around the entire button per the interactions tab on Figma.

image

karinathomasbbc avatar May 13 '24 08:05 karinathomasbbc

Also (perhaps a question for @amoore108 or @andrewscfc), do we need to do anything about disabling the Submit button functionality when viewing the UGC Page on Storybook?

karinathomasbbc avatar May 13 '24 08:05 karinathomasbbc

Is the focus indicator correct? This is the Submit button with tab order. I was expecting a black line around the entire button per the interactions tab on Figma.

image

Oh weird, what browser are you checking on ? when i focus on it with tab it looks like this for me Screenshot 2024-05-13 at 09 31 27

emilysaffron avatar May 13 '24 08:05 emilysaffron

Also (perhaps a question for @amoore108 or @andrewscfc), do we need to do anything about disabling the Submit button functionality when viewing the UGC Page on Storybook?

Not really sure tbh. The UGC API is only accessible on authorised domains, so Storybook will always fail. Don't think its a huge problem as it won't do anything if someone tries to make a POST request from it.

amoore108 avatar May 13 '24 08:05 amoore108

Testing Firefox I get the same focus indicator issue @karinathomasbbc had. Chrome seems fine though 🤔

amoore108 avatar May 13 '24 09:05 amoore108

Testing Firefox I get the same focus indicator issue @karinathomasbbc had. Chrome seems fine though 🤔

Oops forgot to mention - yes, this was on Firefox, using the Storybook Permalink.

karinathomasbbc avatar May 13 '24 09:05 karinathomasbbc

Testing Firefox I get the same focus indicator issue @karinathomasbbc had. Chrome seems fine though 🤔

Oops forgot to mention - yes, this was on Firefox, using the Storybook Permalink.

okay this should be fixed now, not entirely sure why the global styling for the focus indicator wasnt working for firefox, but if i just paste it explicitly into the css file it works 🤷 weird

emilysaffron avatar May 13 '24 09:05 emilysaffron

Not sure if relevant but I remember Firefox being a bit odd sometimes with the focus indicator. It's possible this fix helps? (giving accessibility.tabfocus a value of 7) - https://support.mozilla.org/en-US/questions/1278793

Isabella-Mitchell avatar May 13 '24 09:05 Isabella-Mitchell

Testing Firefox I get the same focus indicator issue @karinathomasbbc had. Chrome seems fine though 🤔

Oops forgot to mention - yes, this was on Firefox, using the Storybook Permalink.

okay this should be fixed now, not entirely sure why the global styling for the focus indicator wasnt working for firefox, but if i just paste it explicitly into the css file it works 🤷 weird

figured it out, firefox has default styling for elements of type 'submit' that needed to be overwritten

emilysaffron avatar May 13 '24 10:05 emilysaffron