teamforus · RobinMeles · Dec 11, 2025 · Nov 20, 2025 · Nov 26, 2025 · Dec 5, 2025
diff --git a/react/assets/forus-platform/scss/_common/dashboard.scss b/react/assets/forus-platform/scss/_common/dashboard.scss
@@ -3897,6 +3897,7 @@ body {
             padding: 10px 25px;
             cursor: pointer;
             transition: background 0.4s;
+            outline-offset: -2px;
 
             .preference-option-details {
                 flex-grow: 1;

diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-empty.scss b/react/assets/forus-webshop/scss/includes/blocks/block-empty.scss
@@ -38,7 +38,7 @@
     }
 
     .block-description {
-        font: 700 14px/20px var(--base-font);
+        font: 700 14px/24px var(--base-font);
         color: #646f79;
         margin: 0 0 35px;
 

diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-fund.scss b/react/assets/forus-webshop/scss/includes/blocks/block-fund.scss
@@ -56,23 +56,23 @@
         }
 
         .fund-details-items {
-            display: flex;
-            flex-direction: row;
-
-            .fund-details-item {
-                flex-direction: column;
-                width: 100%;
-
-                .fund-details-item-label {
-                    font: 600 14px var(--base-font);
-                    color: #646f79;
-                    margin-bottom: 5px;
-                }
+            display: grid;
+            grid-auto-flow: column;
+            grid-auto-rows: auto auto;
+            gap: 5px 10px;
+            align-items: start;
+
+            .fund-details-item-label {
+                font: 600 14px var(--base-font);
+                color: #646f79;
+                grid-row: 1;
+            }
 
-                .fund-details-item-value {
-                    font: 600 16px var(--base-font);
-                    color: #303030;
-                }
+            .fund-details-item-value {
+                font: 600 16px var(--base-font);
+                color: #303030;
+                grid-row: 2;
+                margin: 0;
             }
         }
     }
@@ -90,8 +90,19 @@
             }
 
             .fund-details-items {
-                gap: 20px;
-                flex-direction: column;
+                display: block;
+
+                .fund-details-item-label {
+                    margin-bottom: 5px;
+                }
+
+                .fund-details-item-value {
+                    margin-bottom: 20px;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
             }
         }
     }

diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-preferences.scss b/react/assets/forus-webshop/scss/includes/blocks/block-preferences.scss
@@ -8,6 +8,7 @@
         padding: 10px 25px;
         cursor: pointer;
         transition: background .4s;
+        outline-offset: -2px !important;
 
         .preference-option-details {
             flex-grow: 1;

diff --git a/react/assets/forus-webshop/scss/includes/components/card.scss b/react/assets/forus-webshop/scss/includes/components/card.scss
@@ -172,6 +172,11 @@
             padding: 15px;
         }
 
+        &.card-section-md-vertical {
+            padding-top: 15px;
+            padding-bottom: 15px;
+        }
+
         &.card-section-sm {
             padding: 10px;
         }

