Fixed a bug in filter/view sidebar status, Tabindex will be jailed in modal windows

3852120a · ransome1 · 7f5f6c8e · 3852120a · 3852120a · 3852120a
Commit 3852120a authored Jun 06, 2021 by ransome1
--- a/package.json
+++ b/package.json
 {
  "name": "sleek",
  "productName": "sleek",
-  "version": "1.0.6-1",
+  "version": "1.0.6-2",
  "description": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
  "synopsis": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
  "category": "ProjectManagement",

--- a/src/configs/modal.config.mjs
+++ b/src/configs/modal.config.mjs
+export function createModalJail(modal) {
+  // add all the elements inside modal which you want to make focusable
+  const focusableElements = '[tabindex]:not([tabindex="-1"])';
+  const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal
+  const focusableContent = modal.querySelectorAll(focusableElements);
+  const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal
+  document.addEventListener("keydown", function(e) {
+    let isTabPressed = e.key === "Tab" || e.keyCode === 9;
+    if (!isTabPressed) {
+      return;
+    }
+    if (e.shiftKey) { // if shift key pressed for shift + tab combination
+      if (document.activeElement === firstFocusableElement) {
+        lastFocusableElement.focus(); // add focus for the last focusable element
+        e.preventDefault();
+      }
+    } else { // if tab key is pressed
+      if (document.activeElement === lastFocusableElement) { // if focused has reached to last focusable element then focus first focusable element after pressing tab
+        firstFocusableElement.focus(); // add focus for the first focusable element
+        e.preventDefault();
+      }
+    }
+  });
+}
--- a/src/css/dark.css
+++ b/src/css/dark.css
-/* Error: expected "}".
- *     ,
- * 459 | }
- *     |  ^
- *     '
- *   src\scss\dark.scss 459:2  root stylesheet */
-
-body::before {
-  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
-      "Droid Sans Mono", monospace, monospace;
-  white-space: pre;
-  display: block;
-  padding: 1em;
-  margin-bottom: 1em;
-  border-bottom: 2px solid black;
-  content: 'Error: expected "}".\a     \2577 \a 459 \2502  }\a     \2502   ^\a     \2575 \a   src\\scss\\dark.scss 459:2  root stylesheet';
+body {
+  background-color: #212224;
+  color: #CCCDCF;
 }
+
+code, pre {
+  background-color: #212224 !important;
+}
+
+a {
+  color: white;
+}
+
+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid #CCCDCF !important;
+}
+
+a:hover,
+button:hover,
+strong {
+  color: #CCCDCF;
+}
+
+input,
+select,
+textarea {
+  border: none !important;
+  background: #2d2d2d !important;
+  color: white !important;
+}
+
+input[type=search]::-webkit-search-cancel-button {
+  background-color: white;
+  -webkit-mask-image: url("../img/svg/times-circle.svg");
+  mask-image: url("../img/svg/times-circle.svg");
+}
+
+input:active,
+input:focus,
+input.is-focused,
+select:focus,
+textarea:active,
+textarea:focus,
+input[type=search]:focus {
+  outline: none !important;
+  box-shadow: 0 0 0 2px #CCCDCF !important;
+}
+
+input::placeholder {
+  color: #4a4a4a !important;
+}
+
+input[type=checkbox]:focus,
+input[type=checkbox]:active {
+  outline: none;
+  box-shadow: none !important;
+}
+
+input[type=range] {
+  background: #4a4a4a !important;
+}
+
+button {
+  color: white !important;
+  background: transparent !important;
+}
+button i {
+  color: #CCCDCF !important;
+}
+
+button.is-link,
+.button.is-link:hover {
+  background-color: #2d2d2d !important;
+}
+button.is-link svg,
+.button.is-link:hover svg {
+  color: inherit !important;
+}
+
+.button[disabled],
+fieldset[disabled] {
+  background-color: transparent;
+}
+
+button.is-outlined:hover {
+  background: #3B3B3B !important;
+}
+
+::after {
+  border-color: white !important;
+}
+
+svg {
+  color: white;
+}
+
+table {
+  width: 100%;
+  background-color: transparent !important;
+  color: #CCCDCF !important;
+}
+
+table tr td {
+  border-color: #212224 !important;
+}
+
+table tr th {
+  color: white !important;
+}
+
+table.files tr td:last-child i {
+  color: white;
+}
+
+nav {
+  background-color: #2d2d2d;
+}
+nav svg {
+  color: #CCCDCF;
+}
+nav ul li.logo {
+  background: none;
+}
+nav ul li a {
+  color: #CCCDCF;
+  border-bottom: 1px solid #3B3B3B;
+}
+nav ul li a:hover,
+nav ul li a:focus {
+  color: #CCCDCF;
+  border-bottom: none;
+  background-color: #3B3B3B;
+}
+nav ul li.is-highlighted a {
+  color: #CCCDCF;
+  border-bottom: none;
+  background-color: #3B3B3B;
+}
+
+#drawerContainer .zoom svg {
+  color: white !important;
+}
+#drawerContainer .zoom #zoomStatus {
+  color: white !important;
+}
+
+#todoTableSearchContainer {
+  background-color: #212224;
+}
+#todoTableSearchContainer .icon.is-left i,
+#todoTableSearchContainer .icon.is-right i {
+  color: #4a4a4a;
+}
+#todoTableSearchContainer #btnToggleViewContainer {
+  background: transparent !important;
+}
+
+#resultStats .tag {
+  background-color: #3B3B3B !important;
+  color: #CCCDCF !important;
+}
+
+#todoTable .flex-table#previousItem.is-highlighted {
+  background-color: #3B3B3B;
+}
+#todoTable .flex-table:hover .flex-row .button,
+#todoTable .flex-table.due .button {
+  color: #f5f5f5;
+}
+#todoTable .flex-table {
+  border-color: #3B3B3B;
+}
+#todoTable .flex-table .checkbox a {
+  color: #CCCDCF;
+}
+#todoTable .flex-table .checkbox a:hover {
+  color: white;
+}
+#todoTable .flex-table .flex-row.text {
+  color: #CCCDCF;
+}
+#todoTable .flex-table .flex-row.itemDueDate {
+  color: white;
+}
+#todoTable .flex-table .flex-row.itemDueDate i {
+  color: inherit;
+}
+#todoTable .flex-table .flex-row.itemDueDate.isToday,
+#todoTable .flex-table .flex-row.itemDueDate.isPast {
+  color: #ff3860;
+}
+#todoTable .flex-table .flex-row.itemDueDate.isToday i,
+#todoTable .flex-table .flex-row.itemDueDate.isPast i {
+  color: inherit;
+}
+#todoTable .flex-table .flex-row.itemDueDate.isTomorrow i {
+  color: #fa745e !important;
+}
+#todoTable .flex-table .flex-row span.contexts {
+  color: #c5ede3 !important;
+  background: #1e6251 !important;
+}
+#todoTable .flex-table .flex-row span.projects {
+  color: #f1d6f1 !important;
+  background: #6f266f !important;
+}
+#todoTable .flex-table .flex-row .is-white {
+  color: #CCCDCF;
+  background: none;
+}
+
+#modalForm i {
+  color: #CCCDCF !important;
+}
+#modalForm button {
+  color: white;
+  border-color: #3B3B3B !important;
+  background: transparent !important;
+}
+#modalForm button:hover {
+  color: #CCCDCF !important;
+}
+#modalForm .field input,
+#modalForm .field input::placeholder,
+#modalForm .field select,
+#modalForm .field select::placeholder {
+  color: white !important;
+}
+#modalForm .field select option {
+  background: #3B3B3B;
+}
+
+#recurrencePicker #recurrencePickerInput,
+#recurrencePicker .radio {
+  cursor: pointer;
+  background: none !important;
+  color: white !important;
+}
+#recurrencePicker #recurrencePickerInput::placeholder {
+  color: white !important;
+}
+#recurrencePicker .radio:hover {
+  color: #CCCDCF !important;
+}
+#recurrencePicker #recurrencePickerContainer {
+  background: #2d2d2d;
+}
+#recurrencePicker #recurrencePickerContainer .card-footer {
+  border-color: #212224;
+}
+
+#autoCompleteContainer {
+  background: #3B3B3B;
+}
+#autoCompleteContainer h4 {
+  color: #CCCDCF;
+}
+
+#drawerContainer .drawer {
+  background: #3B3B3B !important;
+}
+#drawerContainer .drawer h4.is-4 {
+  color: white;
+}
+#drawerContainer .drawer h4.is-4 i {
+  color: #CCCDCF !important;
+}
+#drawerContainer a.drawerClose {
+  background: #3B3B3B !important;
+}
+#drawerContainer svg {
+  color: #f5f5f5 !important;
+}
+#drawerContainer #btnFiltersResetFilters {
+  background: #212224 !important;
+}
+
+#filterMenu .card {
+  background: #3B3B3B;
+}
+#filterMenu .card #filterMenuSave {
+  background-color: transparent !important;
+  border-right: 1px solid #212224 !important;
+}
+#filterMenu .card-footer {
+  border-top: 1px solid #212224 !important;
+}
+
+#todoContext a {
+  color: #CCCDCF;
+}
+#todoContext .dropdown-content {
+  color: white;
+  background-color: #3B3B3B !important;
+}
+#todoContext .dropdown-content .dropdown-item:hover {
+  background: #2d2d2d;
+}
+
+.contexts .button {
+  color: #c5ede3;
+  background: #247561;
+}
+.contexts .button span.tag {
+  color: #184e41;
+  background: #c9eee5;
+}
+.contexts .button.is-dark {
+  background: #184e41;
+  color: white;
+}
+
+.projects .button {
+  color: #f1d6f1;
+  background: #822c82;
+}
+.projects .button span.tag {
+  color: #5c1f5c;
+  background: #f2daf2;
+}
+.projects .button.is-dark {
+  background: #5c1f5c;
+  color: white;
+}
+
+.priority .button {
+  opacity: 0.9;
+}
+
+.toggle .switch .slider {
+  background-color: #4a4a4a;
+}
+.toggle .switch input:checked + .slider {
+  background-color: #2d2d2d !important;
+}
+.toggle .switch input:focus + .slider {
+  box-shadow: none;
+}
+.toggle .switch input:focus-visible {
+  outline: 2px solid white !important;
+}
+
+.modal .modal-content .card {
+  background: #3B3B3B;
+  color: #CCCDCF;
+}
+.modal .modal-content .card .card-header-title {
+  color: white;
+}
+.modal .modal-content .card .card-content {
+  /*button {
+    background: $darker-grey!important;
+  }*/
+}
+.modal .modal-content .card .card-footer,
+.modal .modal-content .card .card-footer-item {
+  border-color: #2d2d2d;
+}
+
+.modal.content {
+  color: #CCCDCF !important;
+}
+.modal.content .button {
+  background: #2d2d2d !important;
+}
+.modal.content .select:not(.is-multiple):not(.is-loading)::after {
+  border-color: white !important;
+}
+.modal.content .delete,
+.modal.content .modal-close,
+.modal.content .tag.is-info {
+  background: white !important;
+  color: #3B3B3B !important;
+}
+.modal.content .tag:not(body).is-dark {
+  background: #212224 !important;
+}
+.modal.content .modal-close::before,
+.modal.content .modal-close::after {
+  color: #3B3B3B !important;
+  background: #3B3B3B !important;
+}
+.modal.content .modal-card,
+.modal.content table {
+  background: #3B3B3B;
+  color: #CCCDCF !important;
+}
+.modal.content .title,
+.modal.content table th {
+  color: white;
+}
+.modal.content table tr,
+.modal.content table th,
+.modal.content table td {
+  border-color: #2d2d2d !important;
+}
+.modal.content .tabs ul {
+  border-color: transparent;
+}
+.modal.content .tabs li a {
+  color: white;
+  border-color: #4a4a4a;
+}
+.modal.content .tabs li a:hover {
+  border-color: #CCCDCF;
+}
+.modal.content .tabs li.is-active a {
+  color: white;
+  border-color: #CCCDCF;
+}
+
+.message.fixed {
+  background: transparent !important;
+}
+.message.fixed i {
+  color: white !important;
+}
+.message.fixed .message-body {
+  color: #CCCDCF;
+  background: #3B3B3B !important;
+}
+.message.fixed .message-body .button {
+  background: #2d2d2d !important;
+}
+
+.dueDate #datePickerInput,
+.dueDate #datePickerInput::placeholder {
+  color: white !important;
+  background: transparent !important;
+  cursor: pointer;
+}
+
+.datepicker {
+  background: transparent;
+}
+.datepicker .button {
+  background: transparent !important;
+}
+.datepicker .datepicker-cell.today.focused:not(.selected),
+.datepicker .datepicker-cell.today:not(.selected) {
+  background: #212224 !important;
+}
+.datepicker .datepicker-cell.today.focused:not(.selected),
+.datepicker .datepicker-cell.today:hover {
+  color: white !important;
+}
+.datepicker .datepicker-picker {
+  background: #2d2d2d;
+  color: white;
+}
+.datepicker .datepicker-picker .button,
+.datepicker .datepicker-picker .button:hover,
+.datepicker .datepicker-picker .datepicker-header .datepicker-controls .button:hover {
+  background: none;
+  color: inherit;
+}
+.datepicker .datepicker-picker .datepicker-footer .datepicker-controls .button {
+  color: inherit;
+}
+.datepicker .datepicker-picker .datepicker-cell.selected,
+.datepicker .datepicker-picker .datepicker-cell.selected:hover {
+  color: #2d2d2d;
+  background: white;
+}
+.datepicker .datepicker-picker .datepicker-cell.focused:not(.selected),
+.datepicker .datepicker-picker .datepicker-cell:hover {
+  color: #2d2d2d;
+  background: #CCCDCF;
+}
+
+.contentContainer .title.is-1 {
+  color: white;
+}
+.contentContainer .subtitle,
+.contentContainer .subtitle strong {
+  color: #CCCDCF;
+}
+
+/*# sourceMappingURL=dark.css.map */
--- a/src/css/dark.css.map
+++ b/src/css/dark.css.map
-{"version":3,"sourceRoot":"","sources":["../scss/dark.scss","../scss/variables.scss"],"names":[],"mappings":"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","file":"dark.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/dark.scss","../scss/variables.scss"],"names":[],"mappings":"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","file":"dark.css"}
\ No newline at end of file
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -373,9 +373,11 @@ nav ul:nth-child(2) {
  color: #4a4a4a;
  font-family: FreeSansBold;
  margin-bottom: 1.5em;
+}
+#drawerContainer .drawer h4.is-4.clickable {
  cursor: pointer;
 }
-#drawerContainer .drawer h4.is-4 i {
+#drawerContainer .drawer h4.is-4.clickable i {
  color: #3273dc;
 }
 #drawerContainer .drawer .dropdown-item {
@@ -641,6 +643,11 @@ nav ul:nth-child(2) {
  display: block;
 }

+#modalForm[open]:not(:focus-within) {
+  background-color: #fffffe;
+  transition: background-color 0.01s;
+}
+
 #modalForm textarea#modalFormInput {
  min-height: 5.5em;
  overflow: hidden;

--- a/src/css/style.css.map
+++ b/src/css/style.css.map
--- a/src/index.html
+++ b/src/index.html
@@ -228,12 +228,12 @@
      <div class="modal-content">
        <div class="card">
          <header class="card-header">
-            <p id="modalTitle" class="card-header-title"></p>
+            <a id="modalTitle" class="card-header-title"></a>
          </header>
          <div class="card-content">
            <div class="content">
              <div class="control has-icons-right">
-                <input id="modalFormInput" class="input is-medium" type="text" tabindex="300">
+                <input id="modalFormInput" class="input is-medium" type="text" tabindex="0">
                <a href="#" id="modalFormInputResize" class="icon is-right" tabindex="-1" data-input-type="input">
                  <i class="fas fa-expand-alt"></i>
                </a>
