Add landmark-unique.json scrollable-region-focusable.json aria-requir…

…ed-parent.json aria-allowed-attr.json aria-allowed-role.json aria-hidden-focus.json select-name.json aria-roles.json

results/aria-allowed-attr.json

@@ -32,5 +32,8 @@
   "span_aria-required": "The issue with the code snippet is that the `aria-required` attribute is not allowed for a `span` element. The `aria-required` attribute is only allowed for form elements such as `input`, `select`, and `textarea`.\n\nThe correct version of the code snippet would be to use a form element that supports the `aria-required` attribute, or to use a different ARIA attribute that is appropriate for the `span` element's role. For example, if the `span` element is being used as a label for an input field, the `aria-labelledby` attribute could be used instead.",
   "td_role=\"button\"": "The issue with the code snippet is that `aria-selected` attribute is not allowed for the `button` role. The correct version of the code snippet is:\n\n<td aria-label=\"...\" role=\"button\" style=\"width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;\" tabindex=\"-1\"><div></div></td>\n\nNote that `aria-selected` attribute has been removed.",
   "li_role=\"presentation\"": "The issue with the code snippet is that the `aria-controls`, `aria-hidden`, and `aria-selected` attributes are not allowed for the `role=\"presentation\"` element. These attributes are only allowed for certain roles such as `tab`, `treeitem`, and `tabpanel`. \n\nThe correct version of the code snippet would be:\n\n<li role=\"none presentation\"><button role=\"button\" tabindex=\"0\" type=\"button\"></button></li>\n\nIn this version, the `aria-controls`, `aria-hidden`, and `aria-selected` attributes have been removed and the `role` attribute has been updated to `none presentation`, which allows the element to be treated as a presentation role but without the additional ARIA attributes.",
-  "div_aria-checked": "The issue with this code snippet is that the `aria-checked` attribute is not allowed for the `div` element's role. The `aria-checked` attribute is typically used for checkboxes and radio buttons. \n\nThe correct version of the code snippet would be to either change the `div` element's role to a checkbox or radio button, or to remove the `aria-checked` attribute altogether if it is not necessary for the element's functionality."
+  "div_aria-checked": "The issue with this code snippet is that the `aria-checked` attribute is not allowed for the `div` element's role. The `aria-checked` attribute is typically used for checkboxes and radio buttons. \n\nThe correct version of the code snippet would be to either change the `div` element's role to a checkbox or radio button, or to remove the `aria-checked` attribute altogether if it is not necessary for the element's functionality.",
+  "p_role=\"note\"": "The issue with the code snippet is that the `aria-multiselectable` attribute is not allowed for the `note` role. \n\nThe correct version of the code snippet should be: `<p role=\"note\"></p>`",
+  "div_role=\"header\"": "The issue with this code snippet is that the `aria-level` attribute is not allowed for the `header` role. The correct version of the code snippet should be: `<div role=\"heading\" aria-level=\"2\"></div>` where the `role` attribute is changed to `heading` which is the appropriate role for a header element, and the `aria-level` attribute is placed after the `role` attribute.",
+  "div_aria-disabled_aria-expanded": "The issue with the code snippet is that the `aria-disabled` attribute is not allowed for a `div` element. According to the WAI-ARIA specification, the `aria-disabled` attribute is only allowed for form elements, links, and widgets.\n\nThe correct version of the code snippet would be:\n\n<`div` `aria-hidden`=\"false\" `aria-expanded`=\"true\">\n\nThe `aria-hidden` attribute can be used to indicate that an element is not visible or perceivable to all users, which is more appropriate for a `div` element."
 }

results/aria-allowed-role.json

