[Accessibility] Fixed focus no appearing on black buttons and label on input box in Image Gen page.

apps/pwabuilder/src/script/pages/app-home.ts

@@ -172,6 +172,7 @@ export class AppHome extends LitElement {
         }
         .raise:focus:not(disabled) {
           transform: scale(1.01);
+          outline: 1px solid #000000;
         }
         #input-form sl-input {
           margin-right: 10px;

apps/pwabuilder/src/script/pages/app-report.ts

@@ -510,13 +510,13 @@ export class AppReport extends LitElement {
           padding: 2em;
         }
 
-        #app-actions button:not(#test-download) { // pfs + disabled
+        #pfs, #pfs-disabled { // pfs + disabled
           white-space: nowrap;
           padding: var(--button-padding);
           border-radius: var(--button-border-radius);
           font-size: var(--button-font-size);
           font-weight: var(--font-bold);
-          border: none;
+          border: 1px solid transparent;
           color: #ffffff;
           white-space: nowrap;
         }
@@ -544,6 +544,8 @@ export class AppReport extends LitElement {
 
         #pfs:focus, #pfs:hover {
           box-shadow: var(--button-box-shadow);
+          border: 1px solid white;
+          outline: 2px solid black;
         }
 
         #share-card {

apps/pwabuilder/src/script/pages/image-generator.ts

@@ -118,9 +118,9 @@ export class ImageGenerator extends LitElement {
           padding: 32px;
         }
 
-        sl-input {
+        input[type="number"] {
           width: 30%;
-          font-size: 16px;
+          font-size: 22px;
         }
         small {
           margin-top: 10px;
@@ -176,21 +176,28 @@ export class ImageGenerator extends LitElement {
     return html`
       <div>
         <app-header></app-header>
-        <main id="main" role="presentation" class="main background">
+        <main id="main" class="main background">
           <div id="image-generator-card">
             <h1>${loc.image_generator}</h1>
             <p>${loc.image_generator_text}</p>
-            <form id="imageFileInputForm" enctype="multipart/form-data" role="form" class="form">
+            <form id="imageFileInputForm" enctype="multipart/form-data" class="form">
               <section class="form-left">
                 <div class="image-section">
                   <h2>${loc.input_image}</h2>
                   <p>${loc.input_image_help}</p>
                   <app-file-input @input-change=${this.handleInputChange}></app-file-input>
                 </div>
                 <div class="padding-section">
-                  <h2>${loc.padding}</h2>
-                  <sl-input name="padding" type="number" max="1" min="0" step="0.1" value=${this.padding}
-                    @sl-change=${this.handlePaddingChange} required></sl-input>
+                  <label for="padding"><h2>${loc.padding}</h2></label>
+                  <input 
+                    id="padding"
+                    name="padding" 
+                    type="number" 
+                    max="1" 
+                    min="0" 
+                    step="0.1" 
+                    value=${this.padding}
+                    @change=${this.handlePaddingChange} required></input>
                   <small>${loc.padding_text}</small>
                 </div>
                 <div class="color-section">

apps/pwabuilder/src/script/pages/qualification/app-token.style.ts

@@ -470,6 +470,10 @@ export default css`
 	border-bottom: 1px solid var(--font-color);
 }
 
+.error-actions > *:focus {
+	outline: 1px solid #000000;
+}
+
 .top-banner-container {
 	padding: 7px;
 	width: 100%;
@@ -562,6 +566,10 @@ sl-details::part(summary-icon){
 	display: none;
 }
 
+sl-details:focus {
+	outline: 1px solid #000000;
+}
+
 img[data-card="installable-details"] {
 	transform: rotate(90deg);
 }
@@ -722,6 +730,11 @@ sl-details::part(header):focus {
 	border-color: var(--primary-color);
 }
 
+.primary::part(base):focus {
+	border: 1px solid #ffffff;
+	outline: 2px solid #000000;
+}
+
 .retest-button img {
 	width: 14px;
 	height: auto;
@@ -788,12 +801,16 @@ sl-details::part(header):focus {
 }
 
 .FTC {
+	font-family: var(--font-family),sans-serif;
 	font-size: var(--arrow-link-font-size);
 	font-weight: bold;
 	margin: 0px 0.5em 0px 0px;
+	padding: 0;
 	line-height: 1em;
 	color: var(--primary-color);
 	width: fit-content;
+	background: none;
+	border: none;
   border-bottom: 1px solid #4f3fb6;
 }
 

apps/pwabuilder/src/script/pages/qualification/app-token.ts

@@ -921,7 +921,7 @@ export class AppToken extends LitElement {
           <li>Use the Store Token to create a Microsoft Store on Windows developer account within 30 calendar days of Microsoft sending you the token, using the same Microsoft Account you used to sign in here</li>
           <li>Plan to publish an app in the store this calendar year (prior to 12/31/2023 midnight Pacific Standard Time)</li>
         </ul>
-        <p class="FTC" @click=${() => this.showTandC(false)}>Full Terms and Conditions</p>
+        <button class="FTC" @click=${() => this.showTandC(false)}>Full Terms and Conditions</button>
       </div>` : html``}
       ${this.siteURL ?
         html`

apps/pwabuilder/styles/global.css

@@ -114,4 +114,8 @@ body {
   background: var(--primary-background-color);
   padding: 0;
   margin: 0;
+}
+
+#pageTitle {
+  display: none;
 }