fix(spinner): progressbar role on host

elements/pf-spinner/BaseSpinner.ts

@@ -1,5 +1,5 @@
 // will remove file in 2627
-/* eslint-disable lit-a11y/accessible-name */
+
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';
 
@@ -14,7 +14,6 @@ export type SpinnerSize = (
 
 /**
  * Base spinner class
- *
  * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}
  * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}
  * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}
@@ -42,7 +41,7 @@ export abstract class BaseSpinner extends LitElement {
 
   override render() {
     return html`
-      <svg role="progressbar" viewBox="0 0 100 100">
+      <svg viewBox="0 0 100 100">
         <circle cx="50" cy="50" r="45" fill="none" />
       </svg>
     `;

elements/pf-spinner/pf-spinner.ts

@@ -2,13 +2,15 @@ import { html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+
 import { BaseSpinner } from './BaseSpinner.js';
+
 import styles from './pf-spinner.css';
 
 /**
  * A **spinner** is used to indicate to users that an action is in progress. For actions
  * that may take a long time, use a progress bar instead.
- *
  * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}
  * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}
  * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}
@@ -28,6 +30,10 @@ import styles from './pf-spinner.css';
 @customElement('pf-spinner')
 export class PfSpinner extends BaseSpinner {
   static readonly styles = [...BaseSpinner.styles, styles];
+
+  // eslint-disable-next-line no-unused-private-class-members
+  #internals = InternalsController.of(this, { role: 'progressbar' });
+
   render() {
     return html`<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;
   }

elements/pf-spinner/test/pf-spinner.spec.ts

@@ -19,10 +19,19 @@ describe('<pf-spinner>', function() {
     const element = await createFixture<PfSpinner>(html`
       <pf-spinner>Loading...</pf-spinner>
     `);
-
     expect(element.getAttribute('size')).to.equal('xl');
   });
 
+  describe('basic usage', function() {
+    let element: PfSpinner;
+    beforeEach(async function() {
+      element = await createFixture<PfSpinner>(html`<pf-spinner>Loading...</pf-spinner>`);
+    });
+    it('is accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+  });
+
   describe('size attribute', function() {
     let element: PfSpinner;