fix: highlight BottomNavigation overflow selector for the first overflow item

src/bottom-navigation/__tests__/bottom-navigation.test.tsx

@@ -0,0 +1,29 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { BottomNavigation, NavItem } from '..';
+import { Overflow } from '../../icon';
+
+describe('BottomNavigation', () => {
+  it('highlights the overflow selector when the active item is only reachable via More', () => {
+    const items = Array.from({ length: 6 }).map((_, idx) => (
+      <NavItem key={idx} title={`Item ${idx}`} icon={Overflow}>
+        {`panel ${idx}`}
+      </NavItem>
+    ));
+
+    const { getByText } = render(<BottomNavigation activeKey={4}>{items}</BottomNavigation>);
+
+    // Item 4 only renders inside the overflow panel/selector (the first 4 items get
+    // direct selectors), so its being active must highlight the "More" tab.
+    const moreTab = getByText('More').closest('[role="tab"]');
+    expect(moreTab).toHaveAttribute('aria-selected', 'true');
+  });
+});

src/bottom-navigation/bottom-navigation.tsx

@@ -79,7 +79,7 @@ const BottomNavigation = ({
       title="More"
       icon={Overflow}
       onChange={() => setDisplayOverflow(true)}
-      isActive={displayOverflow || activeKey > 4}
+      isActive={displayOverflow || activeKey >= MAX_SELECTORS - 1}
       overrides={{ Title: overrides.OverflowTitle, Selector: overrides.OverflowSelector }}
       key={'more'}
     />