[Tag] Update styles per approved redesign

[meissadia]

Closes #1760

Changes

(1) Correct Select page route in browser tests

(2) Styles for .o-multiselect_choices to match updated specs

Default

• Border radius: 3px
• font-size 16px
• background: teal-20
• Vertical padding: 4px, Horizontal padding: 10px
• border-radius: 3px
• Outline: Solid 1px teal
• Padding between text and close icon: 10px

Hover

• Background: teal-40

Focused

• Background: teal-20
• Outline: dotted 1px teal
• Outline offset: 1px (no change)

Active

• Background teal

Testing

1. Visual inspection
2. Automated tests
   • Browsers tests indicate a failure in MS Edge on Windows 10. I've manually tested in MS Edge (I can't figure out what Windows version I'm remotely connected to) and the Select works as expected.

Screenshots

State	UI
Default
Focus
Hover
Hover/Focus
Active

Checklist

• PR has an informative and human-readable title
• Changes are limited to a single goal (no scope creep)
• Code can be automatically merged (no conflicts)
• Code follows the standards laid out in the CFPB development guidelines
• Passes all existing automated tests
• Any change in functionality is tested
• New functions are documented (with a description, list of inputs, and expected output)
• Placeholder code is flagged / future todos are captured in comments
• Visually tested in supported browsers and devices (see checklist below 👇)
• Project documentation has been updated
• Reviewers requested with the Reviewers tool ➡️

Testing checklist

Browsers

• Chrome on desktop
• Firefox
• Safari on macOS
• Edge
• Safari on iOS
• Chrome on Android

Accessibility

• Keyboard friendly
• Screen reader friendly

Other

• Is useable without CSS
• Is useable without JS
• Flexible from small to large screens
• No linting errors or warnings
• JavaScript tests are passing

[netlify]

✅ Thanks for the improvements! Browse a preview of your changes using the link below.

Name	Link
🔨 Latest commit	a31cacd
🔍 Latest deploy log	https://app.netlify.com/sites/cfpb-design-system/deploys/65281f6bdab5700008efafa2
😎 Deploy Preview	https://deploy-preview-1777--cfpb-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[natalia-fitzgerald]

@meissadia

• I am seeing an odd thing when I view using the deploy link. There is a rounded corner on the text input field and the left corners of the multiselect. The single select does not have the rounded corners. When I view these Design System components outside of the deploy preview the corners for the text input and multiselect are not rounded. The text input and selscts should not have rounded corners.

Here’s what I’m seeing (mobile):

Chrome and Safari

Safari
See left corners of multiselect

[meissadia]

@natalia-fitzgerald

Focus styles updated to show teal-20 background:

• I am seeing an odd thing when I view using the deploy link.

I opened #1778 for those issues.

Since these inconsistencies are pre-existing in the DS pages, and are not related to the Tag styles, I don't think we should try to address them here.

[natalia-fitzgerald]

Looks great!