Incorrect value of [aria-pressed] attribute in switch

[Comandeer]

📝 Provide detailed reproduction steps (if any)

1. Open https://ckeditor.com/docs/ckeditor5/latest/examples/builds-custom/full-featured-editor.html
2. Open a dialog for inserting links.
3. Inspect the "Downloadable" switch element.

✔️ Expected result

The element has [aria-pressed] attribute with a value of false.

❌ Actual result

The element has [aria-pressed] attribute with a value of undefined.

📃 Other details

• Browser: 97.0.4692.71 (Official Build) (x86_64)
• OS: macOS 12.0.1
• First affected CKEditor version: 31.1.0 (tested only on this one)
• Installed CKEditor plugins: link

It seems that the attribute's value fixes itself the moment user interacts with the switch.

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[NaincyKumariKnoldus]

Hey @Comandeer Can I do this?

[Comandeer]

@NaincyKumariKnoldus, yes, you can! Please note that your PR should include tests for the change. You can check our docs for more info about the testing environment.

[NaincyKumariKnoldus]

Hey @Comandeer Having a CLA is important for contributing? I dont have

[Reinmar]

You will be asked to sign it after you make a PR. It can be done completely online :) It's a standard procedure that secures the project from odd copyrights problems.

[NaincyKumariKnoldus]

Hey @Reinmar I am not able to find aria-pressed undefined here.

[pomek]

• Possible solution. Cast the value variable to boolean, then to a string.
  

  ckeditor5/packages/ckeditor5-ui/src/button/buttonview.js

  Line 148 in e391ddb

  'aria-pressed': bind.to( 'isOn', value => this.isToggleable ? String( value ) : false )

• One more place that we could apply a fix:

  ckeditor5/packages/ckeditor5-link/src/ui/linkformview.js

  Lines 287 to 289 in e391ddb

  	switchButton.bind( 'isOn' ).toMany( [ manualDecorator, linkCommand ], 'value', ( decoratorValue, commandValue ) => {
  	return commandValue === undefined && decoratorValue === undefined ? manualDecorator.defaultValue : decoratorValue;
  	} );