From 82fe9a1e1efd235ea5287cdb3e1d2d343245d789 Mon Sep 17 00:00:00 2001 From: younglim Date: Thu, 30 Nov 2023 03:07:12 +0000 Subject: [PATCH] Add landmark-unique.json scrollable-region-focusable.json aria-required-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 | 5 ++++- results/aria-allowed-role.json | 4 +++- results/aria-hidden-focus.json | 3 ++- results/aria-required-parent.json | 4 +++- results/aria-roles.json | 3 ++- results/landmark-unique.json | 6 +++++- results/scrollable-region-focusable.json | 3 ++- results/select-name.json | 3 ++- 8 files changed, 23 insertions(+), 8 deletions(-) diff --git a/results/aria-allowed-attr.json b/results/aria-allowed-attr.json index a5f0321..4baa8ef 100644 --- a/results/aria-allowed-attr.json +++ b/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
\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
    • \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: `

    `", + "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: `
    ` 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." } diff --git a/results/aria-allowed-role.json b/results/aria-allowed-role.json index 50936d1..c41be1a 100644 --- a/results/aria-allowed-role.json +++ b/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: `\n\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
    \n \n
    \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
    \n \n
    \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
    \n \n \n
    \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 \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 \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`
    `" } diff --git a/results/aria-required-parent.json b/results/aria-required-parent.json index e07fe02..d541b10 100644 --- a/results/aria-required-parent.json +++ b/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
    \n \n
    \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
    \n \n \n
    \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
      \n
    • \n
    \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 \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 \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