@@ -42,5 +42,7 @@
   "button_role=\"tooltip\"": "The issue with the code snippet is that the value of the `role` attribute is inappropriate. The `role` attribute is used to define the semantic meaning of an element for assistive technologies and should only be used with appropriate values. In this case, the value \"tooltip\" is not a valid value for the `role` attribute of a button element.\n\nThe correct version of the code snippet should be: `<button aria-describedby=\"tooltip\">`. Here, we are using the `aria-describedby` attribute to associate the button with a tooltip element on the page. This will ensure that assistive technologies can properly convey the purpose of the button to users.",
   "section_role=\"region\"": "The issue with the code snippet is that the value of the role attribute is not appropriate for the element. The \"region\" role should only be used for elements that define a large perceivable section of content, such as a main content area or a sidebar. For a section element, the appropriate role would be \"region\" only if it defines a significant portion of the page content.\n\nThe correct version of the code snippet would be:\n\n<section role=\"region\" aria-label=\"Insert appropriate label here\"> \n\nBy adding an aria-label attribute, the purpose of the section element is made clear to assistive technology users. This ensures that the content is accessible to all users.",
   "header_role=\"button\"": "The issue with the code snippet is that the `role` attribute has been set to \"button\", which is inappropriate for a `header` element. The correct version of the code snippet should have the `role` attribute set to \"banner\" or \"heading\", depending on the context. For example:\n\n<`header` `aria-controls`=\"content\" `aria-disabled`=\"false\" `aria-expanded`=\"false\" `role`=\"banner\" `tabindex`=\"0\">",
-  "footer_role=\"complementary\"": "The issue with the code snippet is that the value \"complementary\" is not appropriate for the role attribute of a footer element. According to the W3C Accessibility Guidelines, the role attribute of a footer element should be set to \"contentinfo\" to indicate that it contains information about the document such as authorship, copyright, or contact information.\n\nThe correct version of the code snippet should be:\n\n<footer role=\"contentinfo\">"
+  "footer_role=\"complementary\"": "The issue with the code snippet is that the value \"complementary\" is not appropriate for the role attribute of a footer element. According to the W3C Accessibility Guidelines, the role attribute of a footer element should be set to \"contentinfo\" to indicate that it contains information about the document such as authorship, copyright, or contact information.\n\nThe correct version of the code snippet should be:\n\n<footer role=\"contentinfo\">",
+  "label_role=\"option\"": "The issue with this code snippet is that the role attribute should not be set to \"option\" for a label element. The correct role attribute value for a label element is \"label\".\n\nThe corrected code snippet is: <`label` `aria-disabled`=\"false\" `for`=\"selected-1b3ugLwn5bE8g63bj6CLVW\" `role`=\"label\">",
+  "sup_role=\"doc-noteref\"": "The issue with the code snippet is that the value of the role attribute, \"doc-noteref\", is not a valid value for the sup element. According to the W3C specification, the role attribute can only be used on certain elements and with certain values.\n\nThe correct version of the code snippet would be:\n\n<sup aria-label=\"document reference\"><a href=\"...\"></a></sup>\n\nIn this version, we have replaced the role attribute with the aria-label attribute, which provides a text alternative for the element. This makes the element more accessible to users who rely on assistive technology. The value of the aria-label attribute, \"document reference\", describes the purpose of the element in a clear and concise manner."
 }

results/aria-hidden-focus.json

