The accessibility issue with aria-disabled attribute
I am currently facing issue with the attribute aria-disabled only in firefox browser. Using nvda reader when I move on to buttons using tab key the reader reads the aria-label of button but it also says button unavailable even when the button has aria-disabled="false".The same behaviour with the narrator it reads it as button disabled. The tag that covers these have aria-disabled="true". But I think that should not have effect on these button elements as I have explicitly gave on the button the aria-disabled="false".
Kindly please look into this issue and resolve.
Code Sample:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>List with Accessible Buttons</title> </head> <body> <li aria-disabled="true" > Item 1 <button aria-disabled="false" aria-label="Button 1" onclick="alert('Button 1 clicked')">Button 1</button> <button aria-disabled="false" aria-label="Button 2" onclick="alert('Button 2 clicked')">Button 2</button> </li> <li aria-disabled="true"> Item 2 <button aria-disabled="false" aria-label="Button 3" onclick="alert('Button 3 clicked')">Button 3</button> <button aria-disabled="false" aria-label="Button 4" onclick="alert('Button 4 clicked')">Button 4</button> </li> <li aria-disabled="true"> Item 3 <button aria-disabled="false" aria-label="Button 5" onclick="alert('Button 5 clicked')">Button 5</button> <button aria-disabled="false" aria-label="Button 6" onclick="alert('Button 6 clicked')">Button 6</button> </li> </body> </html>
I am currently facing issue with the attribute aria-disabled only in firefox browser. Using nvda reader when I move on to buttons using tab key the reader reads the aria-label of button but it also says button unavailable even when the button has aria-disabled="false".The same behaviour with the narrator it reads it as button disabled. The <li> tag that covers these have aria-disabled="true". But I think that should not have effect on these button elements as I have explicitly gave on the button the aria-disabled="false".
Kindly please look into this issue and resolve.
Code Sample:
<pre><nowiki><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List with Accessible Buttons</title>
</head>
<body>
<li aria-disabled="true" >
Item 1
<button aria-disabled="false" aria-label="Button 1" onclick="alert('Button 1 clicked')">Button 1</button>
<button aria-disabled="false" aria-label="Button 2" onclick="alert('Button 2 clicked')">Button 2</button>
</li>
<li aria-disabled="true">
Item 2
<button aria-disabled="false" aria-label="Button 3" onclick="alert('Button 3 clicked')">Button 3</button>
<button aria-disabled="false" aria-label="Button 4" onclick="alert('Button 4 clicked')">Button 4</button>
</li>
<li aria-disabled="true">
Item 3
<button aria-disabled="false" aria-label="Button 5" onclick="alert('Button 5 clicked')">Button 5</button>
<button aria-disabled="false" aria-label="Button 6" onclick="alert('Button 6 clicked')">Button 6</button>
</li>
</body>
</html></nowiki></pre><br>
Modified