Merge branch 'develop' into giacomo-petri-patch-5c01ea-inapplicable-1

Author: carlosapaduarte

.github/ISSUE_TEMPLATE/ACCESSIBILITY_SUPPORT.md

@@ -0,0 +1,84 @@
+---
+name: Accessibility support template
+about: Issue for tracking accessibility support on ACT Rules
+title: ''
+labels: ['accessibility support']
+assignees: ''
+---
+
+## Accessibility support
+
+(( Put the accessibility support item here ))
+
+## ACT Rules
+
+- ... List the rules here, link to its acc support section
+
+## Test cases
+
+### Test case 1 ...
+
+(( Add test case here ))
+
+```html
+code snippet here
+```
+
+[Open this test case]()
+
+(( Add a link to a code pen or other hosted test case. Keep in mind this test case needs to be accessible and persistent. ))
+
+#### Preconditions
+
+Before running the test, check your settings. In many cases default settings aren't strictly required and will not impact the results. Use common sense here. If non-default settings are necessary for you, record the settings used in the reported results.
+
+- Ensure browsers are in the default settings, turn off unnecessary extensions
+- Ensure ATs are in the default settings
+- Ensure operating system are in default settings
+- Ensure software uses the correct version (usually the latest version)
+
+#### Test instructions
+
+(( Provide instructions on how to test the test case, this should include: ))
+
+- Which technologies to use
+- Any setting changes necessary to run the test
+- Any variation in how to operate the different assistive technologies
+- Step by step instructions on how to check the test case
+- What the expected results are
+
+### External links
+
+(( List any external links to bugs in browsers & AT, WPT, or spec issues. Be sure to open issues in the appropriate repositories. ))
+
+<!--
+Links to external resources to look for / raise issues
+- Web platform tests: https://github.com/web-platform-tests/wpt
+- JAWS issues: https://github.com/FreedomScientific/VFO-standards-support/issues
+- NVDA issues: https://github.com/nvaccess/nvda/issues
+- Firefox issues: https://bugzilla.mozilla.org/
+- Chromium issues: https://issues.chromium.org/issues?q=componentid:1363614+
+- Safari issues: https://github.com/WebKit/webkit/issues
+- ARIA: https://github.com/w3c/aria/issues
+- HTML: https://github.com/whatwg/html/issues
+- CSS: https://github.com/w3c/csswg-drafts/issues
+- AccName: https://github.com/w3c/accname/issues
+- HTML AAM: https://github.com/w3c/html-aam/issues
+- ARIA in HTML: https://github.com/w3c/html-aria/issues
+- PowerMapper tests: https://www.powermapper.com/tests/
+- Accessibility support: https://www.a11ysupport.io/
+-->
+
+## Test results
+
+Please report test results in a comment below. Please use the following format:
+
+```md
+## Test case X
+
+- Date: ...
+- Operating system: ..., version ...
+- Browser: ..., version ...
+- Assistive technology: ..., version ...
+- Test result: Passed / Failed (if failed, how was it different from expected?)
+```

.github/ISSUE_TEMPLATE.md renamed to .github/ISSUE_TEMPLATE/rules-issue-template.md

@@ -1,3 +1,12 @@
+---
+name: Rules issue template
+about: issues related with ACT Rules
+title: ''
+labels: ''
+assignees: ''
+
+---
+
 Please describe the issue with references and relevant examples where necessary.
 
 --- or ---

.github/scripts/pr-preview.mjs

