Apidoc a11y

app/documentation/api/page.tsx

@@ -6,45 +6,40 @@ import Text from '@/components/Text'
 export default function ApiMainPage() {
   return <>
     <DefaultLayout heroSmall heroTitle='Oskari API'>
-      <div>
         <Text>
           Oskari API is defined as bundles. Bundle is a definition of functionality that may provide external API to control the functionality.
         </Text>
-        <HighlightBox>
-          <div style={{ display: 'flex', flexDirection: 'column'}}>
+        <HighlightBox style= {{ backgroundColor: '#FAFAFA'}}>
+          <div style={{ display: 'flex', flexDirection: 'column', maxWidth: '85vw'}}>
             <h2 style={{fontSize: '1.625rem'}}>Building a custom Oskari application</h2>
             <div>
-              <p>Choose the functionalities from bundle documentation</p>
+              <p className="mt-2 mb-2">Choose the functionalities from bundle documentation</p>
               <Button
                 variant='primary'
                 title='Bundle documentation'
                 href={'/documentation/api/bundles'}/>
             </div>
             <div style={{ marginTop: '2em'}}>
               <h2 style={{fontSize: '1.625rem'}}>Working with an existing Oskari application</h2>
-              <div style={{ gridColumn: '2' }} className='flex justify-center'>
-                <div className='flex w-full justify-center gap-4 items-center'>
-                  <div>
-                    <p>Controlling existing functionality</p>
-                    <Button
-                      variant='primary'
-                      title='Requests documentation'
-                      href={'/documentation/api/requests'}/>
-                  </div>
-                  <div>
-                    <p>Reacting to events</p>
-                    <Button
-                      variant='primary'
-                      title='Events documentation'
-                      href={'/documentation/api/events'}/>
-                  </div>
+              <div className='flex flex-col'>
+                <div className="mt-3 mb-3">
+                  <p className="mt-2 mb-2">Controlling existing functionality</p>
+                  <Button
+                    variant='primary'
+                    title='Requests documentation'
+                    href={'/documentation/api/requests'}/>
+                </div>
+                <div>
+                  <p className="mt-2 mb-2">Reacting to events</p>
+                  <Button
+                    variant='primary'
+                    title='Events documentation'
+                    href={'/documentation/api/events'}/>
                 </div>
-
               </div>
             </div>
           </div>
         </HighlightBox>
-      </div>
     </DefaultLayout>
   </>;
 }

components/Checkbox/Checkbox.tsx

@@ -1,14 +1,19 @@
 'use client'
 import styles from '@/styles/checkbox.module.scss'
 import { ReactNode } from 'react';
+import { KeyboardEvent } from 'react';
 
 export function CheckboxGroup({children}: {children: Array<ReactNode>}) {
   return <div className={`${styles.checkbox_group}`}>{children}</div>
 }
 
+function shouldToggle(event: KeyboardEvent) {
+  return event?.key === 'Enter';
+}
+
 export default function Checkbox({isChecked, title, onChange}: {isChecked: boolean, title: string, onChange: (checked: boolean) => void}) {
-  return <div className={`${styles.checkbox}`} onClick={() => onChange(!isChecked)}>
-    <div className={`${styles.checkbox__header}`}>{title}</div>
-    <input type='checkbox' defaultChecked={isChecked}/>
+  return <div className={`${styles.checkbox} pr-2`} onClick={() => onChange(!isChecked)}>
+    <label htmlFor={'checkbox_' + title} className={`${styles.checkbox__header}`}>{title}</label>
+    <input id={'checkbox_' + title} type='checkbox' defaultChecked={isChecked} onKeyUp={(event) => { if (shouldToggle(event)) { onChange(!isChecked); }}}/>
   </div>;
 }

styles/accordion.module.scss

@@ -124,7 +124,7 @@
 
     /*uncover the top border of active link of the first list element*/
     li:first-child {
-      margin-top: 0.2rem;
+      margin-top: 0.3rem;
     }
   }
 }

styles/checkbox.module.scss

@@ -12,6 +12,10 @@
   display: flex;
   flex-direction: row;
 
+  &:has(input:active), &:has(input:focus) {
+    outline: auto;
+  }
+
   &__header {
     background-color: var(--color-light);
     font-weight: 700;

styles/main.scss

@@ -138,7 +138,7 @@ h3 {
 
 .content-wrapper {
   /*bring this further up so it's closer to balloons.*/
-  margin-top: -20rem;
+  margin-top: -30vh;
   /*make sure this appears on top of balloons*/
   z-index: 2;
   /*make sure we can use z-index and thus sure this stays on top of the balloons*/