chore(web): a11y tweaks (#6170)

* Move id for main-content further up on sidebar layout * Make direct link suggestions selectable with keyboard like other items * Refactor a bit * One more change Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Jan 7, 2022 · 080da8e · 080da8e
1 parent 9024040
commit 080da8e
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 38 deletions.
diff --git a/apps/web/components/SearchInput/SearchInput.tsx b/apps/web/components/SearchInput/SearchInput.tsx
@@ -172,25 +172,34 @@ const useSearch = (
   return state
 }
 
+type SubmitType = {
+  type: 'query' | 'link'
+  string: string
+}
+
 const useSubmit = (locale: Locale, onRouting?: () => void) => {
   const Router = useRouter()
   const { linkResolver } = useLinkResolver()
 
   return useCallback(
-    (q: string) => {
-      if (q) {
-        Router.push({
+    (item: SubmitType) => {
+      Router.push({
+        ...(item.type === 'query' && {
           pathname: linkResolver('search').href,
-          query: { q },
-        }).then(() => {
-          window.scrollTo(0, 0)
-        })
-        if (onRouting) {
-          onRouting()
-        }
+          query: { q: item.string },
+        }),
+        ...(item.type === 'link' && {
+          pathname: item.string,
+        }),
+      }).then(() => {
+        window.scrollTo(0, 0)
+      })
+
+      if (onRouting) {
+        onRouting()
       }
     },
-    [Router, linkResolver],
+    [Router, linkResolver, onRouting],
   )
 }
 
@@ -240,21 +249,30 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
     }, [setHasFocus])
 
     return (
-      <Downshift<string>
+      <Downshift<SubmitType>
         id={id}
         initialInputValue={initialInputValue}
-        onChange={(q) => {
-          return onSubmit(`${search.prefix} ${q}`.trim() || '')
+        onChange={(item) => {
+          if (item?.type === 'query') {
+            return onSubmit({
+              ...item,
+              string: `${search.prefix} ${item.string}`.trim() || '',
+            })
+          }
+
+          if (item?.type === 'link') {
+            return onSubmit(item)
+          }
         }}
         onInputValueChange={(q) => setSearchTerm(q)}
-        itemToString={(v) => {
-          const str = `${search.prefix ? search.prefix + ' ' : ''}${v}`.trim()
-
-          if (str === 'null') {
-            return ''
+        itemToString={(item) => {
+          if (item?.type === 'query') {
+            return `${search.prefix ? search.prefix + ' ' : ''}${
+              item.string
+            }`.trim()
           }
 
-          return str
+          return ''
         }}
         stateReducer={(state, changes) => {
           // pressing tab when input is not empty should move focus to the
@@ -295,7 +313,10 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
             buttonProps={{
               onClick: () => {
                 closeMenu()
-                onSubmit(inputValue)
+                onSubmit({
+                  type: 'query',
+                  string: inputValue,
+                })
               },
               onFocus,
               onBlur,
@@ -313,10 +334,15 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
               placeholder,
               colored,
               onKeyDown: (e) => {
+                const v = e.currentTarget.value
+
                 if (e.key === 'Enter' && highlightedIndex == null) {
                   e.currentTarget.blur()
                   closeMenu()
-                  onSubmit(e.currentTarget.value)
+                  onSubmit({
+                    type: 'query',
+                    string: v,
+                  })
                 }
               },
             })}
@@ -392,7 +418,10 @@ const Results = ({
                 ? suggestion.replace(search.term, '')
                 : ''
               const { onClick, ...itemProps } = getItemProps({
-                item: suggestion,
+                item: {
+                  type: 'query',
+                  string: suggestion,
+                },
               })
               return (
                 <div
@@ -426,30 +455,36 @@ const Results = ({
                 News[] &
                 SubArticle[])
                 .slice(0, 5)
-                .map((item) => {
+                .map((item, i) => {
                   const { onClick, ...itemProps } = getItemProps({
-                    item: '',
+                    item: {
+                      type: 'link',
+                      string: linkResolver(
+                        item.__typename as LinkType,
+                        item.slug.split('/'),
+                      ).href,
+                    },
                   })
                   return (
-                    <div
+                    <Link
                       key={item.id}
                       {...itemProps}
                       onClick={(e) => {
                         onClick(e)
                         onRouting()
                       }}
+                      color="blue400"
+                      underline="normal"
+                      pureChildren
+                      underlineVisibility={
+                        search.suggestions.length + i === highlightedIndex
+                          ? 'always'
+                          : 'hover'
+                      }
+                      skipTab
                     >
-                      <Link
-                        {...linkResolver(
-                          item.__typename as LinkType,
-                          item.slug.split('/'),
-                        )}
-                      >
-                        <Text variant="h5" color="blue400">
-                          {item.title}
-                        </Text>
-                      </Link>
-                    </div>
+                      {item.title}
+                    </Link>
                   )
                 })}
             </Stack>

diff --git a/apps/web/screens/Layouts/SidebarLayout.tsx b/apps/web/screens/Layouts/SidebarLayout.tsx
@@ -33,6 +33,7 @@ export const SidebarLayout: FC<SidebarLayoutProps> = ({
   <Box paddingTop={paddingTop}>
     <GridContainer position="none">
       <Box
+        id={contentId || 'main-content'}
         display="flex"
         flexDirection="row"
         height="full"
@@ -50,7 +51,7 @@ export const SidebarLayout: FC<SidebarLayoutProps> = ({
         >
           {sidebarContent}
         </Box>
-        <GridContainer id={contentId || 'main-content'}>
+        <GridContainer>
           <GridRow>
             <GridColumn
               offset={fullWidthContent ? '0' : ['0', '0', '0', '0', '1/9']}