Turn section into an ordered list to improve screen reader experience #…

…3342

src/read-side/html-pages/search-page/_index.scss

@@ -1,6 +1,8 @@
 @use 'functions';
+@use 'list';
 
 .search-categories {
+  @include list.basics();
   display: flex;
   flex-flow: row wrap;
   gap: functions.px-to-rem(32px);

src/read-side/html-pages/search-page/render-as-html/render-page.ts

@@ -1,16 +1,18 @@
 import * as RA from 'fp-ts/ReadonlyArray';
 import { pipe } from 'fp-ts/function';
 import { HtmlFragment, toHtmlFragment } from '../../../../types/html-fragment';
+import { renderListItems } from '../../shared-components/list-items';
 import { renderSearchForm } from '../../shared-components/search-form';
 import { ViewModel } from '../view-model';
 
 const renderSearchCategories = (viewModel: ViewModel) => pipe(
   viewModel,
-  RA.map((category) => `<a href="${category.href}">${category.title}</a>`),
+  RA.map((category) => toHtmlFragment(`<a href="${category.href}">${category.title}</a>`)),
+  renderListItems,
   (categories) => `
-    <section class="search-categories">
-      ${categories.join('')}
-    </section>
+    <ul role="list" class="search-categories">
+      ${categories}
+    </ul>
   `,
 );