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: move ARIA attributes logic to FieldAriaController #3048

Merged
merged 21 commits into from
Nov 17, 2021

Conversation

vursen
Copy link
Contributor

@vursen vursen commented Nov 15, 2021

Description

At the moment, FieldMixin overrides the aria-labelledby attribute's initial value with slotted elements' ids (error id, label id...). It turned out to be an obstacle to fixing #1145, where the form-item needs to link its label with a child field via the aria-labelledby field's attribute, but the attribute ends up overridden by FieldMixin.

  • Extract the ARIA attribute related logic from AriaLabelController and FieldMixin to FieldAriaController.
  • Rename AriaLabelController to LabelledInputController since it doesn't have ARIA attributes related logic anymore.
  • Prevent overriding the aria-labelledby attribute's initial value in FieldAriaController.
  • Improve unit tests of FieldMixin.
  • Add unit tests for FieldAriaController.
  • Add TS declarations for FieldAriaController.
  • Update TS declarations.

Part of #1145

Type of change

  • Internal change

Checklist

  • I have read the contribution guide: https://vaadin.com/docs-beta/latest/guide/contributing/overview/
  • I have added a description following the guideline.
  • The issue is created in the corresponding repository and I have referenced it.
  • I have added tests to ensure my change is effective and works as intended.
  • New and existing tests are passing locally with my change.
  • I have performed self-review and corrected misspellings.

@vursen vursen force-pushed the feat/field-aria-controller branch 4 times, most recently from 4e00181 to 1fc408a Compare November 15, 2021 13:59
Copy link
Member

@web-padawan web-padawan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

General approach looks good, added a couple of non-critical suggestions.

packages/field-base/src/label-for-controller.js Outdated Show resolved Hide resolved
packages/field-base/src/label-for-controller.js Outdated Show resolved Hide resolved
packages/field-base/src/field-mixin.js Outdated Show resolved Hide resolved
packages/field-base/src/field-mixin.js Show resolved Hide resolved
packages/field-base/src/field-aria-controller.js Outdated Show resolved Hide resolved
@@ -448,7 +448,7 @@ describe('vaadin-checkbox-group', () => {
let error, helper, label;

beforeEach(() => {
group = fixtureSync('<vaadin-checkbox-group helper-text="Choose one"></vaadin-checkbox-group>');
group = fixtureSync('<vaadin-checkbox-group helper-text="Choose one" label="Label"></vaadin-checkbox-group>');
Copy link
Contributor Author

@vursen vursen Nov 16, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previously, the field groups used to add the label id to the aria-labelledby attribute even when no label is provided.

The PR aligns it with non-group fields in a way that the label id is now only added to the attribute when a label is present.

@vursen vursen changed the title refactor: add field-aria-controller refactor: add FieldAriaController Nov 17, 2021
@vursen vursen marked this pull request as ready for review November 17, 2021 13:44
@vursen vursen changed the title refactor: add FieldAriaController refactor: move ARIA attributes logic to FieldAriaController Nov 17, 2021
@sonarcloud
Copy link

sonarcloud bot commented Nov 17, 2021

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

Copy link
Member

@web-padawan web-padawan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. I think we can cherry-pick both #3069 and this to 22.0 branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants