Setting translate through direct access does not work (#3800)

* Setting translate through direct access does not work

* add test

* alternative fix

compat/src/render.js

@@ -143,6 +143,8 @@ function handleDomVNode(vnode) {
 			// value will be used as the file name and the file will be called
 			// "true" upon downloading it.
 			value = '';
+		} else if (lowerCased === 'translate' && value === 'no') {
+			value = false;
 		} else if (lowerCased === 'ondoubleclick') {
 			i = 'ondblclick';
 		} else if (

compat/test/browser/render.test.js

@@ -499,6 +499,16 @@ describe('compat render', () => {
 		expect(updateSpy).to.not.be.calledOnce;
 	});
 
+	it('should support the translate attribute w/ yes as a string', () => {
+		render(<b translate="yes">Bold</b>, scratch);
+		expect(scratch.innerHTML).to.equal('<b translate="yes">Bold</b>');
+	});
+
+	it('should support the translate attribute w/ no as a string', () => {
+		render(<b translate="no">Bold</b>, scratch);
+		expect(scratch.innerHTML).to.equal('<b translate="no">Bold</b>');
+	});
+
 	it('should support false aria-* attributes', () => {
 		render(<div aria-checked={false} />, scratch);
 		expect(scratch.firstChild.getAttribute('aria-checked')).to.equal('false');

src/jsx.d.ts

@@ -2419,7 +2419,7 @@ export namespace JSXInternal {
 			| undefined
 			| SignalLike<boolean | undefined>;
 		results?: number | undefined | SignalLike<number | undefined>;
-		translate?: 'yes' | 'no' | undefined | SignalLike<'yes' | 'no' | undefined>;
+		translate?: boolean | undefined | SignalLike<boolean | undefined>;
 
 		// RDFa Attributes
 		about?: string | undefined | SignalLike<string | undefined>;

test/browser/render.test.js

@@ -130,6 +130,16 @@ describe('render()', () => {
 		expect(scratch.firstChild).to.have.property('nodeName', 'X-BAR');
 	});
 
+	it('should support the translate attribute w/ false as a boolean', () => {
+		render(<b translate={false}>Bold</b>, scratch);
+		expect(scratch.innerHTML).to.equal('<b translate="no">Bold</b>');
+	});
+
+	it('should support the translate attribute w/ true as a boolean', () => {
+		render(<b translate>Bold</b>, scratch);
+		expect(scratch.innerHTML).to.equal('<b translate="yes">Bold</b>');
+	});
+
 	it('should support the form attribute', () => {
 		render(
 			<div>