From ac0c6e886391bcce6a8bb6c661c091aa024f5529 Mon Sep 17 00:00:00 2001
From: Jaylyn Barbee <51131738+Jaylyn-Barbee@users.noreply.github.com>
Date: Tue, 29 Oct 2024 13:59:18 -0400
Subject: [PATCH] Small accessibility push (#4840)

fixes
#4762
<!-- Link to relevant issue (for ex: "fixes #1234") which will
automatically close the issue once the PR is merged -->

## PR Type
<!-- Please uncomment one ore more that apply to this PR -->

Bugfix
<!-- - Feature -->
<!-- - Code style update (formatting) -->
<!-- - Refactoring (no functional changes, no api changes) -->
<!-- - Build or CI related changes -->
<!-- - Documentation content changes -->
<!-- - Sample app changes -->
<!-- - Other... Please describe: -->


## Describe the current behavior?
<!-- Please describe the current behavior that is being modified or link
to a relevant issue. -->
4762 - required fields in manifest editor are not announced as
"required" by narrator

## Describe the new behavior?
4762 - required fields in manifest editor are announced as "required" by
narrator

## PR Checklist
- [x] Test: run `npm run test` and ensure that all tests pass
- [x] Target main branch (or an appropriate release branch if
appropriate for a bug fix)
- [x] Ensure that your contribution follows [standard accessibility
guidelines](https://docs.microsoft.com/en-us/microsoft-edge/accessibility/design).
Use tools like https://webhint.io/ to validate your changes.


## Additional Information
---
 .../manifest-editor/src/components/manifest-info-form.ts  | 4 ++--
 .../src/components/manifest-settings-form.ts              | 2 +-
 .../manifest-editor/src/components/manifest-share-form.ts | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/manifest-editor/src/components/manifest-info-form.ts b/components/manifest-editor/src/components/manifest-info-form.ts
index cdd3f3ef2..44b449862 100644
--- a/components/manifest-editor/src/components/manifest-info-form.ts
+++ b/components/manifest-editor/src/components/manifest-info-form.ts
@@ -545,7 +545,7 @@ export class ManifestInfoForm extends LitElement {
               <p class="field-desc">(required)</p>
             </div>
             <p class="field-desc">The name of your app as displayed to the user</p>
-            <sl-input placeholder="PWA Name" value=${this.manifest.name! || ""} data-field="name" @sl-change=${this.handleInputChange}></sl-input>
+            <sl-input placeholder="PWA Name" value=${this.manifest.name! || ""} data-field="name" @sl-change=${this.handleInputChange} required="true"></sl-input>
           </div>
           <div class="form-field">
             <div class="field-header">
@@ -557,7 +557,7 @@ export class ManifestInfoForm extends LitElement {
               <p class="field-desc">(required)</p>
             </div>
             <p class="field-desc">Used in app launchers</p>
-            <sl-input placeholder="PWA Short Name" value=${this.manifest.short_name! || ""} data-field="short_name" @sl-change=${this.handleInputChange}></sl-input>
+            <sl-input placeholder="PWA Short Name" value=${this.manifest.short_name! || ""} data-field="short_name" @sl-change=${this.handleInputChange} required="true"></sl-input>
           </div>
         </div>
 
diff --git a/components/manifest-editor/src/components/manifest-settings-form.ts b/components/manifest-editor/src/components/manifest-settings-form.ts
index 9de34b788..c5aa49bc5 100644
--- a/components/manifest-editor/src/components/manifest-settings-form.ts
+++ b/components/manifest-editor/src/components/manifest-settings-form.ts
@@ -604,7 +604,7 @@ export class ManifestSettingsForm extends LitElement {
               <p class="field-desc">(required)</p>
             </div>
             <p class="field-desc">The URL that loads when your PWA starts</p>
-            <sl-input placeholder="PWA Start URL" value=${this.manifest.start_url! || ""} data-field="start_url" @sl-change=${this.handleInputChange}></sl-input>
+            <sl-input placeholder="PWA Start URL" value=${this.manifest.start_url! || ""} data-field="start_url" @sl-change=${this.handleInputChange} required="true"></sl-input>
           </div>
           <div class="form-field">
             <div class="field-header">
diff --git a/components/manifest-editor/src/components/manifest-share-form.ts b/components/manifest-editor/src/components/manifest-share-form.ts
index 7498b2a36..3f01408ff 100644
--- a/components/manifest-editor/src/components/manifest-share-form.ts
+++ b/components/manifest-editor/src/components/manifest-share-form.ts
@@ -939,7 +939,7 @@ export class ManifestShareForm extends LitElement {
                     <p class="field-desc">(required)</p>
                   </div>
                   <p class="field-desc">The URL for the web share target </p>
-                  <sl-input name="action" placeholder="Add action (ex: /share-receiver)" value=${this.manifest.share_target?.action! || ""} @sl-change=${() => this.handleTopLevelInputChange("action")} data-field="share_target.action"></sl-input>
+                  <sl-input name="action" placeholder="Add action (ex: /share-receiver)" value=${this.manifest.share_target?.action! || ""} @sl-change=${() => this.handleTopLevelInputChange("action")} data-field="share_target.action" required="true"></sl-input>
                   <p class="action-error-message error-message">Action is a required field and must be in the scope of your PWA</p>
                 </div>
                 <div class="form-field">
@@ -997,7 +997,7 @@ export class ManifestShareForm extends LitElement {
                       <manifest-field-tooltip .field=${"share_target.params.title"}></manifest-field-tooltip>
                     </div>
                   </div>
-                  <sl-input name="title" class="params" placeholder="Add title" value=${this.manifest.share_target?.params?.title! || ""} @sl-change=${() => this.handleParameterInputChange("title")} data-field="share_target.params.title"></sl-input>
+                  <sl-input name="title" class="params" placeholder="Add title" value=${this.manifest.share_target?.params?.title! || ""} @sl-change=${() => this.handleParameterInputChange("title")} data-field="share_target.params.title" required="true"></sl-input>
                 </div>
                 <div class="form-field">
                   <div class="field-header">
@@ -1006,7 +1006,7 @@ export class ManifestShareForm extends LitElement {
                       <manifest-field-tooltip .field=${"share_target.params.text"}></manifest-field-tooltip>
                     </div>
                   </div>
-                  <sl-input name="text" class="params" placeholder="Add text" value=${this.manifest.share_target?.params?.text! || ""} @sl-change=${() => this.handleParameterInputChange("text")} data-field="share_target.params.text"></sl-input>
+                  <sl-input name="text" class="params" placeholder="Add text" value=${this.manifest.share_target?.params?.text! || ""} @sl-change=${() => this.handleParameterInputChange("text")} data-field="share_target.params.text" required="true"></sl-input>
                 </div>
                 <div class="form-field">
                   <div class="field-header">
@@ -1015,7 +1015,7 @@ export class ManifestShareForm extends LitElement {
                       <manifest-field-tooltip .field=${"share_target.params.url"}></manifest-field-tooltip>
                     </div>
                   </div>
-                  <sl-input name="url" class="params" placeholder="Add url" value=${this.manifest.share_target?.params?.url! || ""} @sl-change=${() => this.handleParameterInputChange("url")} data-field="share_target.params.url"></sl-input>
+                  <sl-input name="url" class="params" placeholder="Add url" value=${this.manifest.share_target?.params?.url! || ""} @sl-change=${() => this.handleParameterInputChange("url")} data-field="share_target.params.url" required="true"></sl-input>
                 </div>
               </div>
               <div class="form-row long">