feat(rome_js_analyze): `useHeadingContent` #4218

nissy-dev · 2023-02-17T15:11:55Z

Summary

Fix #3943

Test Plan

I added snapshot tests

Documentation

The PR requires documentation
I will create a new PR to update the documentation

netlify · 2023-02-17T15:11:59Z

✅ Deploy Preview for docs-rometools canceled.

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`e183c15`
🔍 Latest deploy log	https://app.netlify.com/sites/docs-rometools/deploys/63f761e5e353900007ae2b96

crates/rome_js_analyze/src/analyzers/nursery/use_heading_content.rs

denbezrukov · 2023-02-18T18:06:21Z

I was wondering about these test cases:
https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/__tests__/src/rules/heading-has-content-test.js

valid:
<h1 children={children} />

invalid:
<h1>{undefined}</h1>

<h1>
    <></>
</h1>

<h1>
    <Fragment/>
</h1>

<h1>
    <React.Fragment/>
</h1>

We have jsx_member_name_is_react_fragment and jsx_reference_identifier_is_fragment helpers.
What do you think?

nissy-dev · 2023-02-19T02:32:59Z

@denbezrukov

I was wondering about these test cases:
https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/__tests__/src/rules/heading-has-content-test.js

Thank you for your review! I try to modify codes to catch more invalid cases which you or eslint-plugin-jsx-a11y mentions 👍

ematipico

I think it's worth adding some other test cases.

ematipico · 2023-02-20T09:05:08Z

crates/rome_js_analyze/src/analyzers/nursery/use_heading_content.rs

+                        })
+                        .count()
+                        == 0
+                        && !node.has_dangerously_set_inner_html_attribute()?


We can move the check has_dangerously_set_inner_html_attribute up, next to if node.is_heading_element()?

ematipico · 2023-02-20T09:08:46Z

crates/rome_js_analyze/src/analyzers/nursery/use_heading_content.rs

+                        .filter(|child_node| {
+                            is_accessible_to_screen_reader(child_node) == Some(true)
+                        })
+                        .count()
+                        == 0


I think it's more readable to use the function any instead of filter().count().

ematipico · 2023-02-20T09:10:01Z

crates/rome_js_analyze/src/analyzers/nursery/use_heading_content.rs

