From 50a3ba5b5669da1cf6649a155a64d30e6cb2c940 Mon Sep 17 00:00:00 2001
From: chris <andersan@umich.edu>
Date: Wed, 21 Sep 2022 07:38:27 -0500
Subject: [PATCH 01/11] Add focus outline to password type inputs when
 navigating using keyboard

---
 CHANGELOG.md                     | 3 ++-
 lib/styles/trackInputModality.js | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index de870ba83..e759f8742 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,12 +6,13 @@ Releases are recorded as git tags in the [Github releases](https://github.com/le
 - [#185] - Handle arrow key navigation and improve focusOutline
 - [#338] - Allow for new 'nav' slot inline in the toolbar
 - [#362] - Add documentation pages for 'KResponsiveWindow' and 'KResponsiveElement'
+- [#364] - Fixes 'Missing focus ring around password inputs' while navigating with keyboard.
 
 <!-- Referenced PRs -->
 [#185]: https://github.com/learningequality/kolibri-design-system/pull/185
 [#338]: https://github.com/learningequality/kolibri-design-system/pull/338
 [#362]: https://github.com/learningequality/kolibri-design-system/pull/362
-
+[#364]: https://github.com/learningequality/kolibri-design-system/pull/364
 
 ## Version 1.3.1
 
diff --git a/lib/styles/trackInputModality.js b/lib/styles/trackInputModality.js
index fc3fb7862..1bc1a3c72 100644
--- a/lib/styles/trackInputModality.js
+++ b/lib/styles/trackInputModality.js
@@ -19,6 +19,7 @@ function setUpEventHandlers(disableFocusRingByDefault) {
     'input[type=date]',
     'input[type=time]',
     'input[type=datetime]',
+    'input[type=password]',
     'textarea',
     '[role=textbox]',
     'a',

From 91a91430f7593fd791f6caa4dabcaa635dba361e Mon Sep 17 00:00:00 2001
From: Devon Rueckner <devon.rueckner@gmail.com>
Date: Sat, 3 Sep 2022 11:50:22 -0400
Subject: [PATCH 02/11] improve DocsShowCode component layout

---
 docs/common/DocsShow.vue     | 15 +++++++++++++--
 docs/common/DocsShowCode.vue | 19 ++++++++++++-------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/docs/common/DocsShow.vue b/docs/common/DocsShow.vue
index 0f3a767d5..d883afb2d 100644
--- a/docs/common/DocsShow.vue
+++ b/docs/common/DocsShow.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div>
-    <div class="show" :style="{ display: block ? 'block' : 'inline-block' }">
+    <div class="show" :style="style">
       <slot></slot>
     </div>
   </div>
@@ -18,6 +18,18 @@
         type: Boolean,
         default: false,
       },
+      padding: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    computed: {
+      style() {
+        return {
+          display: this.block ? 'block' : 'inline-block',
+          padding: this.padding ? '8px 24px' : null,
+        };
+      },
     },
   };
 
@@ -27,7 +39,6 @@
 <style lang="scss" scoped>
 
   .show {
-    padding: 8px 24px;
     margin: 8px;
     border: 1px solid #dedede;
     border-radius: 4px;
diff --git a/docs/common/DocsShowCode.vue b/docs/common/DocsShowCode.vue
index 90cc966b3..1f5e35b5e 100644
--- a/docs/common/DocsShowCode.vue
+++ b/docs/common/DocsShowCode.vue
@@ -1,9 +1,9 @@
 <template>
 
-  <DocsShow :block="block">
-    <Prism :language="language">
+  <DocsShow :block="block" :padding="false">
+    <PrismComponent :language="language">
       <slot></slot>
-    </Prism>
+    </PrismComponent>
   </DocsShow>
 
 </template>
@@ -11,15 +11,15 @@
 
 <script>
 
-  import 'prismjs';
+  import Prism from 'prismjs';
   import 'prismjs/themes/prism.css';
   import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
-  import Prism from 'vue-prism-component';
+  import PrismComponent from 'vue-prism-component';
 
   export default {
     name: 'DocsShowCode',
     components: {
-      Prism,
+      PrismComponent,
     },
     props: {
       // `display: block` takes up full width
@@ -32,6 +32,11 @@
         required: true,
       },
     },
+    mounted() {
+      // Ensure prism-normalize-whitespace plugin is run
+      // ref: https://github.com/egoist/vue-prism-component/issues/10#issuecomment-988938865
+      Prism.highlightAll();
+    },
   };
 
 </script>
@@ -48,7 +53,7 @@
   }
 
   pre[class*='language-'] {
-    padding: 0;
+    padding: 8px 24px;
     margin: 0;
   }
 

From bbe26139dfe3574df3096526a079eda277621e47 Mon Sep 17 00:00:00 2001
From: Devon Rueckner <devon.rueckner@gmail.com>
Date: Sat, 3 Sep 2022 13:36:56 -0400
Subject: [PATCH 03/11] add custom loader to escape HTML

---
 .../{DocsShowCode.vue => DocsShowCode/index.vue}   |  1 +
 docs/common/DocsShowCode/webpack-loader.js         | 14 ++++++++++++++
 nuxt.config.js                                     |  7 +++++++
 3 files changed, 22 insertions(+)
 rename docs/common/{DocsShowCode.vue => DocsShowCode/index.vue} (94%)
 create mode 100644 docs/common/DocsShowCode/webpack-loader.js

diff --git a/docs/common/DocsShowCode.vue b/docs/common/DocsShowCode/index.vue
similarity index 94%
rename from docs/common/DocsShowCode.vue
rename to docs/common/DocsShowCode/index.vue
index 1f5e35b5e..4c92e93c1 100644
--- a/docs/common/DocsShowCode.vue
+++ b/docs/common/DocsShowCode/index.vue
@@ -1,6 +1,7 @@
 <template>
 
   <DocsShow :block="block" :padding="false">
+    <!-- Note that slot contents are HTML-escaped using webpack-loader.js -->
     <PrismComponent :language="language">
       <slot></slot>
     </PrismComponent>
diff --git a/docs/common/DocsShowCode/webpack-loader.js b/docs/common/DocsShowCode/webpack-loader.js
new file mode 100644
index 000000000..39799e5f5
--- /dev/null
+++ b/docs/common/DocsShowCode/webpack-loader.js
@@ -0,0 +1,14 @@
+var TAG_PATTERN = new RegExp(`<DocsShowCode(.*?)>(.*?)</DocsShowCode>`, 'gms');
+
+function escape(unsafe) {
+  return (unsafe || '')
+    .replace(/&/gm, '&amp;')
+    .replace(/</gm, '&lt;')
+    .replace(/>/gm, '&gt;');
+}
+
+module.exports = function(content) {
+  return content.replace(TAG_PATTERN, function(_, attributes, innerText) {
+    return `<DocsShowCode${attributes}>${escape(innerText)}</DocsShowCode>`;
+  });
+};
diff --git a/nuxt.config.js b/nuxt.config.js
index 39b07dfe0..8e0fbe0ca 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -19,6 +19,7 @@ export default {
   srcDir: './docs/',
   plugins: ['~/plugins/load-common-components.js', '~/plugins/load-lib-components.js'],
   css: ['normalize.css/normalize.css', '~/assets/main.scss'],
+  modulesDir: ['node_modules', 'docs'], // allow custom DocsShowCode loader to be found
   build: {
     extractCSS: true,
     optimization: {
@@ -42,6 +43,12 @@ export default {
         loader: 'svg-icon-inline-loader',
         exclude: /node_modules/,
       });
+      // handles escaping HTML inside <DocsShowCode> slots
+      config.module.rules.push({
+        test: /\.vue$/,
+        loader: 'common/DocsShowCode/webpack-loader.js',
+        exclude: /node_modules/,
+      });
       // used for glossary
       config.module.rules.push({
         test: /\.tbx$/,

From b703bdec121998b49d9a3782759c4f28b264c26f Mon Sep 17 00:00:00 2001
From: Devon Rueckner <devon.rueckner@gmail.com>
Date: Sat, 3 Sep 2022 19:39:52 -0400
Subject: [PATCH 04/11] remove html escape sequences

---
 docs/pages/colors.vue            |  6 +++--
 docs/pages/kresponsivewindow.vue | 38 ++++++++++++++++----------------
 docs/pages/layout/index.vue      | 19 +++++++---------
 docs/pages/styling/index.vue     |  4 +++-
 4 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue
index 0c7e472f7..db6ecc511 100644
--- a/docs/pages/colors.vue
+++ b/docs/pages/colors.vue
@@ -53,7 +53,9 @@
       </p>
 
       <DocsShowCode language="html">
-        &lt;div :style="{ color: $themeTokens.error }"&gt;This is an error&lt;/div&gt;
+        <div :style="{ color: $themeTokens.error }">
+          This is an error
+        </div>
       </DocsShowCode>
 
       <p>
@@ -75,7 +77,7 @@
       </p>
 
       <DocsShowCode language="html">
-        &lt;input :class="$computedClass({ '::placeholder': { color: $themeTokens.annotation } })" /&gt;
+        <input :class="$computedClass({ '::placeholder': { color: $themeTokens.annotation } })">
       </DocsShowCode>
 
       <p>This is usually not necessary, and using <code>style</code> is preferred for simplicity when possible.</p>
diff --git a/docs/pages/kresponsivewindow.vue b/docs/pages/kresponsivewindow.vue
index a469d76b0..3974d7bad 100644
--- a/docs/pages/kresponsivewindow.vue
+++ b/docs/pages/kresponsivewindow.vue
@@ -49,26 +49,26 @@
         Consider a Vue file with this in its template and script:
       </p>
       <!-- eslint-disable -->
-        <!-- prevent prettier from changing indentation -->
-        <DocsShowCode language="html">
-          &lt;div class="box" :style="boxStyle"&gt;
-            Box 1
-          &lt;/div&gt;
-          &lt;div class="box" :style="boxStyle"&gt;
-            Box 2
-          &lt;/div&gt;
-        </DocsShowCode>
-        <DocsShowCode language="javascript">
-          computed: {
-            boxStyle() {
-              if (this.windowIsLarge) {
-                return { display: 'inline-block' };
-              }
-              return { display: 'block' };
-            },
+      <!-- prevent prettier from changing indentation -->
+      <DocsShowCode language="html">
+        <div class="box" :style="boxStyle">
+          Box 1
+        </div>
+        <div class="box" :style="boxStyle">
+          Box 2
+        </div>
+      </DocsShowCode>
+      <DocsShowCode language="javascript">
+        computed: {
+          boxStyle() {
+            if (this.windowIsLarge) {
+              return { display: 'inline-block' };
+            }
+            return { display: 'block' };
           },
-        </DocsShowCode>
-        <!-- eslint-enable -->
+        },
+      </DocsShowCode>
+      <!-- eslint-enable -->
       <p>
         This results in two boxes that stack vertically on small screens and otherwise display side-by-side:
       </p>
diff --git a/docs/pages/layout/index.vue b/docs/pages/layout/index.vue
index 12211f1d0..bf820027e 100644
--- a/docs/pages/layout/index.vue
+++ b/docs/pages/layout/index.vue
@@ -140,19 +140,16 @@
       <p>
         For example, a common pattern in Kolibri is to have a button right-aligned at the top of a page alongside the header on large windows, but on medium and small windows to move the button underneath the header and left-align it. To do this with the responsive grid:
       </p>
-      <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
       <DocsShowCode language="html">
-        &lt;KGrid&gt;
-          &lt;KGridItem :layout12="{ span: 9 }"&gt;
-            &lt;h2&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/h2&gt;
-          &lt;/KGridItem&gt;
-          &lt;KGridItem :layout12="{ span: 3, alignment: 'right' }"&gt;
-            &lt;KButton text="Button" primary/&gt;
-          &lt;/KGridItem&gt;
-        &lt;/KGrid&gt;
+        <KGrid>
+          <KGridItem :layout12="{ span: 9 }">
+            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
+          </KGridItem>
+          <KGridItem :layout12="{ span: 3, alignment: 'right' }">
+            <KButton text="Button" primary />
+          </KGridItem>
+        </KGrid>
       </DocsShowCode>
-      <!-- eslint-enable -->
 
       <p>
         Each grid item is described by layout objects which can contain a column <code>span</code> and default text <code>alignment</code>. When no additional layout information is provided, the <code>span</code> defaults to the total number of columns (i.e. full-width), and <code>alignment</code> defaults to <code>'right'</code>.
diff --git a/docs/pages/styling/index.vue b/docs/pages/styling/index.vue
index 3b12d4868..919d5ad54 100644
--- a/docs/pages/styling/index.vue
+++ b/docs/pages/styling/index.vue
@@ -28,7 +28,9 @@
         Use these by importing the design system's <code>definitions.scss</code> file. For example, this HTML and SCSS in a Vue template:
       </p>
       <DocsShowCode language="html">
-        &lt;div class="box"&gt;Hello!&lt;/div&gt;
+        <div class="box">
+          Hello!
+        </div>
       </DocsShowCode>
       <!-- eslint-disable -->
       <!-- prevent prettier from changing indentation -->

From 81a6e7ebe1ac89b9a24dcedd482855c9f481151b Mon Sep 17 00:00:00 2001
From: MisRob <robosovam@gmail.com>
Date: Thu, 22 Sep 2022 15:11:34 +0200
Subject: [PATCH 05/11] Remove post merge checklist

---
 .github/pull_request_template.md | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index db53548af..33bbe7805 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -42,14 +42,5 @@ Addresses #*PR# HERE*
 - [ ] Are all UI components LTR and RTL compliant (if applicable)?
 - [ ] _Add other things to check for here_
 
-## Post-merge updates and tracking
-<!-- After merging, unstable branches of Kolibri products (Learning Platform, Studio, and Data Portal) should be updated to point at the merge commit resulting from this PR. This process should be led by the submitter of the Design System PR in collaboration with other LE team members working on the other product repos. -->
-- [ ] Learning Platform update PR is submitted
-- [ ] Learning Platform update PR is merged
-- [ ] Studio update PR is submitted
-- [ ] Studio update PR is merged
-- [ ] Data Portal update PR is submitted
-- [ ] Data Portal update PR is merged
-
 ## Comments
 <!-- Any additional notes you'd like to add -->

From 916d0c5985e8aa368f27e91abb3d364b8fd8331d Mon Sep 17 00:00:00 2001
From: MisRob <robosovam@gmail.com>
Date: Mon, 26 Sep 2022 17:46:40 +0200
Subject: [PATCH 06/11] Fix missing mixin

---
 docs/pages/layout/index.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/pages/layout/index.vue b/docs/pages/layout/index.vue
index bf820027e..2fd8d7542 100644
--- a/docs/pages/layout/index.vue
+++ b/docs/pages/layout/index.vue
@@ -207,3 +207,13 @@
 
 </template>
 
+
+<script>
+
+  import responsiveWindowMixin from '~~/lib/KResponsiveWindowMixin.js';
+
+  export default {
+    mixins: [responsiveWindowMixin],
+  };
+
+</script>
\ No newline at end of file

From 7ed6df5cafba162e7b0da3e157ba1fb90a61c59b Mon Sep 17 00:00:00 2001
From: thanksameeelian <ameliabreault@gmail.com>
Date: Tue, 1 Nov 2022 09:49:52 -0500
Subject: [PATCH 07/11] add search input to default elements

---
 lib/styles/trackInputModality.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/styles/trackInputModality.js b/lib/styles/trackInputModality.js
index 1bc1a3c72..5200f39e7 100644
--- a/lib/styles/trackInputModality.js
+++ b/lib/styles/trackInputModality.js
@@ -15,6 +15,7 @@ function setUpEventHandlers(disableFocusRingByDefault) {
     'input[type=text]',
     'input[type=radio]',
     'input[type=checkbox]',
+    'input[type=search]',
     'input[type=number]',
     'input[type=date]',
     'input[type=time]',

From e186ddf32d0f8b328a17b309c825b1e141e113fd Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Mon, 7 Nov 2022 11:39:43 -0800
Subject: [PATCH 08/11] Add a finished event for KContentRenderer

---
 lib/content/mixin.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/content/mixin.js b/lib/content/mixin.js
index 2e51989bd..3cb047876 100644
--- a/lib/content/mixin.js
+++ b/lib/content/mixin.js
@@ -9,6 +9,7 @@ const interactionEvents = [
   'updateContentState',
   'startTracking',
   'navigateTo',
+  'finished',
 ];
 
 const fileFieldMap = {

From 37ec864a89d6dcf1a9f5b890dbb219a75445f969 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Mon, 28 Nov 2022 17:51:55 -0500
Subject: [PATCH 09/11] Work around the lack of :disabled attribute on a tags
 to remove pointer events from link style KButtons

---
 docs/pages/kbutton.vue               | 4 ++++
 lib/buttons-and-links/KButton.vue    | 6 ++++++
 lib/buttons-and-links/buttonMixin.js | 4 ++--
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/docs/pages/kbutton.vue b/docs/pages/kbutton.vue
index 7f09eca2c..b9b69c5f9 100644
--- a/docs/pages/kbutton.vue
+++ b/docs/pages/kbutton.vue
@@ -6,6 +6,10 @@
       <p>
         Creates a <code>&lt;button&gt;</code> tag and is appropriate for triggering javascript functions on-click. It can take on a number of visual styles, including both links and buttons.
       </p>
+
+       <p>
+        Since <code>:disabled</code> does not work on <code>&lt;a&gt;</code> tags, you can use the <code>disabled</code> class that exists on KButton to prevent pointer events.
+      </p>
       <DocsShow>
         <p>
           <KButton text="Link" appearance="basic-link" />
diff --git a/lib/buttons-and-links/KButton.vue b/lib/buttons-and-links/KButton.vue
index 8d731a0c2..aded6e347 100644
--- a/lib/buttons-and-links/KButton.vue
+++ b/lib/buttons-and-links/KButton.vue
@@ -214,4 +214,10 @@
     top: 4px;
   }
 
+  // adds this class to mock disabled item behavior, which can be used for a tags
+  .disabled {
+    pointer-events: none;
+    cursor: default;
+  }
+
 </style>
diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js
index dde02e383..7b8a857ac 100644
--- a/lib/buttons-and-links/buttonMixin.js
+++ b/lib/buttons-and-links/buttonMixin.js
@@ -64,8 +64,8 @@ export default {
       return {
         color: this.$themeTokens.link,
         ':hover': { color: this.$themeTokens.linkDark },
-        ':focus': this.$coreOutline,
-        ':disabled': { opacity: 0.5 },
+        ':focus': this.$coreOutline
+        // :disabled does not exist on 'a' tag, so it is not included here
       };
     },
     primaryRaisedStyle() {

From cd406bcd37d555559617e3397e119e57f7e5fa3e Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Mon, 28 Nov 2022 18:06:48 -0500
Subject: [PATCH 10/11] fix linting

---
 docs/pages/kbutton.vue               | 2 +-
 lib/buttons-and-links/buttonMixin.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/pages/kbutton.vue b/docs/pages/kbutton.vue
index b9b69c5f9..1b68144c7 100644
--- a/docs/pages/kbutton.vue
+++ b/docs/pages/kbutton.vue
@@ -7,7 +7,7 @@
         Creates a <code>&lt;button&gt;</code> tag and is appropriate for triggering javascript functions on-click. It can take on a number of visual styles, including both links and buttons.
       </p>
 
-       <p>
+      <p>
         Since <code>:disabled</code> does not work on <code>&lt;a&gt;</code> tags, you can use the <code>disabled</code> class that exists on KButton to prevent pointer events.
       </p>
       <DocsShow>
diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js
index 7b8a857ac..b08ab8a20 100644
--- a/lib/buttons-and-links/buttonMixin.js
+++ b/lib/buttons-and-links/buttonMixin.js
@@ -64,7 +64,7 @@ export default {
       return {
         color: this.$themeTokens.link,
         ':hover': { color: this.$themeTokens.linkDark },
-        ':focus': this.$coreOutline
+        ':focus': this.$coreOutline,
         // :disabled does not exist on 'a' tag, so it is not included here
       };
     },

From ac7d7bfa77754b70b6376c8913999072bd764379 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Mon, 28 Nov 2022 18:24:36 -0500
Subject: [PATCH 11/11] Just, redo that whole approach. Refactor and un-update
 docs

---
 docs/pages/kbutton.vue               | 4 ----
 lib/buttons-and-links/KButton.vue    | 6 ------
 lib/buttons-and-links/buttonMixin.js | 2 +-
 3 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/docs/pages/kbutton.vue b/docs/pages/kbutton.vue
index 1b68144c7..7f09eca2c 100644
--- a/docs/pages/kbutton.vue
+++ b/docs/pages/kbutton.vue
@@ -6,10 +6,6 @@
       <p>
         Creates a <code>&lt;button&gt;</code> tag and is appropriate for triggering javascript functions on-click. It can take on a number of visual styles, including both links and buttons.
       </p>
-
-      <p>
-        Since <code>:disabled</code> does not work on <code>&lt;a&gt;</code> tags, you can use the <code>disabled</code> class that exists on KButton to prevent pointer events.
-      </p>
       <DocsShow>
         <p>
           <KButton text="Link" appearance="basic-link" />
diff --git a/lib/buttons-and-links/KButton.vue b/lib/buttons-and-links/KButton.vue
index aded6e347..8d731a0c2 100644
--- a/lib/buttons-and-links/KButton.vue
+++ b/lib/buttons-and-links/KButton.vue
@@ -214,10 +214,4 @@
     top: 4px;
   }
 
-  // adds this class to mock disabled item behavior, which can be used for a tags
-  .disabled {
-    pointer-events: none;
-    cursor: default;
-  }
-
 </style>
diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js
index b08ab8a20..2e26cb3a7 100644
--- a/lib/buttons-and-links/buttonMixin.js
+++ b/lib/buttons-and-links/buttonMixin.js
@@ -65,7 +65,7 @@ export default {
         color: this.$themeTokens.link,
         ':hover': { color: this.$themeTokens.linkDark },
         ':focus': this.$coreOutline,
-        // :disabled does not exist on 'a' tag, so it is not included here
+        ...(this.disabled ? disabledStyle : {}),
       };
     },
     primaryRaisedStyle() {