X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/1f69965c1e61a6ef3d46eb46ef4290889ba34381..refs/pull/4467/head:/resources/views/settings/customization.blade.php

diff --git a/resources/views/settings/customization.blade.php b/resources/views/settings/customization.blade.php
index d3c20c4b1..be99cc254 100644
--- a/resources/views/settings/customization.blade.php
+++ b/resources/views/settings/customization.blade.php
@@ -70,29 +70,47 @@
             </div>
 
             <!-- App Color Scheme -->
-            <div class="pb-l">
+            @php
+                $darkMode = boolval(setting()->getForCurrentUser('dark-mode-enabled'));
+            @endphp
+            <div component="setting-app-color-scheme"
+                 option:setting-app-color-scheme:mode="{{ $darkMode ? 'dark' : 'light' }}"
+                 class="pb-l">
                 <div class="mb-l">
                     <label class="setting-list-label">{{ trans('settings.color_scheme') }}</label>
                     <p class="small">{{ trans('settings.color_scheme_desc') }}</p>
                 </div>
 
-                @php
-                    $darkMode = boolval(setting()->getForCurrentUser('dark-mode-enabled'));
-                @endphp
                 <div component="tabs" class="tab-container">
-                    <div class="nav-tabs controls-card">
-                        <button refs="tabs@toggleLight"
-                                type="button"
-                                class="{{ $darkMode ? '' : 'selected' }} tab-item">@icon('light-mode'){{ trans('common.light_mode') }}</button>
-                        <button refs="tabs@toggleDark"
-                                type="button"
-                                class="{{ $darkMode ? 'selected' : '' }} tab-item">@icon('dark-mode'){{ trans('common.dark_mode') }}</button>
+                    <div role="tablist" class="controls-card">
+                        <button type="button"
+                                role="tab"
+                                id="color-scheme-tab-light"
+                                aria-selected="{{ $darkMode ? 'false' : 'true' }}"
+                                aria-controls="color-scheme-panel-light">@icon('light-mode'){{ trans('common.light_mode') }}</button>
+                        <button type="button"
+                                role="tab"
+                                id="color-scheme-tab-dark"
+                                aria-selected="{{ $darkMode ? 'true' : 'false' }}"
+                                aria-controls="color-scheme-panel-dark">@icon('dark-mode'){{ trans('common.dark_mode') }}</button>
                     </div>
                     <div class="sub-card">
-                        <div refs="tabs@contentLight attachments@list" class="{{ $darkMode ? 'hidden' : '' }} p-m">
+                        <div id="color-scheme-panel-light"
+                             refs="setting-app-color-scheme@lightContainer"
+                             tabindex="0"
+                             role="tabpanel"
+                             aria-labelledby="color-scheme-tab-light"
+                             @if($darkMode) hidden @endif
+                             class="p-m">
                             @include('settings.parts.setting-color-scheme', ['mode' => 'light'])
                         </div>
-                        <div refs="tabs@contentDark" class="{{ $darkMode ? '' : 'hidden' }} p-m">
+                        <div id="color-scheme-panel-dark"
+                             refs="setting-app-color-scheme@darkContainer"
+                             tabindex="0"
+                             role="tabpanel"
+                             aria-labelledby="color-scheme-tab-light"
+                             @if(!$darkMode) hidden @endif
+                             class="p-m">
                             @include('settings.parts.setting-color-scheme', ['mode' => 'dark'])
                         </div>
                     </div>