+                        == 0
+                        && !node.has_dangerously_set_inner_html_attribute()?
+                    {
+                        return Some(element.syntax().text_range());


There's no need to return anything here. We already have element, which is the Query. The rule can just return Some(())

ematipico · 2023-02-20T09:11:11Z

crates/rome_js_analyze/src/analyzers/nursery/use_heading_content.rs

+        None
+    }
+
+    fn diagnostic(_: &RuleContext<Self>, reference: &Self::State) -> Option<RuleDiagnostic> {


As per the previous comment, you can use the context to retrieve the range:

let node = ctx.query(); let range = node.syntax().text_trimmed_range();

You have to use text_trimmed_range

ematipico · 2023-02-20T09:15:37Z

crates/rome_js_analyze/src/aria_utils.rs

@@ -0,0 +1,116 @@
+use rome_js_syntax::{


Nit: we already have a utils.rs file with a utils/ folder. Having another utils* file seems a bit redundant. My suggestions:

having just a aria.rs file

adding these two functions inside the utils.rs file

ematipico · 2023-02-20T09:15:54Z

crates/rome_js_analyze/src/aria_utils.rs

+}
+
+/// Check if the `aria-hidden` attribute is present or the value is true.
+pub(crate) fn is_aria_hidden_truthy(aria_hidden_attribute: &JsxAttribute) -> Option<bool> {


I believe this function doesn't need to be pub(crate)

ematipico · 2023-02-20T09:18:20Z

crates/rome_js_analyze/tests/specs/nursery/useHeadingContent/invalid.jsx

+	<h1>
+		<div aria-hidden />
+	</h1>
+	<h1></h1>


Some invalid case we can add:

<> <h1 aria-hidden="true">content</h1> <h1 aria-hidden="true" dangerouslySetInnerHTML={{ __html: "heading" }} /> </>

nissy-dev · 2023-02-21T15:17:52Z

Thank you for your reviews! I refactor codes and pass more tests.
I appreciate you will review it when you have time.

denbezrukov · 2023-02-23T15:05:23Z

@nissy-dev Thank you!
I was wondering if our new test cases can be also important for UseAnchorContentNode rule.
I mean that our new logic (for children/undefined/null/empty string) can be a part of is_accessible_to_screen_reader function.

What do you think?
We can do it in another MR, if you want =)

nissy-dev · 2023-02-23T15:37:20Z

@denbezrukov
I want to do it in another PR! And then, I think this is related to #4073. We should prepare for utils functions that checks value of the attributes before writing more a11y rules.

nissy-dev · 2023-04-15T06:54:45Z

I merged #4342, so I will try to reimplement in a few days.

ematipico · 2023-04-27T21:01:51Z

@nissy-dev I think we can rebase the PR, fix the conflicts and we can merge it!

nissy-dev · 2023-04-30T05:39:38Z

I recreate PR in #4423

nissy-dev added 3 commits February 17, 2023 23:59

feat: feat(rome_js_analyze): useHeadingContent

b493a10

feat: imple logic

913cf45

feat: codegen

0844c40

denbezrukov reviewed Feb 18, 2023

View reviewed changes

crates/rome_js_analyze/src/analyzers/nursery/use_heading_content.rs Show resolved Hide resolved

denbezrukov reviewed Feb 18, 2023

View reviewed changes

crates/rome_js_analyze/src/analyzers/nursery/use_heading_content.rs Outdated Show resolved Hide resolved

fix: update codes by review

01f3de9

ematipico reviewed Feb 20, 2023

View reviewed changes

nissy-dev added 2 commits February 22, 2023 00:12

feat: refactor and pass more test cases

0ae65ad

fix: remove unnecessary diff

7feb136

nissy-dev added 2 commits February 23, 2023 21:50

fix: update tests for custom components

10d46c5

fix: lint error

e183c15

nissy-dev closed this Apr 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(rome_js_analyze): `useHeadingContent` #4218

feat(rome_js_analyze): `useHeadingContent` #4218

nissy-dev commented Feb 17, 2023

netlify bot commented Feb 17, 2023 •

edited

Loading

denbezrukov commented Feb 18, 2023 •

edited

Loading

nissy-dev commented Feb 19, 2023

ematipico left a comment

ematipico Feb 20, 2023

ematipico Feb 20, 2023

ematipico Feb 20, 2023

ematipico Feb 20, 2023

ematipico Feb 20, 2023 •

edited

Loading

ematipico Feb 20, 2023

ematipico Feb 20, 2023

nissy-dev commented Feb 21, 2023

denbezrukov commented Feb 23, 2023

nissy-dev commented Feb 23, 2023 •

edited

Loading

nissy-dev commented Apr 15, 2023

ematipico commented Apr 27, 2023

nissy-dev commented Apr 30, 2023

feat(rome_js_analyze): useHeadingContent #4218

feat(rome_js_analyze): useHeadingContent #4218

Conversation

nissy-dev commented Feb 17, 2023

Summary

Test Plan

Documentation

netlify bot commented Feb 17, 2023 • edited Loading

✅ Deploy Preview for docs-rometools canceled.

denbezrukov commented Feb 18, 2023 • edited Loading

nissy-dev commented Feb 19, 2023

ematipico left a comment

Choose a reason for hiding this comment

ematipico Feb 20, 2023

Choose a reason for hiding this comment

ematipico Feb 20, 2023

Choose a reason for hiding this comment

ematipico Feb 20, 2023

Choose a reason for hiding this comment

ematipico Feb 20, 2023

Choose a reason for hiding this comment

ematipico Feb 20, 2023 • edited Loading

Choose a reason for hiding this comment

ematipico Feb 20, 2023

Choose a reason for hiding this comment

ematipico Feb 20, 2023

Choose a reason for hiding this comment

nissy-dev commented Feb 21, 2023

denbezrukov commented Feb 23, 2023

nissy-dev commented Feb 23, 2023 • edited Loading

nissy-dev commented Apr 15, 2023

ematipico commented Apr 27, 2023

nissy-dev commented Apr 30, 2023

feat(rome_js_analyze): `useHeadingContent` #4218

feat(rome_js_analyze): `useHeadingContent` #4218

netlify bot commented Feb 17, 2023 •

edited

Loading

denbezrukov commented Feb 18, 2023 •

edited

Loading

ematipico Feb 20, 2023 •

edited

Loading

nissy-dev commented Feb 23, 2023 •

edited

Loading