@@ -8,5 +8,6 @@
   "span_aria-expanded_aria-hidden": "The issue in the given code snippet is that the `aria-hidden` attribute is set to \"true\" for a focusable element or an element containing focusable elements. This can cause accessibility issues, as screen readers will not announce the focusable elements within the `aria-hidden` element.\n\nTo fix this issue, you can either remove the `aria-hidden` attribute if the element should be focusable or make the focusable elements within the `aria-hidden` element non-focusable using `tabindex=\"-1\"`.\n\nCorrected code snippet:\n\n```\n<!-- If the element should be focusable -->\n<span aria-expanded=\"false\">\n  <!-- focusable elements inside -->\n</span>\n\n<!-- If the element should not be focusable -->\n<span aria-expanded=\"false\" aria-hidden=\"true\">\n  <!-- non-focusable elements inside -->\n  <button tabindex=\"-1\">Button</button>\n</span>\n```\n\nIn the corrected code snippet, I've provided two options - one where the `aria-hidden` attribute is removed, making the element focusable, and another where the focusable elements within the `aria-hidden` element are made non-focusable using `tabindex=\"-1\"`. Choose the appropriate option based on the desired behavior.",
   "div_aria-expanded_aria-hidden": "The issue in the given code snippet is that the `aria-hidden` attribute is set to \"true\", which means the element should not be accessible by screen readers or keyboard navigation. However, if the element is focusable or contains focusable elements, it would still be accessible by keyboard navigation, causing confusion for users relying on assistive technologies.\n\nHere's the correct version of the code snippet:\n\n```html\n<div aria-expanded=\"false\" aria-hidden=\"true\" tabindex=\"-1\">\n  <!-- Add tabindex=\"-1\" to any focusable elements inside this div, if any -->\n</div>\n```\n\nBy adding `tabindex=\"-1\"` to the element and any focusable elements inside it, you ensure that the element and its focusable children are not accessible by keyboard navigation, making the `aria-hidden` attribute work as intended.",
   "div_aria-hidden_tabindex": "The issue in the given code snippet is that the element with `aria-hidden=\"true\"` is focusable or contains focusable elements due to the `tabindex=\"-1\"` attribute. This can cause confusion for screen reader users and affect the accessibility of the page.\n\nTo fix the issue, you should remove the `tabindex` attribute or ensure that the focusable elements inside the `aria-hidden` element are also hidden from screen readers.\n\nHere's the corrected version of the code snippet:\n\n```html\n<div aria-hidden=\"true\">\n  <!-- Ensure that any focusable elements inside this div are also hidden from screen readers -->\n</div>\n```\n\nIf you still need the element to be focusable but hidden from screen readers, you can use `aria-hidden=\"true\"` on the focusable elements inside the div:\n\n```html\n<div tabindex=\"-1\">\n  <button aria-hidden=\"true\">Hidden Button</button>\n  <!-- Other focusable elements with aria-hidden=\"true\" -->\n</div>\n```",
-  "span_aria-hidden": "The issue with the code snippet is that it contains an aria-hidden element that is focusable or contains focusable elements. This can cause confusion for screen reader users and make it difficult for them to navigate the page. \n\nThe correct version of the code snippet would be: \n\n<span aria-hidden=\"true\" tabindex=\"-1\"> \n\nBy adding tabindex=\"-1\", the element will be hidden from screen readers and keyboard navigation."
+  "span_aria-hidden": "The issue with the code snippet is that it contains an aria-hidden element that is focusable or contains focusable elements. This can cause confusion for screen reader users and make it difficult for them to navigate the page. \n\nThe correct version of the code snippet would be: \n\n<span aria-hidden=\"true\" tabindex=\"-1\"> \n\nBy adding tabindex=\"-1\", the element will be hidden from screen readers and keyboard navigation.",
+  "article_aria-hidden": "The issue with the given code snippet is that it contains the `aria-hidden` attribute with a value of \"true\", which means the element and its contents will be hidden from assistive technologies such as screen readers. However, the element itself is focusable or contains focusable elements, which can cause confusion and frustration for users who rely on assistive technologies.\n\nThe correct version of the code snippet would be to remove the `aria-hidden` attribute altogether, or set its value to \"false\" if the element needs to be hidden visually but still accessible to assistive technologies. For example:\n\n`<article>`"
 }

results/aria-required-parent.json

@@ -5,5 +5,7 @@
   "a_role=\"menuitemradio\"": "The issue in the given code snippet is that the \"menuitemradio\" role requires a parent element with the \"menu\" or \"menubar\" role. To fix the issue, you can wrap the \"a\" element inside an element with the \"menu\" role. Here is the corrected version of the code snippet:\n\n```\n<div role=\"menu\">\n  <a aria-checked=\"true\" href=\"...\" role=\"menuitemradio\"></a>\n</div>\n```",
   "ytd-mini-guide-entry-renderer_role=\"tab\"": "The issue in the code snippet is that the ARIA role \"tab\" is not contained within its required parent role \"tablist\". To fix this, you need to add a parent element with the role \"tablist\". Here's the correct version of the code snippet:\n\n```\n<div role=\"tablist\">\n  <ytd-mini-guide-entry-renderer aria-label=\"...\" aria-selected=\"true\" role=\"tab\" tabindex=\"0\">\n  </ytd-mini-guide-entry-renderer>\n</div>\n```\n\nIn this corrected version, the \"ytd-mini-guide-entry-renderer\" element with the role \"tab\" is now properly contained within a parent element with the role \"tablist\".",
   "li_role=\"menuitem\"": "The issue in the given code snippet is that the ARIA role \"menuitem\" should be contained within a parent element with the role \"menu\". \n\nHere's the correct version of the code snippet:\n\n```html\n<ul role=\"menu\">\n  <li role=\"menuitem\"></li>\n</ul>\n```\n\nIn this corrected version, we have added a parent element with the \"menu\" role, which properly contains the \"menuitem\" role.",
