Grid Accessibility Issues

[ericmahlberg]

Description

The following accessibility bugs are present in the Grid's child controls. I have been unable to override or find a workaround to them.

• igniteui-angular version: 8.2.11
• browser: Chrome

1. igx-grid-toolbar

Title: WCAG 1.3.1: Certain ARIA roles must contain particular children (igx-grid-toolbar)
Tags: Accessibility, WCAG 1.3.1, aria-required-children
Issue: Certain ARIA roles must contain particular children (aria-required-children - https://dequeuniversity.com/rules/axe/3.3/aria-required-children?application=msftAI)

Element path: igx-grid-toolbar
Snippet:

How to fix:
Fix any of the following:
Required ARIA child role not present: row

2. igx-grid__tfoot
   Title: WCAG 1.3.1: Certain ARIA roles must contain particular children (.igx-grid__tfoot)
   Tags: Accessibility, WCAG 1.3.1, aria-required-children
   Issue: Certain ARIA roles must contain particular children (aria-required-children - https://dequeuniversity.com/rules/axe/3.3/aria-required-children?application=msftAI)

Element path: .igx-grid__tfoot
Snippet:

How to fix:
Fix any of the following:
Required ARIA child role not present: row

3. classic grid filter
   Title: WCAG 1.3.1,WCAG 3.3.2: Form elements must have labels (input[autocomplete="off"])
   Tags: Accessibility, WCAG 1.3.1, WCAG 3.3.2, label
   Issue: Form elements must have labels (label - https://dequeuniversity.com/rules/axe/3.3/label?application=msftAI)

Element path: input[autocomplete="off"]
Snippet:

How to fix:
Fix any of the following:
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Form element does not have an implicit (wrapped)
Form element does not have an explicit
Element has no title attribute or the title attribute is empty

4. igx-date-picker__input-date
   Title: WCAG 1.3.1,WCAG 3.3.2: Form elements must have labels (.igx-date-picker__input-date)
   Tags: Accessibility, WCAG 1.3.1, WCAG 3.3.2, label
   Issue: Form elements must have labels (label - https://dequeuniversity.com/rules/axe/3.3/label?application=msftAI)

Element path: .igx-date-picker__input-date
Snippet:

How to fix:
Fix any of the following:
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Form element does not have an implicit (wrapped)
Form element does not have an explicit
Element has no title attribute or the title attribute is empty

5. igx-calendar-n
   Title: WCAG 1.3.1: Certain ARIA roles must contain particular children (#igx-calendar-0)
   Tags: Accessibility, WCAG 1.3.1, aria-required-children
   Issue: Certain ARIA roles must contain particular children (aria-required-children - https://dequeuniversity.com/rules/axe/3.3/aria-required-children?application=msftAI)

Element path: #igx-calendar-n
Snippet:

How to fix:
Fix any of the following:
Required ARIA children role not present: rowgroup row

Title: WCAG 4.1.1,WCAG 4.1.2: ARIA attributes must conform to valid values (#igx-calendar-0)
Tags: Accessibility, WCAG 4.1.1, WCAG 4.1.2, aria-valid-attr-value
Issue: ARIA attributes must conform to valid values (aria-valid-attr-value - https://dequeuniversity.com/rules/axe/3.3/aria-valid-attr-value?application=msftAI)

Element path: #igx-calendar-n
Snippet:

How to fix:
Fix all of the following:
Invalid ARIA attribute value: aria-labelledby="calendar"

Title: WCAG 1.4.3: Elements must have sufficient color contrast (.igx-calendar__label:nth-child(1))
Tags: Accessibility, WCAG 1.4.3, color-contrast
Issue: Elements must have sufficient color contrast (color-contrast - https://dequeuniversity.com/rules/axe/3.3/color-contrast?application=msftAI)

Element path: .igx-calendar__label:nth-child(1)
Snippet: Sun

How to fix:
Fix any of the following:
Element has insufficient color contrast of 1.88 (foreground color: #bdbdbd, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1

6. #igx-checkbox-n-label
   Title: WCAG 1.3.1,WCAG 4.1.1,WCAG 4.1.2: ARIA roles used must conform to valid values (#igx-checkbox-9-label)
   Tags: Accessibility, WCAG 1.3.1, WCAG 4.1.1, WCAG 4.1.2, aria-roles

Issue: ARIA roles used must conform to valid values (aria-roles - https://dequeuniversity.com/rules/axe/3.3/aria-roles?application=msftAI)

Element path: #igx-checkbox-9-label
Snippet:

How to fix:
Fix all of the following:
Role must be one of the valid ARIA roles

7. igx-checkbox-n-label
   Title: WCAG 1.3.1,WCAG 4.1.1,WCAG 4.1.2: ARIA roles used must conform to valid values (#igx-checkbox-18-label)
   Tags: Accessibility, WCAG 1.3.1, WCAG 4.1.1, WCAG 4.1.2, aria-roles

Issue: ARIA roles used must conform to valid values (aria-roles - https://dequeuniversity.com/rules/axe/3.3/aria-roles?application=msftAI)

Element path: #igx-checkbox-18-label
Snippet: Core Columns Only

How to fix:
Fix all of the following:
Role must be one of the valid ARIA roles

[github-actions]

There has been no recent activity and this issue has been marked inactive.

[github-actions]

There has been no recent activity and this issue has been marked inactive.

[github-actions]

There has been no recent activity and this issue has been marked inactive.

[zdrawku]

With the keyboard navigation enhancements part of the 9.1.0 release, we've added a bunch of ARIA improvements that are addressing most of the mentioned errors. For others, like color contrast issues (related issue) you should consider configuring a custom theme as we follow a guidance for the default contrast and colors and for everything else you can define your own custom theme.

@import '~igniteui-angular/lib/core/styles/themes/index';

@include igx-core();

$my-grid-theme: igx-grid-theme(
    $header-text-color: #000000
);

:host {
  ::ng-deep {
    @include igx-grid($my-grid-theme);
  }
}

Result: