Updated generic tab styles and js to force accessible usage

[bookstack] / resources / views / attachments / manager.blade.php

diff --git a/resources/views/attachments/manager.blade.php b/resources/views/attachments/manager.blade.php
index 724ca9c8eb93c38de37c75610aeaf31583732617..7d14d00e7d29600fa9b16e020de1b756e26176d8 100644 (file)
--- a/resources/views/attachments/manager.blade.php
+++ b/resources/views/attachments/manager.blade.php
@@ -9,25 +9,54 @@
     <div class="px-l files">
 
         <div refs="attachments@listContainer">
-            <p class="text-muted small">{{ trans('entities.attachments_explain') }} <span class="text-warn">{{ trans('entities.attachments_explain_instant_save') }}</span></p>
+            <p class="text-muted small">{{ trans('entities.attachments_explain') }} <span
+                        class="text-warn">{{ trans('entities.attachments_explain_instant_save') }}</span></p>
 
             <div component="tabs" refs="attachments@mainTabs" class="tab-container">
-                <div class="nav-tabs">
-                    <button refs="tabs@toggleItems" type="button" class="selected tab-item">{{ trans('entities.attachments_items') }}</button>
-                    <button refs="tabs@toggleUpload" type="button" class="tab-item">{{ trans('entities.attachments_upload') }}</button>
-                    <button refs="tabs@toggleLinks" type="button" class="tab-item">{{ trans('entities.attachments_link') }}</button>
+                <div role="tablist">
+                    <button id="attachment-tab-items"
+                            role="tab"
+                            aria-selected="true"
+                            aria-controls="attachment-panel-items"
+                            type="button"
+                            class="tab-item">{{ trans('entities.attachments_items') }}</button>
+                    <button id="attachment-tab-upload"
+                            role="tab"
+                            aria-selected="false"
+                            aria-controls="attachment-panel-upload"
+                            type="button"
+                            class="tab-item">{{ trans('entities.attachments_upload') }}</button>
+                    <button id="attachment-tab-links"
+                            role="tab"
+                            aria-selected="false"
+                            aria-controls="attachment-panel-links"
+                            type="button"
+                            class="tab-item">{{ trans('entities.attachments_link') }}</button>
                 </div>
-                <div refs="tabs@contentItems attachments@list">
+                <div id="attachment-panel-items"
+                     tabindex="0"
+                     role="tabpanel"
+                     aria-labelledby="attachment-tab-items"
+                     refs="attachments@list">
                     @include('attachments.manager-list', ['attachments' => $page->attachments->all()])
                 </div>
-                <div refs="tabs@contentUpload" class="hidden">
+                <div id="attachment-panel-upload"
+                     tabindex="0"
+                     role="tabpanel"
+                     hidden
+                     aria-labelledby="attachment-tab-upload">
                     @include('form.dropzone', [
                         'placeholder' => trans('entities.attachments_dropzone'),
                         'url' =>  url('/attachments/upload?uploaded_to=' . $page->id),
                         'successMessage' => trans('entities.attachments_file_uploaded'),
                     ])
                 </div>
-                <div refs="tabs@contentLinks" class="hidden link-form-container">
+                <div id="attachment-panel-links"
+                     tabindex="0"
+                     role="tabpanel"
+                     hidden
+                     aria-labelledby="attachment-tab-links"
+                     class="link-form-container">
                     @include('attachments.manager-link-form', ['pageId' => $page->id])
                 </div>
             </div>