Skip to content
This repository has been archived by the owner on Jul 10, 2024. It is now read-only.

Improve component accessibility with aria attributes #106

Merged
merged 1 commit into from
Apr 18, 2020
Merged

Improve component accessibility with aria attributes #106

merged 1 commit into from
Apr 18, 2020

Conversation

LeonarddeR
Copy link
Contributor

@LeonarddeR LeonarddeR commented Apr 17, 2020

As a blind blazor user, I stumbled upon this component and am really impressed by its intuitiveness. Unfortunately it had some accessibility issues, which this pr aims to solve.

  • The grid role is now set on the table element, as these tables are really pretty interactive in their ability to sort/filter. Keyboard accessibility would be neat, but that's out of scope for now
  • Selected rows get the aria-selected attribute
  • Page navigation links that couldn't be navigated get the aria-disabled attribute
  • Detail view and filter view expand/collapse toggles get aria-expanded true or false, respectively
  • The fancy emoji shown for collapse/expand and filter toggles have been hidden from screen readers, as they aren't very descriptive. Instead, the filter toggle now tells the screen reader user whether a filter has been applied.
  • Set the scope attribute on the main table headers
  • Aria-sort is set for the sort column, either ascending or descending
  • The search role is added to the search bar

@sonarcloud
Copy link

sonarcloud bot commented Apr 17, 2020

Kudos, SonarCloud Quality Gate passed!

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities (and Security Hotspot 0 Security Hotspots to review)
Code Smell A 0 Code Smells

No Coverage information No Coverage information
No Duplication information No Duplication information

@IvanJosipovic IvanJosipovic merged commit 60c070c into IvanJosipovic:master Apr 18, 2020
@IvanJosipovic
Copy link
Owner

Thank you for this PR. I must admit that accessibility is not an area that I have much exposure in. I will try to keep it in mind for future additions.

IvanJosipovic added a commit that referenced this pull request Apr 18, 2020
Improve component accessibility with aria attributes (#106) @LeonarddeR
Fix for colspan with DetailTemplate (#105) @smokedlinq
Fix for Filtering nullable inner object throws NRE [WASM] (#104)
Updated Sample to Blazor 3.2.0 Preview 4
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants