Merge pull request #2382 from microsoftgraph/merge/update-from-main

chore: update from main

Author: gavinbarron

packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts

@@ -884,7 +884,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) +
           '.';

packages/mgt-components/src/components/mgt-login/mgt-login.scss

@@ -67,6 +67,10 @@ $button-padding: var(--login-button-padding, 0);
         }
       }
     }
+
+    &:focus-visible {
+      outline-style: $focus-ring-style;
+    }
   }
 
   fluent-card {

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts

@@ -938,7 +938,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}"

packages/mgt-components/src/styles/shared-styles.scss

@@ -7,6 +7,8 @@
 
 @import './shared-sass-variables';
 
+$focus-ring-style: var(--focus-ring-style, auto);
+
 :host([hidden]) {
   display: none;
 }
@@ -20,6 +22,19 @@
   --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;

stories/samples/general.stories.js

@@ -162,10 +162,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>
@@ -183,6 +183,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;