[Navigation] Adjust :active color for selected items

[alex-page]

WHY are these changes introduced?

The text color does not reflect active state and only does that when I click elsewhere on the page

@sainihas

WHAT is this pull request doing?

Making sure that when clicking on a navigation item the :active state does not override the selected color.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[kyledurand]

👍

[github-actions]

🟢 This pull request modifies 2 files and might impact 1 other files.

Details:

All files potentially affected (total: 1)

• /src/components/Navigation/Navigation.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/Navigation/Navigation.scss (total: 1)

Files potentially affected (total: 1)

• /src/components/Navigation/Navigation.tsx

[kaelig]

It doesn't seem to have fixed it, as seen in https://5d559397bae39100201eedc1-aofjqgxwqu.chromatic.com/?path=/story/all-components-navigation--navigation-with-various-states-and-secondary-elements

[alex-page]

@kaelig removing this :focus color change fixes it up