Resolve issues shown when running the build process for Svelte app.

Problem/Motivation

Getting some warnings/notices when running npm run build, most of these are related to accessibility issues. Not at all a priority right now, but all these should be fixed going forward.

Steps to reproduce

Change your directory to sveltejs in the module root and run the command 'npm run build'. You will see the following message.

src/main.js → public/build/bundle.js...
(!) Plugin svelte: A11y: <a> element should have an href attribute
src/ProjectBrowser.svelte
117:                 <!-- @todo Derive these filters from drupalSettings.project_browser.smart_filters. -->
118:                 <li class:js-active-tab="{tab === 'recommended'}" class="tabs__tab js-tab is-active">
119:                     <a class:is-active="{tab === 'recommended'}" on:click={showRecommended} class="tabs__link js-tabs-link">Recommended projects</a>
                         ^
120:                 </li>
121:                 <li class:js-active-tab="{tab === 'all'}" class="tabs__tab js-tab">
src/ProjectBrowser.svelte
120:                 </li>
121:                 <li class:js-active-tab="{tab === 'all'}" class="tabs__tab js-tab">
122:                     <a class:is-active="{tab === 'all'}" on:click={showAll} title="All published projects" class="tabs__link js-tabs-link">All projects</a>
                         ^
123:                 </li>
124:             </ul>
src/Pagination.svelte
51:     <ul class="pager__items js-pager__items">
52:         <li class="pager__item pager__first">
53:             <a class="pager__link" disabled={page === 0} on:click={e => onChange(e, 0)}>
                ^
54:                 {labels.first}
55:             </a>
src/Pagination.svelte
56:         </li>
57:         <li class="pager__item pager__previous">
58:         <a class="pager__link" disabled={page === 0} on:click={e => onChange(e, page - 1)}>
            ^
59:             {labels.previous}
60:         </a>
src/Pagination.svelte
65:                     class:pager__item--active={page === page + button}
66:                 >
67:                     <a class="pager__link"
                        ^
68:                             class:is-active={page === page + button}
69:                             on:click={e => onChange(e, page + button)}>
src/Pagination.svelte
74:         {/each}
75:         <li class="pager__item pager__next">
76:             <a      class="pager__link"
                ^
77:                     disabled={page > pageCount - 1}
78:                     on:click={e => onChange(e, page + 1)}>
src/Pagination.svelte
81:         </li>
82:         <li class="pager__item pager__last">
83:             <a      class="pager__link"
                ^