diff --git a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFD.tsx b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFD.tsx
@@ -62,8 +62,8 @@ export default function SelectControlOptionsFD<T>({
             aria-haspopup="listbox"
             aria-expanded={showOptions}
             aria-labelledby={ariaLabelledby || controlId}
-            aria-controls={`${controlId}_options`}
-            aria-activedescendant={modelValue ? `option_${modelValue.id}` : null}
+            aria-controls={showOptions ? `${controlId}_options` : null}
+            aria-activedescendant={showOptions && modelValue ? `option_${modelValue.id}` : null}
             ref={selectorRef}
             onKeyDown={(e) => (disabled ? null : onKeyDown(e))}
             onBlur={onBlur}>
@@ -125,7 +125,7 @@ export default function SelectControlOptionsFD<T>({
                         className="select-control-search form-control"
                         onClick={searchOption}
                         style={{ display: showOptions && allowSearch ? 'none' : 'block' }}
-                        title={placeholderValue || placeholder}>
+                        aria-label={placeholderValue || placeholder}>
                         <span className="select-control-search-placeholder">{placeholderValue || placeholder}</span>
                         <span className={'select-control-icon'}>
                             <em className={showOptions ? 'mdi mdi-chevron-up' : 'mdi mdi-chevron-down'} />
@@ -142,6 +142,7 @@ export default function SelectControlOptionsFD<T>({
                                     value={query}
                                     tabIndex={0}
                                     onClick={onInputClick}
+                                    aria-controls={`${controlId}_options`}
                                     onChange={(e) => setQuery(e.target.value)}
                                     className="select-control-search form-control"
                                 />

diff --git a/...t/src/dashboard/components/elements/select-control/templates/SelectControlOptionsLang.tsx b/...t/src/dashboard/components/elements/select-control/templates/SelectControlOptionsLang.tsx
@@ -50,7 +50,7 @@ export default function SelectControlOptionsLang<T>({
             data-dusk={dusk}
             aria-haspopup="listbox"
             aria-expanded={showOptions}
-            aria-labelledby={controlId}
+            aria-labelledby={allowSearch ? controlId : null}
             aria-controls={`${controlId}_options`}
             ref={selectorRef}
             onKeyDown={onKeyDown}
@@ -59,7 +59,6 @@ export default function SelectControlOptionsLang<T>({
                 {/* Placeholder */}
                 <label
                     htmlFor={controlId}
-                    role="presentation"
                     ref={placeholderRef}
                     className="lang-control-search"
                     onClick={searchOption}

diff --git a/react/src/webshop/components/elements/block-panel-group/PaneGroupPanel.tsx b/react/src/webshop/components/elements/block-panel-group/PaneGroupPanel.tsx
@@ -47,9 +47,9 @@ export default function PaneGroupPanel({
                         {icon === 'store-marker-outline' && <em className="mdi mdi-store-marker-outline" />}
                     </div>
                 )}
-                <h3 className="panel-header-title" id={titleId}>
+                <h2 className="panel-header-title" id={titleId}>
                     {title}
-                </h3>
+                </h2>
                 <em className={`mdi ${isOpen ? 'mdi-chevron-down' : 'mdi-chevron-right'}`} aria-hidden="true" />
                 <span className="sr-only">
                     {isOpen ? translate('product.labels.collapse_section') : translate('product.labels.expand_section')}

diff --git a/react/src/webshop/components/elements/forms/RangeControl.tsx b/react/src/webshop/components/elements/forms/RangeControl.tsx
@@ -35,7 +35,10 @@ export default function RangeControl({
                 className="horizontal-slider"
                 thumbClassName="horizontal-slider-thumb"
                 trackClassName="horizontal-slider-track"
-                ariaLabelledby={['first-slider-label', 'second-slider-label']}
+                ariaLabel={[
+                    translate('form.range_control.first_slider_aria_label'),
+                    translate('form.range_control.second_slider_aria_label'),
+                ]}
                 ariaValuetext={(state) => {
                     return translate('form.range_control.aria_value', {
                         prefix: prefix?.trim(),

diff --git a/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemGrid.tsx b/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemGrid.tsx
@@ -49,9 +49,9 @@ export default function ProductsListItemGrid({
                 />
             </div>
             <div className="product-details">
-                <h3 className="product-title" data-dusk="productName">
+                <h2 className="product-title" data-dusk="productName">
                     {product.name}
-                </h3>
+                </h2>
                 <div className="product-subtitle">{product.organization.name}</div>
             </div>
             <div className="product-actions">

diff --git a/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemList.tsx b/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemList.tsx
@@ -38,9 +38,9 @@ export default function ProductsListItemList({
             <div className="product-content">
                 <div className="product-details">
                     <div className="product-details-header">
-                        <h3 className="product-title" data-dusk="productName">
+                        <h2 className="product-title" data-dusk="productName">
                             {product.name}
-                        </h3>
+                        </h2>
                         <div className="product-subtitle">{product.organization.name}</div>
                     </div>
 

diff --git a/react/src/webshop/components/elements/sections/Section.tsx b/react/src/webshop/components/elements/sections/Section.tsx
@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import classNames from 'classnames';
+import useTranslate from '../../../../dashboard/hooks/useTranslate';
 
 export default function Section({
     id,
@@ -24,6 +25,16 @@ export default function Section({
     wrapper?: boolean;
     children: ReactNode | ReactNode[];
 }) {
+    const translate = useTranslate();
+
+    const ariaLabel = useMemo(() => {
+        if (type === 'footer') {
+            return translate('app_footer.footer_aria_label');
+        }
+
+        return type === 'copyright' ? translate('app_footer.copyright_aria_label') : null;
+    }, [translate, type]);
+
     return (
         <section
             className={classNames(
@@ -41,6 +52,8 @@ export default function Section({
                 type === 'breadcrumbs' && 'section-breadcrumbs',
                 type === 'voucher_details' && 'section-voucher-details',
             )}
+            role={type === 'footer' ? 'contentinfo' : type === 'copyright' ? 'region' : null}
+            aria-label={ariaLabel}
             id={id}>
             {wrapper ? <div className="wrapper">{children}</div> : children}
         </section>

diff --git a/react/src/webshop/components/elements/tooltip/Tooltip.tsx b/react/src/webshop/components/elements/tooltip/Tooltip.tsx
@@ -5,8 +5,8 @@ export default function Tooltip({ text, className }: { text: string; className?:
     const translate = useTranslate();
 
     return (
-        <div className="tooltip-block" aria-label={translate(text)} title={translate(text)}>
-            <div className="tooltip-icon" role="button" tabIndex={0}>
+        <div className="tooltip-block" title={translate(text)}>
+            <div className="tooltip-icon" aria-label={translate(text)} role="button" tabIndex={0}>
                 <em className="mdi mdi-information-variant-circle" />
             </div>
             <div className={`tooltip ${className}`}>{translate(text)}</div>

diff --git a/react/src/webshop/components/elements/top-navbar/desktop/TopNavbarDesktop.tsx b/react/src/webshop/components/elements/top-navbar/desktop/TopNavbarDesktop.tsx
@@ -13,6 +13,7 @@ import { mainContext } from '../../../../contexts/MainContext';
 import { TopNavbarDesktopSearchButton } from './TopNavbarDesktopSearchButton';
 import { layoutContext } from '../../../../contexts/LayoutContext';
 import { useElementSize } from '../../../../hooks/useElementSize';
+import useTranslate from '../../../../../dashboard/hooks/useTranslate';
 
 export const TopNavbarDesktop = ({
     hideOnScroll = false,
@@ -21,6 +22,7 @@ export const TopNavbarDesktop = ({
     hideOnScroll?: boolean;
     className?: string;
 }) => {
+    const translate = useTranslate();
     const envData = useEnvData();
     const appConfigs = useAppConfigs();
     const { showSearchBox } = useContext(mainContext);
@@ -49,6 +51,7 @@ export const TopNavbarDesktop = ({
     return (
         <nav
             ref={navbarDesktopRef}
+            aria-label={translate('top_navbar.nav_aria_label')}
             className={classNames(
                 'block block-navbar-desktop',
                 className,

diff --git a/react/src/webshop/components/modals/Modal2FASetup.tsx b/react/src/webshop/components/modals/Modal2FASetup.tsx
@@ -613,11 +613,15 @@ export default function Modal2FASetup({
                             <div className="modal-section-description">
                                 <div className="form-group">
                                     {auth2FA.provider_type.type == 'phone' && (
-                                        <div className="form-label">{translate('modal_2fa_setup.enter_sms_code')}</div>
+                                        <div className="form-label flex flex-center">
+                                            {translate('modal_2fa_setup.enter_sms_code')}
+                                        </div>
                                     )}
 
                                     {auth2FA.provider_type.type == 'authenticator' && (
-                                        <div className="form-label">{translate('modal_2fa_setup.enter_app_code')}</div>
+                                        <div className="form-label flex flex-center">
+                                            {translate('modal_2fa_setup.enter_app_code')}
+                                        </div>
                                     )}
 
                                     <div className="form-group">

diff --git a/react/src/webshop/components/modals/ModalIdentityProxyExpired.tsx b/react/src/webshop/components/modals/ModalIdentityProxyExpired.tsx
@@ -47,7 +47,7 @@ export default function ModalIdentityProxyExpired({ modal }: { modal: ModalState
                         <div className="modal-section-icon">
                             <div className="mdi mdi-cancel" />
                         </div>
-                        <h2 className="modal-section-title" role="heading" id="expiredIdentityDialogTitle">
+                        <h2 className="modal-section-title" id="expiredIdentityDialogTitle">
                             {translate('expired_identity.title')}
                         </h2>
                         <div className="modal-section-description" id="expiredIdentityDialogDescription">

diff --git a/react/src/webshop/components/modals/ModalNotification.tsx b/react/src/webshop/components/modals/ModalNotification.tsx
@@ -96,7 +96,7 @@ export default function ModalNotification({
                     role="button"
                 />
                 <div className="modal-header">
-                    <h2 className="modal-header-title" role="heading" id="notificationDialogTitle">
+                    <h2 className="modal-header-title" id="notificationDialogTitle">
                         {title}
                     </h2>
                 </div>

diff --git a/react/src/webshop/components/pages/auth/Start.tsx b/react/src/webshop/components/pages/auth/Start.tsx
@@ -579,9 +579,7 @@ export default function Start() {
 
                                     {authEmailRestoreSent && (
                                         <div className="sign_up-pane">
-                                            <h1 className="sr-only" role="heading">
-                                                {translate('popup_auth.header.title_sr')}
-                                            </h1>
+                                            <h1 className="sr-only">{translate('popup_auth.header.title_sr')}</h1>
                                             <h2 className="sign_up-pane-header">
                                                 {translate('popup_auth.header.title')}
                                             </h2>
@@ -611,10 +609,8 @@ export default function Start() {
                                     )}
                                     {authEmailConfirmationSent && (
                                         <div className="sign_up-pane">
-                                            <h1 className="sr-only" role="heading">
-                                                {translate('popup_auth.header.title_sr')}
-                                            </h1>
-                                            <h2 className="sign_up-pane-header" role="heading">
+                                            <h1 className="sr-only">{translate('popup_auth.header.title_sr')}</h1>
+                                            <h2 className="sign_up-pane-header">
                                                 {translate('popup_auth.header.title')}
                                             </h2>
                                             <div className="sign_up-pane-body" data-dusk="authEmailSentConfirmation">
@@ -626,7 +622,7 @@ export default function Start() {
                                                             alt=""
                                                         />
                                                     </div>
-                                                    <h3 className="sign_up-email_sent-title" role="heading">
+                                                    <h3 className="sign_up-email_sent-title">
                                                         {translate(
                                                             `popup_auth.header.title_existing_user_succes_${appConfigs?.communication_type}`,
                                                         )}

diff --git a/react/src/webshop/components/pages/fund-requests/FundRequests.tsx b/react/src/webshop/components/pages/fund-requests/FundRequests.tsx
@@ -122,7 +122,7 @@ export default function FundRequests() {
                     <div className="form form-compact">
                         <div className="profile-aside-block">
                             <div className="form-group">
-                                <label className="form-label" htmlFor="select_fund">
+                                <label className="form-label" id="select_fund_label" htmlFor="select_fund">
                                     Tegoeden
                                 </label>
                                 <SelectControl
@@ -132,6 +132,7 @@ export default function FundRequests() {
                                     options={funds}
                                     multiline={true}
                                     dusk="selectControlFunds"
+                                    ariaLabelledby="select_fund_label"
                                     onChange={(fund_id?: number) => filterUpdate({ fund_id })}
                                 />
                             </div>

diff --git a/...webshop/components/pages/funds-request/elements/steps/FundRequestStepCriteriaOverview.tsx b/...webshop/components/pages/funds-request/elements/steps/FundRequestStepCriteriaOverview.tsx
@@ -29,9 +29,7 @@ export default function FundRequestStepCriteriaOverview({
             {progress}
 
             <div className="sign_up-pane" data-dusk="criteriaStepsOverview">
-                <h2 className="sign_up-pane-header" role="heading">
-                    {translate('fund_request.sign_up.pane.header_title')}
-                </h2>
+                <h2 className="sign_up-pane-header">{translate('fund_request.sign_up.pane.header_title')}</h2>
                 <div className="sign_up-pane-body">
                     <p className="sign_up-pane-text">
                         {translate('fund_request.sign_up.pane.text', {