@@ -0,0 +1,28 @@
+#!/usr/bin/env zx
+import 'zx/globals';
+import { config, cloneWcagActRules, commitAndPush } from './commons.mjs'
+
+await cloneWcagActRules(config);
+await generateProposedRulePages(config);
+await generateTestCases(config);
+// const commitMessage = (await $`git log -1 --pretty=%B`).stdout;
+// await commitAndPush(config, commitMessage);
+
+async function generateProposedRulePages({ tmpDir, rulesDir, glossaryDir, testAssetsDir }) {
+  await $`node ./node_modules/act-tools/dist/cli/rule-transform.js \
+  --rulesDir "${rulesDir}" \
+  --glossaryDir "${glossaryDir}" \
+  --testAssetsDir "${testAssetsDir}" \
+  --outDir "${tmpDir}" \
+  --proposed
+  `;
+}
+
+async function generateTestCases({ tmpDir, rulesDir, testAssetsDir }) {
+  await $`node ./node_modules/act-tools/dist/cli/build-examples.js \
+    --rulesDir "${rulesDir}" \
+    --testAssetsDir "${testAssetsDir}" \
+    --outDir "${tmpDir}" \
+    --proposed
+  `;
+}

.gitignore

@@ -72,3 +72,6 @@ yarn.lock
 
 # Tmp build directory
 wcag-act-rules-tmp/
+
+# Local Netlify folder
+.netlify

__tests__/spelling-ignore.yml

@@ -239,6 +239,7 @@
 - unitless
 - luminance
 - disambiguated
+- superclass
 - grey
 
 # Parts of Unicode
@@ -294,3 +295,6 @@
 - A-lum-min
 - B-lum-max
 - B-lum-min
+
+#Browsers Internal Roles
+- SvgRoot

_rules/aria-state-or-property-permitted-5c01ea.md

@@ -110,7 +110,7 @@ The `aria-busy` [state][] is a [global][] [state][] that is [supported][] by all
 
 #### Passed Example 4
 
-The `aria-label` [property][] is a [global][] [property][]. It is allowed on any [semantic role][].
+The `aria-label` [property][] is a [global][] [property][]. It is allowed on any [semantic role][], except where specifically prohibited.
 
 ```html
 <div role="button" aria-label="OK">✓</div>
@@ -150,7 +150,7 @@ The `aria-controls` [property][] is [required][] for the [semantic][semantic rol
 
 #### Passed Example 9
 
-The `aria-label` [property][] is [global][]. It is allowed on any [semantic role][], including roles from the [WAI-ARIA Graphics Module](https://www.w3.org/TR/graphics-aria-1.0). This rule is applicable to SVG elements.
+The `aria-label` [property][] is [global][]. It is allowed on any [semantic role][], except where specifically prohibited, including roles from the [WAI-ARIA Graphics Module](https://www.w3.org/TR/graphics-aria-1.0). This rule is applicable to SVG elements.
 
 ```html
 <svg xmlns="http://www.w3.org/2000/svg" role="graphics-object" width="100" height="100" aria-label="yellow circle">
@@ -174,6 +174,29 @@ This `input` element does not have an [explicit role][] of `textbox`, but the `a
 <label>Password<input type="password" aria-required="true"/></label>
 ```
 
