feat: screen readers

Author: RaduCristianPopescu

js/ActionPopup/index.js

@@ -370,7 +370,7 @@ const ActionModal = () => {
 													feedzyData.isPro && ( feedzyData.isBusinessPlan || feedzyData.isAgencyPlan ) ? (
 														<li key="action-1" onClick={ () => addAction('fz_image') }>{__( 'Generate with OpenAI', 'feedzy-rss-feeds' )}</li>
 													) : (
-														<li className="pro-disabled-item">
+														<li key="action-1-disabled" className="pro-disabled-item" aria-disabled="true" role ="button">
 															{__('Generate with OpenAI', 'feedzy-rss-feeds')} 
 															<span className="pro-label">PRO</span>
 														</li>
@@ -381,7 +381,7 @@ const ActionModal = () => {
 														feedzyData.isPro && feedzyData.isAgencyPlan ? (
 															<li key="action-3" onClick={ () => addAction('fz_translate') }>{__( 'Translate with Feedzy', 'feedzy-rss-feeds' )}</li>
 														) : (
-															<li className="pro-disabled-item">
+															<li key="action-3-disabled" className="pro-disabled-item" aria-disabled="true" role ="button">
 																{__('Translate with Feedzy', 'feedzy-rss-feeds')}
 																<span className="pro-label">PRO</span>
 															</li>
@@ -393,7 +393,7 @@ const ActionModal = () => {
 															feedzyData.isPro ? (
 																<li key="action-5" onClick={ () => addAction('modify_links') }>{__( 'Modify Links', 'feedzy-rss-feeds' )}</li>
 															) : (
-																<li className="pro-disabled-item">
+																<li key="action-5-disabled" className="pro-disabled-item" aria-disabled="true" role ="button">
 																	{__('Modify Links', 'feedzy-rss-feeds')} 
 																	<span className="pro-label">PRO</span>
 																</li>
@@ -405,7 +405,7 @@ const ActionModal = () => {
 															feedzyData.isPro && ( feedzyData.isBusinessPlan || feedzyData.isAgencyPlan ) ? (
 																<li key="action-6" onClick={ () => addAction('fz_paraphrase') }>{__( 'Paraphrase with Feedzy', 'feedzy-rss-feeds' )}</li>
 															) : (
-																<li className="pro-disabled-item">
+																<li key="action-6-disabled" className="pro-disabled-item" aria-disabled="true" role ="button">
 																	{__('Paraphrase with Feedzy', 'feedzy-rss-feeds')}
 																	<span className="pro-label">PRO</span>
 																</li>
@@ -417,7 +417,7 @@ const ActionModal = () => {
 															feedzyData.isPro && feedzyData.isAgencyPlan ? (
 																<li key="action-7" onClick={ () => addAction('spinnerchief') }>{__( 'Spin using SpinnerChief', 'feedzy-rss-feeds' )}</li>
 															) : (
-																<li className="pro-disabled-item">
+																<li key="action-7-disabled" className="pro-disabled-item" aria-disabled="true" role ="button">
 																	{__('Spin using SpinnerChief', 'feedzy-rss-feeds')}
 																	<span className="pro-label">PRO</span>
 																</li>
@@ -429,7 +429,7 @@ const ActionModal = () => {
 															feedzyData.isPro && feedzyData.isAgencyPlan ? (
 																<li key="action-8" onClick={ () => addAction('wordAI') }>{__( 'Spin using WordAI', 'feedzy-rss-feeds' )}</li>
 															) : (
-																<li className="pro-disabled-item">
+																<li key="action-8-disabled" className="pro-disabled-item" aria-disabled="true" role ="button">
 																	{__('Spin using WordAI', 'feedzy-rss-feeds')}
 																	<span className="pro-label">PRO</span>
 																</li>
@@ -441,7 +441,7 @@ const ActionModal = () => {
 															feedzyData.isPro && ( feedzyData.isBusinessPlan || feedzyData.isAgencyPlan ) ? (
 																<li key="action-9" onClick={ () => addAction('chat_gpt_rewrite') }>{__( 'Rewrite with AI', 'feedzy-rss-feeds' )}</li>
 															) : (
-																<li className="pro-disabled-item">
+																<li key="action-9-disabled" className="pro-disabled-item" aria-disabled="true" role ="button">
 																	{__('Rewrite with AI', 'feedzy-rss-feeds')}
 																	<span className="pro-label">PRO</span>
 																</li>