From 071f3d517324627baecb1bb6bd8645e845b796c1 Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Mon, 22 May 2023 03:46:07 -0700
Subject: [PATCH 1/5] fix: suggested people aria labels (#2335)

---
 .../src/components/mgt-people-picker/mgt-people-picker.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index cff730fca6..83dd8fbd68 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -956,7 +956,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
            person => person.id,
            person => {
              const lineTwo = person.jobTitle || (person as User).mail;
-             const ariaLabel = `${this.strings.suggestedContact} ${person.displayName} ${lineTwo ?? ''}`;
+             const ariaLabel = `${person.displayName} ${lineTwo ?? ''}`;
              return html`
                <li
                 id="${person.id}"

From 9f8953a4fdd9fafb19551d487197a2bb88d6738e Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Fri, 26 May 2023 02:32:05 -0700
Subject: [PATCH 2/5] feat: add custom focus ring color (#2334)

adds the ability for developers to define the color used for the focus ring
requires the developer to set the --focus-ring-style for application in Firefox
uses the General > Theme story as a working example
---
 .../src/components/mgt-login/mgt-login.scss          |  6 +-----
 .../mgt-components/src/styles/shared-styles.scss     | 12 +++++++++++-
 stories/samples/general.stories.js                   |  8 ++++++--
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.scss b/packages/mgt-components/src/components/mgt-login/mgt-login.scss
index f245ca8929..a22644ae2a 100644
--- a/packages/mgt-components/src/components/mgt-login/mgt-login.scss
+++ b/packages/mgt-components/src/components/mgt-login/mgt-login.scss
@@ -60,10 +60,6 @@ mgt-login .login-button {
     border-radius: 4px;
   }
 
-  &:focus {
-    outline: 0;
-  }
-
   &:disabled {
     opacity: 0.4;
     pointer-events: none;
@@ -74,7 +70,7 @@ mgt-login .login-button {
   }
 
   &:focus-visible {
-    outline: auto;
+    outline-style: $focus-ring-style;
   }
 }
 
diff --git a/packages/mgt-components/src/styles/shared-styles.scss b/packages/mgt-components/src/styles/shared-styles.scss
index 6d69e9b7bc..2d1262736b 100644
--- a/packages/mgt-components/src/styles/shared-styles.scss
+++ b/packages/mgt-components/src/styles/shared-styles.scss
@@ -5,6 +5,8 @@
  * -------------------------------------------------------------------------------------------
  */
 
+$focus-ring-style: var(--focus-ring-style, auto);
+
 :host([hidden]) {
   display: none;
 }
@@ -17,7 +19,15 @@
   --theme-primary-color: #0078d7;
   --theme-dark-color: #005a9e;
 }
-
+:focus-visible {
+  // ensure default is correctly set for Firefox
+  outline-color: var(--focus-ring-color, Highlight);
+  // ensure default is set for other browsers
+  outline-color: var(--focus-ring-color, -webkit-focus-ring-color);
+  // set the style of the focus ring
+  // this needs to be something other than auto in Firefox to use the custom color
+  outline-style: $focus-ring-style;
+}
 .ms-Icon {
   display: inline-block;
   font-family: 'FabricMDL2Icons';
diff --git a/stories/samples/general.stories.js b/stories/samples/general.stories.js
index 09ceee60a7..7063d41840 100644
--- a/stories/samples/general.stories.js
+++ b/stories/samples/general.stories.js
@@ -166,10 +166,10 @@ export const cache = () => html`
   </script>
 `;
 export const theme = () => html`
-  <div class="mgt-light">
+  <div class="mgt-light root">
     <header class="mgt-dark">
       <p>I should be dark, regional class</p>
-      <mgt-teams-channel-picker></mgt-teams-channel-picker>
+      <mgt-people-picker></mgt-people-picker>
       <div class="mgt-light">
         <p>I should be light, second level regional class</p>
         <mgt-teams-channel-picker></mgt-teams-channel-picker>
@@ -187,6 +187,10 @@ export const theme = () => html`
     <mgt-teams-channel-picker class="mgt-foo"></mgt-teams-channel-picker>
   </div>
   <style>
+    .root {
+      --focus-ring-color: red;
+      --focus-ring-style: solid;
+    }
     .custom1 {
       --input-border: 2px solid teal;
       --input-background-color: #33c2c2;

From b095694599272726b4a40aa9fac0329fc5de7c79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20TOUBIANA?= <stephane.toubiana.pro@gmail.com>
Date: Thu, 1 Jun 2023 17:53:52 +0200
Subject: [PATCH 3/5] fix: Update mgt-file-upload.ts (#2358)

---
 .../components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts
index 94f54fdbe7..eb045e2194 100644
--- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts
+++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts
@@ -854,7 +854,7 @@ export class MgtFileUpload extends MgtBaseComponent {
         this._dialogTitle = strings.maximumFileSizeTitle;
         this._dialogContent =
           strings.maximumFileSize
-            .replace('{FileSize}', formatBytes(fileUploadList.maxFileSize))
+            .replace('{FileSize}', formatBytes(fileUploadList.maxFileSize * 1024))
             .replace('{FileName}', file.name) +
           formatBytes(file.size) +
           '.';

From a8902ac19506e955e604023f5ec93e9c68100ec5 Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Thu, 1 Jun 2023 11:03:54 -0700
Subject: [PATCH 4/5] chore: version bump (#2378)

---
 package.json                              | 2 +-
 packages/mgt-element/src/utils/version.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 27575cfd40..40ac467790 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "root",
   "private": true,
-  "version": "2.10.2",
+  "version": "2.11.0",
   "workspaces": [
     "packages/*",
     "packages/providers/*",
diff --git a/packages/mgt-element/src/utils/version.ts b/packages/mgt-element/src/utils/version.ts
index 254ccb648b..c58437aeb6 100644
--- a/packages/mgt-element/src/utils/version.ts
+++ b/packages/mgt-element/src/utils/version.ts
@@ -8,4 +8,4 @@
 // THIS FILE IS AUTO GENERATED
 // ANY CHANGES WILL BE LOST DURING BUILD
 
-export const PACKAGE_VERSION = '2.10.2';
+export const PACKAGE_VERSION = '2.11.0';

From 78e04ca2ddda87fa58358e13da215374d2fda781 Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Thu, 1 Jun 2023 21:26:22 +0000
Subject: [PATCH 5/5] fixing stylelint issues

---
 packages/mgt-components/src/styles/shared-styles.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/mgt-components/src/styles/shared-styles.scss b/packages/mgt-components/src/styles/shared-styles.scss
index 3b28191c99..7e586f26b4 100644
--- a/packages/mgt-components/src/styles/shared-styles.scss
+++ b/packages/mgt-components/src/styles/shared-styles.scss
@@ -21,15 +21,20 @@ $focus-ring-style: var(--focus-ring-style, auto);
   --theme-primary-color: #0078d7;
   --theme-dark-color: #005a9e;
 }
+
 :focus-visible {
   // ensure default is correctly set for Firefox
   outline-color: var(--focus-ring-color, Highlight);
+
   // ensure default is set for other browsers
+  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
   outline-color: var(--focus-ring-color, -webkit-focus-ring-color);
+  
   // set the style of the focus ring
   // this needs to be something other than auto in Firefox to use the custom color
   outline-style: $focus-ring-style;
 }
+
 .ms-icon {
   display: inline-block;
   font-family: $font-icon;