+#### Passed Example 12
+
+This `div` element has an [explicit role][] of `switch`; the `aria-required` [property][] is [inherited][] from the `checkbox` [superclass role](https://www.w3.org/TR/wai-aria-1.2/#superclassrole).
+
+```html
+<div role="switch" aria-checked="false" tabindex="0" aria-required="true">
+	<span class="label">Notifications</span>
+	<span class="switch" style="position: relative; display: inline-block; top: 6px; border: 2px solid black; border-radius: 12px; height: 20px; width: 40px;">
+		<span style="position: absolute; top: 2px; left: 2px; display: inline-block; border: 2px solid black; border-radius: 8px; height: 12px; width: 12px; background: black;"></span>
+	</span>
+	<span class="on" aria-hidden="true" style="display: none;">On</span>
+	<span class="off" aria-hidden="true">Off</span>
+</div>
+```
+
+#### Passed Example 13
+
+This `div` element has an [explicit role][] of `separator`. The `aria-valuemin`, `aria-valuemax` and `aria-valuenow` [properties][property] are [supported][] for the `separator` role when the element is [focusable][].
+
+```html
+<div role="separator" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" tabindex="0">My separator</div>
+```
+
 ### Failed
 
 #### Failed Example 1
@@ -200,6 +223,14 @@ The `aria-label` property is [prohibited][] for an element with a `generic` role
 <div aria-label="Bananas"></div>
 ```
 
+#### Failed Example 4
+
+The `aria-label` property is [prohibited][] for an element with a `paragraph` role.
+
+```html
+<div role="paragraph" aria-label="Bananas"></div>
+```
+
 ### Inapplicable
 
 #### Inapplicable Example 1

_rules/element-marked-decorative-is-not-exposed-46ca7f.md

@@ -6,6 +6,8 @@ rule_type: atomic
 description: |
   This rule checks that elements marked as decorative either are not included in the accessibility tree, or have a presentational role.
 accessibility_requirements:
+  wcag20:1.1.1: # Non-text content (A)
+    secondary: This success criterion is **less strict** than this rule. Only when this rule is applied to decorative content does a failure of 1.1.1 occur.
 input_aspects:
   - Accessibility tree
   - CSS styling
@@ -35,7 +37,7 @@ Elements are normally [marked as decorative][] to convey the intention of the au
 
 Whenever such a conflict occurs, this indicates at the very least mismatching intentions. Such a conflict should be avoided.
 
-When these conflicts arise on [decorative][] [non-text content][], this is also a failure of [Success Criterion 1.1.1: Non-text Content][sc111] because [decorative][] [non-text content][] must be implemented in a way that allows assistive technologies to ignore it. When these conflicts arise on text content, or on content which is not [decorative][], this is not a failure of WCAG. Therefore this rule is not mapping to any specific WCAG Success Criterion, and is not an accessibility requirement for WCAG.
+When these conflicts arise on [decorative][] [non-text content][], this is also a failure of [Success Criterion 1.1.1: Non-text Content][sc111] because [decorative][] [non-text content][] must be implemented in a way that allows assistive technologies to ignore it. When these conflicts arise on text content, or on content which is not [decorative][], this is not a failure of WCAG. Therefore this rule maps to Non-text Content as a secondary requirement.
 
 ### Assumptions
 

_rules/image-non-empty-accessible-name-23a2a8.md

@@ -58,6 +58,7 @@ There are no assumptions.
 - There are several popular browsers that do not treat images with an empty `alt` attribute (`alt=""`) as having a role of `presentation` but instead add the `img` element to the accessibility tree with a [semantic role][] of either `img` or `graphic`.
 - Implementation of [Presentational Roles Conflict Resolution][] varies from one browser or assistive technology to another. Depending on this, some [semantic][semantic role] `img` elements can fail this rule with some technology but users of other technologies would not experience any accessibility issue.
 - Images can have their role set to `presentation` through an empty `alt` attribute. [Presentational Roles Conflict Resolution][] does not specify what to do if such an image is [focusable][] (it only specifies what to do in case of explicit `role="none"` or `role="presentation"`). Some browsers expose these images and some don't. Thus, this rule may fail for technologies that expose these without creating an accessibility issue for users of other technologies.
+- `svg` elements have an [implicit role][] of `graphics-document` in [svg-aam](https://www.w3.org/TR/svg-aam-1.0/#details-id-66). There are popular browsers that do not follow [svg-aam](https://www.w3.org/TR/svg-aam-1.0/#details-id-66) and instead expose SVG elements with a different [semantic role][], such as `image`, `generic` or `SvgRoot`.
 
 ### Bibliography
 
@@ -196,16 +197,6 @@ This `img` element has an [explicit role][] of `none`. However, it is [focusable
 
 #### Inapplicable Example 1
 
-This `svg` element has an [implicit role][] of `graphics-document`.
-
-```html
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
-	<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
-</svg>
-```
-
-#### Inapplicable Example 2
-
 This [semantic][semantic role] `img` element is hidden with `aria-hidden` set to "true".
 
 ```html
@@ -216,15 +207,15 @@ This [semantic][semantic role] `img` element is hidden with `aria-hidden` set to
 ></div>
 ```
 
-#### Inapplicable Example 3
+#### Inapplicable Example 2
 
 This `img` element is hidden with `aria-hidden` set to "true".
 
 ```html
 <img src="/test-assets/shared/w3c-logo.png" aria-hidden="true" />
 ```
 
-#### Inapplicable Example 4
+#### Inapplicable Example 3
 
 This `img` element is hidden because its parent has `display: none`.
 
@@ -234,7 +225,7 @@ This `img` element is hidden because its parent has `display: none`.
 </div>
 ```
 
-#### Inapplicable Example 5
+#### Inapplicable Example 4
 
 This `img` element is hidden with `visibility: hidden`.
 

_rules/meta-refresh-no-delay-bc659a.md

@@ -198,7 +198,7 @@ This page will not refresh because it lacks a `http-equiv` attribute.
 
 #### Inapplicable Example 3
 
-This 'meta' element contains an invalid `content` attribute and will not refresh the page.
+This `meta` element contains an invalid `content` attribute and will not refresh the page.
 
 ```html
 <head>
@@ -211,7 +211,7 @@ This 'meta' element contains an invalid `content` attribute and will not refresh
 
 #### Inapplicable Example 4
 
-This 'meta' element contains an invalid `content` attribute and will not refresh the page.
+This `meta` element contains an invalid `content` attribute and will not refresh the page.
 
 ```html
 <head>
@@ -224,7 +224,7 @@ This 'meta' element contains an invalid `content` attribute and will not refresh
 
 #### Inapplicable Example 5
 
-This 'meta' element contains an invalid `content` attribute and will not refresh the page.
+This `meta` element contains an invalid `content` attribute and will not refresh the page.
 
 ```html
 <head>
@@ -237,7 +237,7 @@ This 'meta' element contains an invalid `content` attribute and will not refresh
 
 #### Inapplicable Example 6
 
-This 'meta' element contains an invalid `content` attribute and will not refresh the page.
+This `meta` element contains an invalid `content` attribute and will not refresh the page.
 
 ```html
 <head>
@@ -250,7 +250,7 @@ This 'meta' element contains an invalid `content` attribute and will not refresh
 
 #### Inapplicable Example 7
 
-This 'meta' element contains an invalid `content` attribute and will not refresh the page.
+This `meta` element contains an invalid `content` attribute and will not refresh the page.
 
 ```html
 <head>
@@ -263,7 +263,7 @@ This 'meta' element contains an invalid `content` attribute and will not refresh
 
 #### Inapplicable Example 8
 
-This 'meta' element contains an invalid `content` attribute and will not refresh the page.
+This `meta` element contains an invalid `content` attribute and will not refresh the page.
 
 ```html
 <head>

netlify.toml

@@ -0,0 +1,15 @@
+[build]
+command = "npm run pr:preview && cd wcag-act-rules-tmp && git submodule update --init --remote && bundle install && bundle exec jekyll build --config '_config.yml,_config_staging.yml'"
+# base = "wcag-act-rules-tmp"
+publish = "wcag-act-rules-tmp/_site"
+
+[build.environment]
+RUBY_VERSION = "3.3.3"
+
+[[redirects]]
+  from = "/"
+  to = "/standards-guidelines/act/rules/"
+
+[[redirects]]
+  from = "/standards-guidelines/act/rules/*"
+  to = "/standards-guidelines/at/rules/:splat/proposed"

package-lock.json

@@ -177,7 +177,8 @@
 		"formatRulesDir": "prettier --write './_rules/**/*.md'",
 		"format": "prettier --write *.{json,md,js,html,css,yml} './{__tests__,_rules,.github,pages,test-assets,test-utils,utils}/**/*.{json,md,js,html,css,yml}'",
 		"test": "jest --coverage",
-		"build:wai": "zx .github/scripts/wai-build.mjs"
+		"build:wai": "zx .github/scripts/wai-build.mjs",
+		"pr:preview": "zx .github/scripts/pr-preview.mjs"
 	},
 	"homepage": "https://github.com/act-rules/act-rules.github.io",
 	"repository": {