-  "sl-tree-item_role=\"treeitem\"": "The issue with this code snippet is that the `treeitem` role should be contained by a `group` or `tree` role. The correct version of the code snippet would be:\n\n<`div` `role`=\"group\">\n  <`sl-tree-item` `aria-disabled`=\"false\" `aria-selected`=\"false\" `role`=\"treeitem\" `tabindex`=\"-1\">\n</div> \n\nBy wrapping the `treeitem` role in a `group` role, it ensures that the ARIA tree structure is properly defined and accessible to assistive technologies."
+  "sl-tree-item_role=\"treeitem\"": "The issue with this code snippet is that the `treeitem` role should be contained by a `group` or `tree` role. The correct version of the code snippet would be:\n\n<`div` `role`=\"group\">\n  <`sl-tree-item` `aria-disabled`=\"false\" `aria-selected`=\"false\" `role`=\"treeitem\" `tabindex`=\"-1\">\n</div> \n\nBy wrapping the `treeitem` role in a `group` role, it ensures that the ARIA tree structure is properly defined and accessible to assistive technologies.",
+  "label_role=\"option\"": "The issue with the code snippet is that the `role` attribute \"option\" is not a valid ARIA role for a `label` element. The correct ARIA role for a `label` element is \"label\". Additionally, the `option` role should only be used for elements that are options within a listbox or combobox. \n\nThe corrected code snippet would be: \n\n<label aria-disabled=\"false\" for=\"selected-1b3ugLwn5bE8g63bj6CLVW\" role=\"label\">",
+  "a_role=\"menuitem\"": "The issue with the code snippet is that the `role` attribute \"menuitem\" is not contained within a parent role of \"menu\". The correct version of the code snippet would be: <`li` `role`=\"menuitem\"><`a` `aria-label`=\"...\" `href`=\"...\" `tabindex`=\"0\"><`span`></span></a></li> where the `li` element contains the parent role of \"menu\" and the `a` element contains the child role of \"menuitem\"."
 }

results/aria-roles.json

@@ -9,5 +9,6 @@
   "div_role=\"widget\"": "The issue with the code snippet is that the value \"widget\" is not a valid value for the role attribute. The correct value for the role attribute should be one of the following: \"button\", \"checkbox\", \"combobox\", \"grid\", \"listbox\", \"menu\", \"menubar\", \"progressbar\", \"radio\", \"scrollbar\", \"slider\", \"spinbutton\", \"tab\", \"textbox\", \"toolbar\", or \"tree\". \n\nThe corrected code snippet should look like this: <`div` `role`=\"button\">",
   "input_role=\"email\"": "The issue with the code snippet is that the value \"email\" is not a valid value for the role attribute. The correct value for an input element is \"textbox\". The corrected code snippet is: `<input name=\"...\" role=\"textbox\" type=\"email\">`",
   "div_role=\"section\"": "The issue with the code snippet is that the value of the `role` attribute is not valid. The correct value for the `role` attribute should be chosen from a list of predefined roles specified by the WAI-ARIA specification. \n\nThe correct version of the code snippet with a valid `role` attribute would be:\n\n<div role=\"region\">",
-  "h1_role=\"header\"": "The issue with the code snippet is that the value \"header\" is not a valid value for the role attribute. The correct value for the role attribute in this case should be \"heading\". The corrected code snippet is:\n\n<h1 role=\"heading\"></h1>"
+  "h1_role=\"header\"": "The issue with the code snippet is that the value \"header\" is not a valid value for the role attribute. The correct value for the role attribute in this case should be \"heading\". The corrected code snippet is:\n\n<h1 role=\"heading\"></h1>",
+  "div_role=\"header\"": "The `aria-level` attribute is not a valid attribute for the `div` element. \n\nThe correct version of the code snippet would be: `<div role=\"heading\" aria-level=\"2\"></div>`"
 }