WSTEAM1-1011 UGC Form Submit Button

[emilysaffron]

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

[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.

[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?

[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.

Oh weird, what browser are you checking on ? when i focus on it with tab it looks like this for me

[amoore108]

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]

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

[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.

[emilysaffron]

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

[Isabella-Mitchell]

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

[emilysaffron]

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

[amoore108]

Nice job!

[Isabella-Mitchell]

Fab - thanks for making those changes :)