chore: set aria-pressed when selected

src/lib/chips/chip/chip-adapter.ts

@@ -24,6 +24,7 @@ export interface IChipAdapter extends IBaseAdapter {
   toggleFieldVariant(value: boolean): void;
   getChipSetState(): IChipState | null;
   setDisabled(value: boolean): void;
+  setSelected(value: boolean): void;
   focusTrigger(options?: FocusOptions): void;
   tryFocusRemoveButton(): void;
   clickRemoveButton(): void;
@@ -132,6 +133,13 @@ export class ChipAdapter extends BaseAdapter<IChipComponent> implements IChipAda
     }
   }
 
+  public setSelected(value: boolean): void {
+    if (this._triggerElement instanceof HTMLAnchorElement) {
+      return;
+    }
+    this._triggerElement.setAttribute('aria-pressed', String(value));
+  }
+
   public toggleFieldVariant(value: boolean): void {
     if (value) {
       if (!this._stateLayerElement.isConnected) {
@@ -199,6 +207,13 @@ export class ChipAdapter extends BaseAdapter<IChipComponent> implements IChipAda
     buttonEl.setAttribute('aria-label', `Remove ${this._component.innerText}`);
     buttonEl.setAttribute('part', 'remove-button');
 
+    if (this._component.disabled) {
+      buttonEl.disabled = true;
+    }
+    if (this._component.selected) {
+      buttonEl.setAttribute('aria-pressed', 'true');
+    }
+
     const iconEl = document.createElement('forge-icon');
     iconEl.name = 'close';
     buttonEl.appendChild(iconEl);

src/lib/chips/chip/chip-foundation.ts

@@ -185,6 +185,8 @@ export class ChipFoundation implements IChipFoundation {
   }
 
   private _applySelected(): void {
+    this._adapter.setSelected(this._selected);
+
     // If using the filter type, we need to hide the leading slot to ensure that
     // the checkmark shows in place of any leading elements
     if (this._type === 'filter') {

src/lib/chips/chips.test.ts

@@ -747,6 +747,14 @@ describe('Chips', () => {
       expect(firstChip.hasAttribute(CHIP_CONSTANTS.attributes.SELECTED)).to.be.false;
     });
 
+    it('should be accessible when selected', async () => {
+      const el = await fixture<IChipComponent>(html`<forge-chip selected>Test</forge-chip>`);
+      const triggerEl = getTriggerElement(el);
+
+      expect(triggerEl.getAttribute('aria-pressed')).to.equal('true');
+      await expect(el).to.be.accessible();
+    });
+
     ['filter', 'choice', 'input'].forEach(type => {
       describe(`${type} chips keyboard selection`, () => {
         it(`should select focused chip when pressing enter on ${type} chips`, async () => {