@@ -244,7 +244,7 @@
              <div class="field">
                <div class="control">
                  <div class="select">
-                    <select id="priorityPicker" tabindex="305">
+                    <select id="priorityPicker" tabindex="0">
                      <option value="">-</option>
                      <option value="A">A</option>
                      <option value="B">B</option>
@@ -278,7 +278,7 @@
              </div>
              <div class="field dueDate">
                <div class="control has-icons-left">
-                  <input id="datePickerInput" class="input" tabindex="310" readonly>
+                  <input id="datePickerInput" class="input" tabindex="0" readonly>
                  <a href="#" class="icon is-left" tabindex="-1">
                    <i class="far fa-clock is-left"></i>
                  </a>
@@ -287,7 +287,7 @@
              <div id="recurrencePicker" class="field">
                <div class="control has-icons-left">
                  <input id="recurrencePickerInput" class="input" tabindex="-1" readonly>
-                  <a href="#" class="icon is-left">
+                  <a href="#" class="icon is-left" tabindex="-1">
                    <i class="fas fa-redo"></i>
                  </a>
                </div>
@@ -333,9 +333,9 @@
            </div>
          </div>
          <footer class="card-footer">
-            <button id="btnSave" type="submit" class="card-footer-item" tabindex="315"></button>
-            <a href="#" id="btnItemStatus" class="card-footer-item" tabindex="320"></a>
-            <a href="#" class="card-footer-item btnModalCancel" tabindex="325"></a>
+            <button id="btnSave" type="submit" class="card-footer-item" tabindex="0"></button>
+            <a href="#" id="btnItemStatus" class="card-footer-item" tabindex="0"></a>
+            <a href="#" class="card-footer-item btnModalCancel" tabindex="0"></a>
          </footer>
        </div>
      </div>
@@ -512,7 +512,7 @@
          </table>
          <p><code>v<span id="version"></span></code></p>
        </section>
-        <button class="modal-close close is-large" aria-label="close"></button>
+        <button class="modal-close close is-large" aria-label="close" tabindex="0"></button>
      </div>
    </div>
    <div id="modalHelp" class="modal content" tabindex="0" data-track-content data-content-name="Help" data-content-piece="Keyboard shortcuts">
@@ -659,7 +659,7 @@
            </div>
          </div>
        </section>
-        <button class="modal-close close is-large" aria-label="close"></button>