Update language toggle component - Design

[caw310]

Description

During the a11y review, Ryan raised a concern that only having bold text as the visual indicator may not be enough for visually impaired users.
The language toggle design needs updating to make the selected language more prominent. Here are some notes from the discussion between DST designers and Matt.

• Keep it as inert if you are on current version of the page. Bold, black and underlined.
• Don’t move or shift to accommodate the bar or icon.
• If there is a WCAG reason icon is needed, okay with an icon. Follow side nav rules. Refer to USWDS implementation. Pad towards the text. If that doesn’t work, try other things. Go with bolder, thicker underline. As long as not blue.

Details

Dev ticket to make updates to address a11y issues: #3564

Tasks

• Update the design of the language toggle component to add a bar or icon next to the selected language
• Review updated designs with DST designers and PO to get feedback
• Make any necessary changes
• Post link to Figma design in Language toggle accessibility updates #3564

Acceptance Criteria

• Language toggle designs have been updated

[LWWright7]

Per yesterday's meeting with @humancompanion-usds the design should utilize the colored bar to indicate the language that is currently "in use" similar to the USWDS side navigation component:

[LWWright7]

@babsdenney @danbrady This is ready for review!

[danbrady]

@LWWright7 Similar to Barb's comment in Figma, I think we might want to explore a few options. I see you did what we discussed as a potential solution, but the vertical bar looks awkward to me. Not sure if it's because the active bar is shorter than the normal separator one? Or because English has a left bar when active but not when inactive? Or because the text is still blue like it's a link but it's not...?

For reference

Currently published:

---

Your proposed changes:

---

Honestly, I would expect it to simply look like this:

Perhaps I'm misunderstanding the issue with this?

@rsmithadhoc Could you help us understand what the accessibility issue is with this approach? Thanks!

CC: @humancompanion-usds

[rsmithadhoc]

@LWWright7 Similar to Barb's comment in Figma, I think we might want to explore a few options. I see you did what we discussed as a potential solution, but the vertical bar looks awkward to me. Not sure if it's because the active bar is shorter than the normal separator one? Or because English has a left bar when active but not when inactive? Or because the text is still blue like it's a link but it's not...?

For reference

Currently published:

### Your proposed changes: Honestly, I would expect it to simply look like this:

Perhaps I'm misunderstanding the issue with this?

@rsmithadhoc Could you help us understand what the accessibility issue is with this approach? Thanks!

CC: @humancompanion-usds

@danbrady I think keeping it a link makes the experience more consistent for all users. I wrote up a comment for breadcrumbs when we looked at that, and I think similar reasoning applies here.

[LWWright7]

@rsmithadhoc are you suggesting something more like this?

[LWWright7]

Several other design considerations mentioned above now in Figma

[rsmithadhoc]

@rsmithadhoc are you suggesting something more like this?

Several other design considerations mentioned above now in Figma

@LWWright7 Yeah, I think keeping the current selection as a link and maintaining the link styling is good. So the option presented here or any of the options in Figma that do that are fine with me. Thanks!

[LWWright7]

@rsmithadhoc The design team met with @humancompanion-usds yesterday to discuss this matter and we took into account your comments in regards to the similarities of breadcrumb. While we understand your position for a11y sake, @danbrady pointed out this WCAG example breadcrumb here:

For the sake of better usability and user experience we are suggesting that the page/language that is active display to the user (or the language that is being displayed on the page) should differ from appearance from the other links that are active. The user may be confused if they see what they think is a link and clicking on it does nothing, so we are suggesting that we follow the example set here by WCAG to make the current page text black in color.

With that being said, we believe that one of these two designs is best suited for the task:

We also wanted to tag @briandeconinck for your input and opinion on the matter at hand.

[LWWright7]

@babsdenney @danbrady This one is ready for review!!

@briandeconinck Would still love to hear your 2 cents on this one! :)

[rsmithadhoc]

@rsmithadhoc The design team met with @humancompanion-usds yesterday to discuss this matter and we took into account your comments in regards to the similarities of breadcrumb. While we understand your position for a11y sake, @danbrady pointed out this WCAG example breadcrumb here:

For the sake of better usability and user experience we are suggesting that the page/language that is active display to the user (or the language that is being displayed on the page) should differ from appearance from the other links that are active. The user may be confused if they see what they think is a link and clicking on it does nothing, so we are suggesting that we follow the example set here by WCAG to make the current page text black in color.

With that being said, we believe that one of these two designs is best suited for the task:

We also wanted to tag @briandeconinck for your input and opinion on the matter at hand.

If you feel strongly about that version, we can go with that. It's not a huge deal, so I don't think we need to drag out the discussion any longer.

However, I will point out that the example shared from W3C is a link, it just doesn't look like one.

[danbrady]

Design looks good, @LWWright7 !

I tried all the combinations. It looks like when it's English and Tagalog only, with Tagalog active, the English link doesn't show: (As seen by the star)

Also, I notice the "Show Espanol" property does display when it's the active language but "Show Tagalog" does not display when it is the active language. Ideally, it doesn't make sense to display the "Show [langauge]" property when that language is active. (Why would you hide the active language?) So if we can hide the "Show..." property for those specific cases, great. However, I can see Figma being finicky with it. So if "Show Espanol/Tagalog" needs to display even when they're the active languages, that's okay. I think we should be consistent with either way.

[babsdenney]

@LWWright7 This looks good, all the states worked well except the focus. The focus state is missing the yellow outline.

[LWWright7]

@babsdenney That's super odd....because if you look at the component itself, the focus state has the yellow outline there....

I have no idea why it would be doing this. @danbrady do you have any clue why there would be this discrepancy?

[LWWright7]

Here's a video of it disappearing in real time.... 🤔

Screen.Recording.2025-01-14.at.12.50.21.PM.mov

@babsdenney @danbrady

[LWWright7]

This is carrying over to the next sprint.

@babsdenney @danbrady - ready for review again. Thanks!