84:                     disabled={page >= pageCount} on:click={e => onChange(e, pageCount)}>
85:                 {labels.last}
(!) Plugin svelte: Unused CSS selector ".center > span"
src/ProjectGrid.svelte
78:     }
79: 
80:     .center > span {
        ^
81:         padding: 10px 10px;
82:         float: left;
(!) Plugin svelte: A11y: A form label must be associated with a control.
src/Search.svelte
111: <form class="views-exposed-form">
112:     <div class="views-exposed-form__item js-form-item form-item js-form-type-textfield form-type--textfield ">
113:         <label class="form-item__label">Title</label>
             ^
114:         <input
115:                 class="search form-text form-element form-element--type-text form-element--api-textfield"
src/Search.svelte
121:     </div>
122:     <div class="views-exposed-form__item js-form-item form-item js-form-type-select form-type--select js-form-item-type form-item--type">
123:         <label class="form-item__label">Category</label>
             ^
124:         <select name="category" bind:value={category} on:change={onSelectCategory} class="form-select form-element form-element--type-select">
125:             {#await fetchEntity("https://www.drupal.org/api-d7/taxonomy_term.json?vocabulary=3")}
(!) Plugin svelte: A11y: on:blur must be used instead of on:change, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users.
src/Search.svelte
122:     <div class="views-exposed-form__item js-form-item form-item js-form-type-select form-type--select js-form-item-type form-item--type">
123:         <label class="form-item__label">Category</label>
124:         <select name="category" bind:value={category} on:change={onSelectCategory} class="form-select form-element form-element--type-select">
             ^
125:             {#await fetchEntity("https://www.drupal.org/api-d7/taxonomy_term.json?vocabulary=3")}
126:                 <option value="">Loading...</option>
(!) Plugin svelte: Unused CSS selector ".views-exposed-form .form-item--no-label"
src/Search.svelte
 97:         box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
 98:     }
 99:     .views-exposed-form .form-item--no-label, .views-exposed-form__item.views-exposed-form__item.views-exposed-form__item--actions {
         ^
100:         margin-top: 2.375rem;
101:     }
(!) Plugin svelte: 'drupalSettings' is not defined
src/Project/Image.svelte
26:     {/await}
27: {:else}
28:     <img src="/{drupalSettings.project_browser.module_path}/images/placeholder-image.png" alt="Placeholder image"/>
                    ^
29: {/if}
30: 
src/Project/SecurityCoverage.svelte
16: </style>
17: {#if coverage === 'covered'}
18:     <a href="https://www.drupal.org/security-advisory-policy" target="_blank" rel="noreferrer"><span class="security-covered" title="Covered by Drupal Security Team"><img src="/{drupalSettings.project_browser.module_path}/images/shield-icon-black.svg" /></span></a>
                                                                                                                                                                                      ^
19: {/if}
20: 
(!) Plugin svelte: A11y: Screenreaders already announce <img> elements as an image.
src/Project/Image.svelte
26:     {/await}
27: {:else}
28:     <img src="/{drupalSettings.project_browser.module_path}/images/placeholder-image.png" alt="Placeholder image"/>
        ^
29: {/if}
30: 
(!) Plugin svelte: Empty block
src/Project/SupportingOrganization.svelte
16:         <span>with support from</span>
17:         {#each field_supporting_organizations || [] as field_collection}
18:             {#await fetchEntity(field_collection.uri)}
                                                          ^
19:             {:then item}
20:                 {#await fetchEntity(item.field_supporting_organization.uri)}
src/Project/SupportingOrganization.svelte
18:             {#await fetchEntity(field_collection.uri)}
19:             {:then item}
20:                 {#await fetchEntity(item.field_supporting_organization.uri)}
                                                                                ^
21:                 {:then organization}
22:                     <span class="organization"><a href="{organization.url}" target="_blank" rel="noreferrer">{organization.title}</a>{#if field_supporting_organizations[field_supporting_organizations.length - 1].id !== field_collection.id},{/if}</span>
src/Project/Categories.svelte
30:         <ul>
31:             {#each taxonomy_vocabulary_3 || [] as category}
32:                 {#await fetchEntity(category.uri)}
                                                      ^
33:                 {:then term}
34:                     <li class="category">{term.name}</li>
(!) Plugin svelte: A11y: <img> element should have an alt attribute
src/Project/SecurityCoverage.svelte
16: </style>
17: {#if coverage === 'covered'}
18:     <a href="https://www.drupal.org/security-advisory-policy" target="_blank" rel="noreferrer"><span class="security-covered" title="Covered by Drupal Security Team"><img src="/{drupalSettings.project_browser.module_path}/images/shield-icon-black.svg" /></span></a>
                                                                                                                                                                          ^
19: {/if}
20: 
created public/build/bundle.js in 4.6s

Proposed resolution

Fix all the warnings and try to add a suppress message in case warnings cannot be fixed.

Remaining tasks

• ✅ File an issue about this project
• ☐ Addition/Change/Update/Fix to this project
• ☐ Testing to ensure no regression
• ☐ Automated unit/functional testing coverage
• ☐ Developer Documentation support on feature change/addition
• ☐ User Guide Documentation support on feature change/addition
• ☐ Code review from 1 Drupal core team member
• ☐ Full testing and approval
• ☐ Credit contributors
• ☐ Review with the product owner
• ☐ Release