backport SL-2353

* add tag-counter part to wa-select

* on second thought

docs/docs/resources/changelog.md

@@ -15,8 +15,12 @@ During the alpha period, things might break! We take breaking changes very serio
 ## Next
 
 - Added an orientation example to the native radio docs
+- Added the `tag` part (and associated exported parts) to `<wa-select>` to allow targeting the tag that shows when more than the max number of visible items have been selected
 - Fixed a number of broken event listeners throughout the docs
 - Fixed a bug in `<wa-card>` that prevented slots from showing automatically without `with-` attributes
+- Fixed a bug in `<wa-select>` that prevented the placeholder color from being customized with the `--wa-form-control-placeholder-color` token
+- Improved accessibility of `<wa-carousel>`
+
 
 ## 3.0.0-alpha.10
 

src/components/carousel/carousel.ts

@@ -378,8 +378,16 @@ export default class WaCarousel extends WebAwesomeElement {
     this.getSlides({ excludeClones: false }).forEach((slide, index) => {
       slide.classList.remove('--in-view');
       slide.classList.remove('--is-active');
+      slide.setAttribute('role', 'group');
       slide.setAttribute('aria-label', this.localize.term('slideNum', index + 1));
 
+      if (this.pagination) {
+        slide.setAttribute('role', 'tabpanel');
+        slide.removeAttribute('aria-label');
+        slide.setAttribute('aria-labelledby', `tab-${index + 1}`);
+        slide.setAttribute('id', `slide-${index + 1}`);
+      }
+
       if (slide.hasAttribute('data-clone')) {
         slide.remove();
       }
@@ -633,7 +641,7 @@ export default class WaCarousel extends WebAwesomeElement {
           : ''}
         ${this.pagination
           ? html`
-              <div part="pagination" role="tablist" class="pagination" aria-controls="scroll-container">
+              <div part="pagination" role="tablist" class="pagination">
                 ${map(range(pagesCount), index => {
                   const isActive = index === currentPage;
                   return html`
@@ -644,8 +652,10 @@ export default class WaCarousel extends WebAwesomeElement {
                         'pagination-item--active': isActive,
                       })}"
                       role="tab"
+                      id="tab-${index + 1}"
+                      aria-controls="slide-${index + 1}"
                       aria-selected="${isActive ? 'true' : 'false'}"
-                      aria-label="${this.localize.term('goToSlide', index + 1, pagesCount)}"
+                      ${isActive ? '' : `aria-label="${this.localize.term('goToSlide', index + 1, pagesCount)}"`}
                       tabindex=${isActive ? '0' : '-1'}
                       @click=${() => this.goToSlide(index * slidesPerMove)}
                       @keydown=${this.handleKeyDown}

src/components/select/select.css

@@ -72,7 +72,7 @@
   }
 
   &::placeholder {
-    color: var(--wa-form-controls-placeholder-color);
+    color: var(--wa-form-control-placeholder-color);
   }
 }
 

src/components/select/select.ts

@@ -68,7 +68,6 @@ import styles from './select.css';
  * @csspart listbox - The listbox container where options are slotted.
  * @csspart tags - The container that houses option tags when `multiselect` is used.
  * @csspart tag - The individual tags that represent each multiselect option.
- * @csspart tag__base - The tag's base part.
  * @csspart tag__content - The tag's content part.
  * @csspart tag__remove-button - The tag's remove button.
  * @csspart tag__remove-button__base - The tag's remove button base part.
@@ -661,7 +660,18 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
         </div>`;
       } else if (index === this.maxOptionsVisible) {
         // Hit tag limit
-        return html`<wa-tag>+${this.selectedOptions.length - index}</wa-tag>`;
+        return html`
+          <wa-tag
+            part="tag"
+            exportparts="
+              base:tag__base,
+              content:tag__content,
+              remove-button:tag__remove-button,
+              remove-button__base:tag__remove-button__base
+            "
+            >+${this.selectedOptions.length - index}</wa-tag
+          >
+        `;
       }
       return html``;
     });