abhishek_code | Stripe Developers | Page 1

low barnBOT Apr 18, 2024, 2:16 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1230522294778986577

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

serene basaltBOT Apr 18, 2024, 2:16 PM

#

tawdry dagger Apr 18, 2024, 2:17 PM

#

Hi there 👋 if you're talking about customizing the appearance of the Link Authentication Element, then I believe you're looking for our Appearance API:
https://docs.stripe.com/payments/elements/link-authentication-element#appearance

simple salmon Apr 18, 2024, 2:18 PM

#

how to apply style on focus of "p-icon" class non-public element ?

simple salmon Apr 18, 2024, 2:19 PM

#

tawdry dagger Hi there 👋 if you're talking about customizing the appearance of the Link Authe...

no i am talking about adding acessiblity label to the elements

tawdry dagger Apr 18, 2024, 2:19 PM

#

Sorry, I'm not sure I'm following then. Can. you elaborate a bit?

simple salmon Apr 18, 2024, 2:21 PM

#

api - appearance
we are using "Link" for authentication , in Link elements we get a section in which we have a "close" button, so on this close button i want to add custom CSS when keyboard focus comes on it

#

class for this link button is "p-linkauto..." which i guess is non-public class

tawdry dagger Apr 18, 2024, 2:23 PM

#

The Appearance API can not be used with non-public classes. What you're describing may not be possible.

simple salmon Apr 18, 2024, 2:25 PM

#

p-someprivateclass , i want to custom CSS in element of class like this

tawdry dagger Apr 18, 2024, 2:28 PM

#

That isn't supported

#

https://docs.stripe.com/elements/appearance-api#:~:text=The following are not valid selectors%3A

simple salmon Apr 18, 2024, 2:29 PM

#

okay

#

aria-label -> how to add on a element like phone number,email etc in Link authentication?

tawdry dagger Apr 18, 2024, 2:32 PM

#

I don't think you can insert your own labels into our Elements

simple salmon Apr 18, 2024, 2:34 PM

#

so take care about accessibility issues what can we do like discernible text. the elements which don't have those texts?

tawdry dagger Apr 18, 2024, 2:36 PM

#

You likely report it to our teams, with details about what accessibility software it isn't working well with, so that our teams can make changes to the components we control.

#

Is this the button you're referring to? I see a label for it.

simple salmon Apr 18, 2024, 2:37 PM

#

no no in this element i want to change the CSS.. contarst ratio for close button is failing when keyboard focus comes on it

simple salmon Apr 18, 2024, 2:38 PM

#

tawdry dagger You likely report it to our teams, with details about what accessibility softwar...

this is in regards to "Email" textbox , "Phone Number" textbox - they don't have aria-label for Link authentication only

tawdry dagger Apr 18, 2024, 2:42 PM

#

I can report your concern with the email field not having a label to our teams. What is the phone number field you're referring to?

simple salmon Apr 18, 2024, 2:45 PM

#

once you add a fresh email address to email textbox 3 elements show up "Phone Number" "Country selector within phone number textbox" and "first and last name" all these are missing aria labels

#

try this with a email address you haven't used in current session or before any random new address

tawdry dagger Apr 18, 2024, 2:46 PM

#

Can you show me a screenshot of the fields you're talking about?

simple salmon Apr 18, 2024, 2:49 PM

#

screenshot i can't share it's setup on a different machine which belong to the organization i am working

#

here only use a differnt email address that is never used before

tawdry dagger Apr 18, 2024, 2:51 PM

#

I did that and nothing happens

#

That's why I was hoping for a screenshot of what you're referring to.

simple salmon Apr 18, 2024, 2:51 PM

#

one sec

tawdry dagger Apr 18, 2024, 2:52 PM

#

Up to now I've been thinking you were talking about using the Link Authentication Element, but are you referring to the Link related fields within the Payment Element?

simple salmon Apr 18, 2024, 2:55 PM

#

#

camera pic a bit blur but i hope does the job?

tawdry dagger Apr 18, 2024, 2:56 PM

#

Yup, you're talking about the fields in the Payment Element, we've been talking about completely different Elements.

simple salmon Apr 18, 2024, 2:57 PM

#

oh

tawdry dagger Apr 18, 2024, 2:58 PM

#

I'll take a closer look at those in just a second.

simple salmon Apr 18, 2024, 2:58 PM

#

so these fields :

Close button - contrast ration is not correct when keyboard focus comes on it - how to fix?
"Email" "Country Selector" "Phone" "Name" - no aria-label

tawdry dagger Apr 18, 2024, 3:05 PM

#

For the labels, what values are you expecting there? Is there an accessibility standard that you're trying to adhere to that I can point our teams to which our elements currently don't satisfy?

simple salmon Apr 18, 2024, 3:07 PM

#

descriptive lables ex- for email textbox - aria-label="Email" and so with others

tawdry dagger Apr 18, 2024, 3:15 PM

#

I'm still looking to see if there is a field that will change the color of that X. but I expect it may not be possible to change just the color of that. I may need to report that to our teams as well if that's what you're hoping to be able to do.

simple salmon Apr 18, 2024, 3:16 PM

#

no no .. we don't have to change the color on x , we have to add a style ":focus/active/..."

#

we want to darken the color of the focus border that comes when we press tab key till the control comes to the "x"

tawdry dagger Apr 18, 2024, 3:18 PM

#

Ah, so the contrast problem isn't with the close button, it's with the border put around the close button when it's tabbed to?

simple salmon Apr 18, 2024, 3:19 PM

#

yes

tawdry dagger Apr 18, 2024, 3:26 PM

#

I'm using the Bubblegum theme as a starting point, from this doc:
https://docs.stripe.com/elements/appearance-api#:~:text=The following are not valid selectors%3A

I'm seeing that the colorPrimary variable being used there is adjusting the color of the border shown around components as you tab through. I haven't had a chance yet to see if there is something more specific to the close button and just the border.

simple salmon Apr 18, 2024, 3:28 PM

#

so what do you suggest.. fix will be done from stripe?

#

beacuse everything i am trying stripe is blocking it on x buttton

tawdry dagger Apr 18, 2024, 3:31 PM

#

I'm saying I finally understand your concern and I'm still looking, but I'm also having to help with other threads so I'm leaving what I'm finding as I dig in case you want to follow along. Do you see what I'm describing, where adjusting primaryColor allows you to adjust the border color seen around the close button?

I still don't have details on what the contrast ratio is (what standard are you trying to adhere to, what ratio do you need to meet that, what do you have currently, etc), so I don't have enough details to report a concern to my teams yet for this.

simple salmon Apr 18, 2024, 3:33 PM

#

got it.. consider i want to add some styles to this x button .. how to do that..what will be the selector?

#

rest i will take care

tawdry dagger Apr 18, 2024, 3:36 PM

#

I'm not sure you can target just that button yet, that's what I'm trying figure out between other threads. If it is possible, it will be done via the Appearance API that I referenced, in case you want to play with that and see if you can what you're looking for.

simple salmon Apr 18, 2024, 3:37 PM

#

yeah already did that

tawdry dagger Apr 18, 2024, 3:38 PM

#

Oh, you found how to do what you're trying?

simple salmon Apr 18, 2024, 3:38 PM

#

no prblem
i will see more options
Thanks for your support and guidence

#abhishek_code