[ActionList.SearchField] Fix text and focus styles

[laurkim]

WHY are these changes introduced?

Fixes focus ring and text input styles on ActionList.SearchField with beta flag enabled.

WHAT is this pull request doing?

• Fixes focus ring styling
• FIxes text color on input
  ActionList with search — before

  
  ActionList with search — after

  

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this new story code in ActionList.stories.tsx to test:

export function WithSearch() {
  const [active, setActive] = useState(true);

  const toggleActive = useCallback(() => setActive((active) => !active), []);

  const activator = (
    <Button onClick={toggleActive} disclosure>
      More actions
    </Button>
  );

  return (
    <div style={{height: '250px'}}>
      <Popover
        active={active}
        activator={activator}
        autofocusTarget="first-node"
        onClose={toggleActive}
      >
        <ActionList
          actionRole="menuitem"
          sections={[
            {
              items: [
                {content: 'Import file', icon: ImportMinor},
                {content: 'Export file', icon: ExportMinor},
              ],
            },
            {
              items: [
                {content: 'Edit', icon: EditMinor},
                {content: 'Delete', icon: DeleteMinor},
              ],
            },
            {
              items: [
                {
                  content: 'Blog posts',
                  helpText: 'Manage your blog articles',
                },
                {
                  content: 'Blogs',
                  helpText: 'Manage blogs published to your Online Store',
                },
                {
                  active: true,
                  content: 'Active blogs',
                  helpText: 'This is helpful text',
                  icon: ImportMinor,
                  suffix: <Icon source={TickSmallMinor} />,
                },
                {
                  disabled: true,
                  content: 'Disabled blogs',
                  helpText: 'This is also helpful text',
                  icon: ImportMinor,
                  suffix: <Icon source={TickSmallMinor} />,
                },
              ],
            },
          ]}
        />
      </Popover>
    </div>
  );
}

🎩 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

[MaxCloutier]

LGTM