feat: make back navigation keyboard selectable (#1668)

- Add back action list item to list view
- Remove headings from list views

components/header-bar/i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-02-13T15:42:36.303Z\n"
-"PO-Revision-Date: 2025-02-13T15:42:36.304Z\n"
+"POT-Creation-Date: 2025-02-17T10:58:14.678Z\n"
+"PO-Revision-Date: 2025-02-17T10:58:14.680Z\n"
 
 msgid "Browse apps"
 msgstr "Browse apps"
@@ -20,6 +20,9 @@ msgstr "Browse shortcuts"
 msgid "Logout"
 msgstr "Logout"
 
+msgid "Back"
+msgstr "Back"
+
 msgid "Search apps"
 msgstr "Search apps"
 
@@ -38,15 +41,6 @@ msgstr "Top apps"
 msgid "Actions"
 msgstr "Actions"
 
-msgid "All Apps"
-msgstr "All Apps"
-
-msgid "All Commands"
-msgstr "All Commands"
-
-msgid "All Shortcuts"
-msgstr "All Shortcuts"
-
 msgid "DHIS2 {{dhis2Version}}"
 msgstr "DHIS2 {{dhis2Version}}"
 

components/header-bar/src/command-palette/__tests__/browse-apps-view.test.js

@@ -25,7 +25,6 @@ describe('Command Palette - List View - Browse Apps View', () => {
             queryByTestId,
             getByPlaceholderText,
             queryByText,
-            getByLabelText,
             queryAllByTestId,
         } = render(
             <CommandPalette apps={testApps} shortcuts={[]} commands={[]} />
@@ -40,27 +39,27 @@ describe('Command Palette - List View - Browse Apps View', () => {
         const searchField = getByPlaceholderText('Search apps')
         expect(searchField).toHaveValue('')
 
-        const backButton = getByLabelText('Back Button')
-        expect(backButton).toBeInTheDocument()
-
-        expect(queryByText(/All Apps/i)).toBeInTheDocument()
-
         // check for navigation keys legend
         expect(
             queryByTestId('headerbar-navigation-keys-legend')
         ).toBeInTheDocument()
         // list view vertical navigation icon
         expect(queryByTestId('vertical-navigation-icon')).toBeInTheDocument()
 
-        const listItems = queryAllByTestId('headerbar-list-item')
+        // back action
+        const backActionListItem = getByTestId('headerbar-back-action')
+        expect(backActionListItem).not.toHaveClass('highlighted')
+
+        const appsListItems = queryAllByTestId('headerbar-list-item')
+
         // first item highlighted
-        expect(listItems[0].querySelector('span')).toHaveTextContent(
+        expect(appsListItems[0].querySelector('span')).toHaveTextContent(
             'Test App 1'
         )
-        expect(listItems[0]).toHaveClass('highlighted')
+        expect(appsListItems[0]).toHaveClass('highlighted')
 
         // go back to default view
-        await user.click(getByLabelText('Back Button'))
+        await user.click(getByTestId('headerbar-back-action'))
         expect(queryByText(/Top Apps/i)).toBeInTheDocument()
         expect(queryByText(/Actions/i)).toBeInTheDocument()
     })
@@ -70,10 +69,10 @@ describe('Command Palette - List View - Browse Apps View', () => {
         const {
             getAllByRole,
             queryAllByTestId,
-            queryByText,
             findByPlaceholderText,
             container,
             findByTestId,
+            getByTestId,
         } = render(
             <CommandPalette
                 apps={testApps}
@@ -90,48 +89,55 @@ describe('Command Palette - List View - Browse Apps View', () => {
 
         // no filter view
         const searchField = await findByPlaceholderText('Search apps')
-        expect(queryByText(/All Apps/i)).toBeInTheDocument()
 
-        const listItems = queryAllByTestId('headerbar-list-item')
-        // 9 apps
-        expect(listItems.length).toBe(9)
+        // back action
+        const list = queryAllByTestId('headerbar-list')
+        const backActionListItem = getByTestId('headerbar-back-action')
+        const appsListItems = queryAllByTestId('headerbar-list-item')
 
-        // first item highlighted
-        expect(listItems[0]).toHaveClass('highlighted')
-        expect(listItems[0].querySelector('span')).toHaveTextContent(
-            'Test App 1'
-        )
-        listItems[0].focus()
+        const listItems = list[0].children
+        // 9 apps + back action
+        expect(listItems.length).toBe(10)
+        expect(appsListItems.length).toBe(9)
 
-        await user.keyboard('{ArrowDown}')
-        expect(listItems[0]).not.toHaveClass('highlighted')
+        // first list item not to be highlighted
+        expect(listItems[0]).toBe(backActionListItem)
+        expect(backActionListItem).not.toHaveClass('highlighted')
+
+        // first app item highlighted
         expect(listItems[1]).toHaveClass('highlighted')
         expect(listItems[1].querySelector('span')).toHaveTextContent(
-            'Test App 2'
+            'Test App 1'
         )
         listItems[1].focus()
 
         await user.keyboard('{ArrowDown}')
         expect(listItems[1]).not.toHaveClass('highlighted')
         expect(listItems[2]).toHaveClass('highlighted')
         expect(listItems[2].querySelector('span')).toHaveTextContent(
+            'Test App 2'
+        )
+        listItems[1].focus()
+
+        await user.keyboard('{ArrowDown}')
+        expect(listItems[2]).not.toHaveClass('highlighted')
+        expect(listItems[3]).toHaveClass('highlighted')
+        expect(listItems[3].querySelector('span')).toHaveTextContent(
             'Test App 3'
         )
         listItems[2].focus()
 
         await user.keyboard('{ArrowUp}')
-        expect(listItems[2]).not.toHaveClass('highlighted')
-        expect(listItems[1]).toHaveClass('highlighted')
-        expect(listItems[1].querySelector('span')).toHaveTextContent(
+        expect(listItems[3]).not.toHaveClass('highlighted')
+        expect(listItems[2]).toHaveClass('highlighted')
+        expect(listItems[2].querySelector('span')).toHaveTextContent(
             'Test App 2'
         )
         listItems[1].focus()
 
         // filter items view
         await user.type(searchField, 'Test App')
         expect(searchField).toHaveValue('Test App')
-        expect(queryByText(/All Apps/i)).not.toBeInTheDocument()
-        expect(queryByText(/Results for "Test App"/i)).toBeInTheDocument()
 
         // first item highlighted
         expect(listItems[1]).not.toHaveClass('highlighted')
@@ -151,15 +157,7 @@ describe('Command Palette - List View - Browse Apps View', () => {
         const clearButton = getAllByRole('button')[1]
         await user.click(clearButton)
 
-        // back to normal list view/no filter view
-        expect(queryByText(/All Apps/i)).toBeInTheDocument()
-        expect(queryByText(/Results for "Test App"/i)).not.toBeInTheDocument()
-
-        // first item highlighted
-        expect(listItems[8]).not.toHaveClass('highlighted')
+        // first item - back Action highlighted
         expect(listItems[0]).toHaveClass('highlighted')
-        expect(listItems[0].querySelector('span')).toHaveTextContent(
-            'Test App 1'
-        )
     })
 })

components/header-bar/src/command-palette/__tests__/browse-commands-view.test.js

@@ -16,13 +16,7 @@ describe('Command Palette - List View - Browse Commands', () => {
     })
     it('renders Browse Commands View', async () => {
         const user = userEvent.setup()
-        const {
-            getByTestId,
-            queryByTestId,
-            getByPlaceholderText,
-            queryByText,
-            getByLabelText,
-        } = render(
+        const { getByTestId, queryByTestId, getByPlaceholderText } = render(
             <CommandPalette apps={[]} shortcuts={[]} commands={testCommands} />
         )
         // open command palette
@@ -37,22 +31,19 @@ describe('Command Palette - List View - Browse Commands', () => {
         const searchField = getByPlaceholderText('Search commands')
         expect(searchField).toHaveValue('')
 
-        const backButton = getByLabelText('Back Button')
-        expect(backButton).toBeInTheDocument()
+        const backActionListItem = getByTestId('headerbar-back-action')
+        expect(backActionListItem).not.toHaveClass('highlighted')
 
-        expect(queryByText(/All Commands/i)).toBeInTheDocument()
-
-        const listItem = queryByTestId('headerbar-list-item')
+        const commandsListItem = queryByTestId('headerbar-list-item')
         // first item highlighted
-        expect(listItem.querySelector('span')).toHaveTextContent(
+        expect(commandsListItem.querySelector('span')).toHaveTextContent(
             'Test Command 1'
         )
-        expect(listItem).toHaveClass('highlighted')
-        listItem.focus()
+        expect(commandsListItem).toHaveClass('highlighted')
+        commandsListItem.focus()
 
         // Backspace key goes back to default view
         await user.keyboard('{Backspace}')
-        expect(queryByText(/All Commands/i)).not.toBeInTheDocument()
         expect(queryByTestId('headerbar-actions-menu')).toBeInTheDocument()
     })
 })

components/header-bar/src/command-palette/__tests__/browse-shortcuts-view.test.js

@@ -21,7 +21,6 @@ describe('Command Palette - List View - Browse Shortcuts', () => {
             queryByTestId,
             getByPlaceholderText,
             queryByText,
-            getByLabelText,
         } = render(
             <CommandPalette apps={[]} shortcuts={testShortcuts} commands={[]} />
         )
@@ -37,21 +36,19 @@ describe('Command Palette - List View - Browse Shortcuts', () => {
         const searchField = getByPlaceholderText('Search shortcuts')
         expect(searchField).toHaveValue('')
 
-        const backButton = getByLabelText('Back Button')
-        expect(backButton).toBeInTheDocument()
+        // back action
+        const backActionListItem = getByTestId('headerbar-back-action')
+        expect(backActionListItem).not.toHaveClass('highlighted')
 
-        expect(queryByText(/All Shortcuts/i)).toBeInTheDocument()
-
-        const listItem = queryByTestId('headerbar-list-item')
+        const shortcutsListItem = queryByTestId('headerbar-list-item')
         // first item highlighted
-        expect(listItem.querySelector('span')).toHaveTextContent(
+        expect(shortcutsListItem.querySelector('span')).toHaveTextContent(
             'Test Shortcut 1'
         )
-        expect(listItem).toHaveClass('highlighted')
+        expect(shortcutsListItem).toHaveClass('highlighted')
 
         // go back to default view
-        await user.click(getByLabelText('Back Button'))
-        expect(queryByText(/All Shortcuts/i)).not.toBeInTheDocument()
+        await user.click(getByTestId('headerbar-back-action'))
         expect(queryByText(/Actions/i)).toBeInTheDocument()
     })
 })

components/header-bar/src/command-palette/__tests__/command-palette.test.js

@@ -165,7 +165,6 @@ describe('Command Palette Component', () => {
         // go to All Shortcuts (list) view
         await user.click(getByTestId('headerbar-browse-shortcuts'))
         expect(queryByText(/Top Apps/i)).not.toBeInTheDocument()
-        expect(queryByText(/All Shortcuts/i)).toBeInTheDocument()
 
         // Esc key closes the modal
         await user.keyboard('{Escape}')
@@ -207,31 +206,28 @@ describe('Command Palette Component', () => {
 
     it('moves to the default view with backspace key if there is no search filter', async () => {
         const user = userEvent.setup()
-        const {
-            container,
-            getByPlaceholderText,
-            getByTestId,
-            queryByTestId,
-            queryByText,
-        } = render(
-            <CommandPalette apps={[]} shortcuts={testShortcuts} commands={[]} />
-        )
+        const { container, getByPlaceholderText, getByTestId, queryByTestId } =
+            render(
+                <CommandPalette
+                    apps={[]}
+                    shortcuts={testShortcuts}
+                    commands={[]}
+                />
+            )
         // open modal
         fireEvent.keyDown(container, { key: 'k', ctrlKey: true })
 
         // go to All Shortcuts (list) view
         await user.click(getByTestId('headerbar-browse-shortcuts'))
 
         expect(queryByTestId('headerbar-actions-menu')).not.toBeInTheDocument()
-        expect(queryByText(/All Shortcuts/i)).toBeInTheDocument()
 
         // Search field
         const searchField = await getByPlaceholderText('Search shortcuts')
         expect(searchField).toHaveValue('')
 
         // Backspace key goes back to default view
         await user.keyboard('{Backspace}')
-        expect(queryByText(/All Shortcuts/i)).not.toBeInTheDocument()
         expect(queryByTestId('headerbar-actions-menu')).toBeInTheDocument()
     })
 })

components/header-bar/src/command-palette/__tests__/home-view.test.js

@@ -73,7 +73,6 @@ describe('Command Palette - Home View', () => {
         expect(searchField).toHaveValue('Test')
 
         expect(queryByTestId('headerbar-top-apps-list')).not.toBeInTheDocument()
-        expect(queryByText(/Results for "Test"/i)).toBeInTheDocument()
 
         const listItems = queryAllByTestId('headerbar-list-item')
         // 9 apps + 1 command + 1 shortcut
@@ -89,7 +88,6 @@ describe('Command Palette - Home View', () => {
 
         // back to default view
         expect(queryByTestId('headerbar-top-apps-list')).toBeInTheDocument()
-        expect(queryByText(/Results for "Test"/i)).not.toBeInTheDocument()
     })
 
     it('handles right arrow navigation in the grid on the home view', async () => {