Use radio button and hide role for image

Author: compulim

packages/component/src/ActivityFeedback/private/ThumbButton.tsx

@@ -76,7 +76,7 @@ function ThumbButton(props: ThumbButtonProps, ref: ForwardedRef<HTMLInputElement
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         ref={ref}
-        type="checkbox"
+        type="radio"
       />
       <ThumbButtonImage
         className={classNames('webchat__thumb-button__image', 'webchat__thumb-button__image--is-stroked', {

packages/component/src/ActivityFeedback/private/ThumbDislike16Filled.tsx

@@ -3,7 +3,15 @@ import React, { memo } from 'react';
 type Props = Readonly<{ className?: string }>;
 
 const ThumbDislike16Filled = memo(({ className }: Props) => (
-  <svg className={className} fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    className={className}
+    fill="none"
+    height="16"
+    role="presentation"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M13.0939 4.61984C12.716 2.60391 10.6934 1.34358 8.71713 1.89254L3.76706 3.26756C3.03196 3.47175 2.47706 4.07638 2.33656 4.82627L2.11258 6.02165C1.94781 6.90105 2.5733 7.6693 3.26989 7.95815C3.5248 8.06386 3.81627 8.21111 4.1232 8.41574C5.80215 9.53503 6.60359 11.0523 7.13855 12.3413C7.23478 12.5731 7.32706 12.8106 7.41614 13.0399C7.56235 13.4162 7.69994 13.7703 7.83227 14.041C7.94336 14.2683 8.07685 14.4964 8.2515 14.6716C8.43773 14.8585 8.68676 14.9995 9.00016 14.9995C9.35735 14.9995 9.66579 14.8763 9.91159 14.6602C10.1473 14.453 10.3051 14.179 10.4137 13.8989C10.6282 13.3453 10.6952 12.648 10.7032 12.0058C10.7114 11.3524 10.6585 10.705 10.6045 10.2249C10.5955 10.1452 10.5865 10.0698 10.5776 9.99952H11.0903C12.6557 9.99952 13.836 8.57733 13.5475 7.03879L13.0939 4.61984Z"
       fill="currentcolor"

packages/component/src/ActivityFeedback/private/ThumbDislike16Regular.tsx

@@ -3,7 +3,15 @@ import React, { memo } from 'react';
 type Props = Readonly<{ className?: string }>;
 
 const ThumbDislike16Regular = memo(({ className }: Props) => (
-  <svg className={className} fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    className={className}
+    fill="none"
+    height="16"
+    role="presentation"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M10.5776 9.99952C10.5944 10.133 10.6119 10.2848 10.6283 10.45C10.7019 11.1893 10.7593 12.2428 10.6146 13.1274C10.5427 13.5666 10.4137 14.0141 10.1727 14.3636C9.91609 14.7357 9.52604 14.9995 9.00016 14.9995C8.48357 14.9995 8.16907 14.6298 7.97616 14.3084C7.78384 13.9879 7.61527 13.553 7.44271 13.1078L7.42958 13.0739C6.88287 11.6637 6.13522 9.75708 4.1232 8.41574C3.81627 8.21111 3.5248 8.06386 3.26989 7.95815C2.5733 7.6693 1.94781 6.90105 2.11258 6.02165L2.33656 4.82627C2.47706 4.07638 3.03196 3.47175 3.76706 3.26756L8.71713 1.89254C10.6934 1.34358 12.716 2.60391 13.0939 4.61984L13.5475 7.03879C13.836 8.57733 12.6557 9.99952 11.0903 9.99952H10.5776ZM12.1111 4.80413C11.8411 3.36418 10.3964 2.46395 8.98478 2.85605L4.03471 4.23107C3.66715 4.33317 3.38971 4.63549 3.31945 5.01043L3.09548 6.20582C3.04235 6.48935 3.2566 6.87007 3.65293 7.03442C3.96222 7.16268 4.31198 7.33974 4.67791 7.58369C6.9648 9.10828 7.80648 11.2795 8.35387 12.6916L8.36197 12.7124C8.55151 13.2014 8.69067 13.5556 8.83359 13.7938C8.90275 13.909 8.95439 13.9644 8.98519 13.9886C8.99329 13.995 8.99862 13.9981 9.00124 13.9995C9.14311 13.9992 9.24643 13.9453 9.3495 13.7959C9.46849 13.6233 9.56579 13.3445 9.62769 12.966C9.75044 12.2154 9.70484 11.2689 9.63323 10.549C9.60484 10.2636 9.57314 10.0209 9.54862 9.85016C9.53637 9.76485 9.52595 9.69769 9.51867 9.65235L9.51029 9.60123L9.50819 9.58884L9.50772 9.58609C9.48227 9.44064 9.52236 9.29093 9.61735 9.17788C9.66884 9.11659 9.73358 9.06935 9.8056 9.03892C9.86646 9.01321 9.93252 8.99952 10.0002 8.99952H11.0903C12.0295 8.99952 12.7377 8.1462 12.5646 7.22308L12.1111 4.80413Z"
       fill="currentcolor"

packages/component/src/ActivityFeedback/private/ThumbLike16Filled.tsx

@@ -3,7 +3,15 @@ import React, { memo } from 'react';
 type Props = Readonly<{ className?: string }>;
 
 const ThumbLike16Filled = memo(({ className }: Props) => (
-  <svg className={className} fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    className={className}
+    fill="none"
+    height="16"
+    role="presentation"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M9.5806 1.0516C8.83006 0.843 8.24411 1.40248 8.03494 1.92332C7.79411 2.52303 7.58243 2.94395 7.32941 3.44707C7.17287 3.75833 7.00052 4.10106 6.79565 4.53704C6.32141 5.54625 5.84755 6.19347 5.5035 6.58154C5.33128 6.77579 5.19093 6.90585 5.09835 6.98435C5.05204 7.02362 5.01761 7.05005 4.99704 7.0652L4.9809 7.07684L3.109 8.18119C2.27244 8.67473 1.91142 9.69797 2.25304 10.6072L2.77304 11.9912C2.98944 12.5671 3.45891 13.0114 4.04591 13.1958L9.40179 14.8781C10.7365 15.2974 12.1555 14.5397 12.5497 13.1973L13.9139 8.55127C14.29 7.2705 13.3298 5.9878 11.9949 5.9878H10.6099C10.6759 5.76117 10.7434 5.50906 10.8047 5.24751C10.9361 4.68641 11.0478 4.04484 11.0375 3.51008C11.028 3.01293 10.9778 2.49126 10.7735 2.04807C10.5544 1.57258 10.1709 1.21566 9.5806 1.0516ZM4.9768 7.07969L4.97492 7.08097L4.9768 7.07969Z"
       fill="currentcolor"

packages/component/src/ActivityFeedback/private/ThumbLike16Regular.tsx

@@ -3,7 +3,15 @@ import React, { memo } from 'react';
 type Props = Readonly<{ className?: string }>;
 
 const ThumbLike16Regular = memo(({ className }: Props) => (
-  <svg className={className} fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    className={className}
+    fill="none"
+    height="16"
+    role="presentation"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M8.03494 1.92332C8.24411 1.40248 8.83006 0.843 9.5806 1.0516C10.1709 1.21566 10.5544 1.57258 10.7735 2.04807C10.9778 2.49126 11.028 3.01293 11.0375 3.51008C11.0478 4.04484 10.9361 4.68641 10.8047 5.24751C10.7434 5.50906 10.6759 5.76117 10.6099 5.9878H11.9949C13.3298 5.9878 14.29 7.2705 13.9139 8.55127L12.5497 13.1973C12.1555 14.5397 10.7365 15.2974 9.40179 14.8781L4.04591 13.1958C3.45891 13.0114 2.98944 12.5671 2.77304 11.9912L2.25304 10.6072C1.91142 9.69797 2.27244 8.67473 3.109 8.18119L4.98089 7.07684C4.98462 7.07423 4.99002 7.07037 4.99704 7.0652C5.01761 7.05005 5.05204 7.02362 5.09835 6.98435C5.19093 6.90585 5.33128 6.77579 5.5035 6.58154C5.84755 6.19347 6.32141 5.54625 6.79565 4.53704C7.00052 4.10106 7.17287 3.75833 7.32941 3.44707C7.58243 2.94395 7.79411 2.52303 8.03494 1.92332ZM5.51946 7.91969C5.51378 7.92334 5.50805 7.9269 5.50224 7.93032L3.61713 9.04247C3.19885 9.28924 3.01834 9.80086 3.18915 10.2555L3.70914 11.6394C3.81735 11.9274 4.05208 12.1496 4.34558 12.2418L9.70146 13.9241C10.5023 14.1756 11.3537 13.721 11.5902 12.9156L12.9544 8.26953C13.1424 7.62915 12.6623 6.9878 11.9949 6.9878H9.92587C9.76349 6.9878 9.61122 6.90894 9.51751 6.77632C9.42381 6.64369 9.40035 6.47382 9.4546 6.32077C9.55458 6.03869 9.70672 5.54998 9.83103 5.01941C9.95711 4.48125 10.0456 3.93709 10.0377 3.52931C10.0287 3.061 9.97907 2.71335 9.86536 2.46667C9.76654 2.25227 9.61384 2.09874 9.31282 2.01508C9.26971 2.0031 9.21948 2.0066 9.15353 2.04989C9.08149 2.09718 9.00781 2.18417 8.96291 2.29598C8.70922 2.92772 8.46651 3.41157 8.19787 3.94711C8.04311 4.25564 7.87974 4.58133 7.7007 4.96233C7.18681 6.05594 6.66067 6.78372 6.25176 7.24494C6.04749 7.47534 5.87312 7.6385 5.74509 7.74707C5.68109 7.80133 5.62875 7.84188 5.59013 7.87034C5.57082 7.88456 5.55495 7.89575 5.54277 7.90411L5.5273 7.91456L5.52171 7.91823L5.51946 7.91969ZM4.97612 7.08018L4.97492 7.08097L4.97612 7.08018Z"
       fill="currentcolor"