Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: accessibility #1321

Merged
merged 6 commits into from
May 17, 2021

Conversation

mfranzke
Copy link
Contributor

@mfranzke mfranzke commented Apr 27, 2021

Summary of changes:

webhint reported some accessibility problems, that the changes out of these code changes should fix.

Some remaining reportings are mainly related to the dependency react-autosuggest and are even already reported over there: moroshko/react-autosuggest#778
Another topic is related to a tablist aria-role, which could get followed up with afterwards.

Actually some code optimizations out of husky/prettier flipped through, so #1314 would be a good predecessor for a clearer picture on the changes of this pull request.

…st be unique

IDs used in ARIA and labels must be unique: Document has multiple elements referenced with ARIA with the same id attribute, e.g. "global"
more information: https://dequeuniversity.com/rules/axe/4.1/duplicate-id-aria
<html> element must have a lang attribute: The <html> element does not have a lang attribute
more information: https://dequeuniversity.com/rules/axe/4.2/html-has-lang
…alid values

Invalid ARIA attribute value: e.g. aria-controls="atoms"

The IDs were currently missing on the related ol elements - their value (and that for variable) needs to be equal to the aria-controls-attribute on the related NavTitle tag

more information:
https://dequeuniversity.com/rules/axe/4.2/aria-valid-attr-value
…ern…

…ible text: Element has no title attribute

The title-attribute needs to get transferred to the actual button itself, as this is the focusable element that even also gets recognized that read out loud by the screenreader.

more information: https://dequeuniversity.com/rules/axe/4.1/button-name?application=axeAPI
@mfranzke mfranzke marked this pull request as ready for review May 1, 2021 04:48
@mfranzke mfranzke requested a review from sghoweri as a code owner May 1, 2021 04:48
@JosefBredereck JosefBredereck merged commit 4982187 into pattern-lab:dev May 17, 2021
@mfranzke mfranzke deleted the refactor-accessibility branch May 17, 2021 17:53
antonia-rose pushed a commit to quelltexterin/nemo-uikit-workshop that referenced this pull request Apr 12, 2023
* refactor(accessibility): axe/text-alternatives - Frames must have title attribute

more information: https://dequeuniversity.com/rules/axe/4.1/frame-title

* refactor(accessibility): axe/parsing - IDs used in ARIA and labels must be unique

IDs used in ARIA and labels must be unique: Document has multiple elements referenced with ARIA with the same id attribute, e.g. "global"
more information: https://dequeuniversity.com/rules/axe/4.1/duplicate-id-aria

* refactor(accessibility): axe/name-role-value - Buttons must have discernible text: Element has no title attribute

more information: https://dequeuniversity.com/rules/axe/4.1/button-name?application=axeAPI

* refactor(accessibility): axe/language - added lang attribute

<html> element must have a lang attribute: The <html> element does not have a lang attribute
more information: https://dequeuniversity.com/rules/axe/4.2/html-has-lang

* refactor(accessibility): axe/aria - ARIA attributes must conform to valid values

Invalid ARIA attribute value: e.g. aria-controls="atoms"

The IDs were currently missing on the related ol elements - their value (and that for variable) needs to be equal to the aria-controls-attribute on the related NavTitle tag

more information:
https://dequeuniversity.com/rules/axe/4.2/aria-valid-attr-value

* refactor(accessibility): axe/name-role-value - Buttons must have discern…

…ible text: Element has no title attribute

The title-attribute needs to get transferred to the actual button itself, as this is the focusable element that even also gets recognized that read out loud by the screenreader.

more information: https://dequeuniversity.com/rules/axe/4.1/button-name?application=axeAPI
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants