From 78532d04ffed13243be5c4429ac7dedc4eba6171 Mon Sep 17 00:00:00 2001 From: Zakiya Date: Mon, 15 Aug 2022 10:23:42 -0700 Subject: [PATCH 1/5] Add guidance link --- .../accessible-names/visualization.tsx | 3 ++ .../adhoc/accessible-names/guidance.tsx | 51 +++++++++++++++++++ src/content/adhoc/accessible-names/index.ts | 7 +++ src/content/adhoc/index.ts | 2 + src/content/link.tsx | 4 ++ 5 files changed, 67 insertions(+) create mode 100644 src/content/adhoc/accessible-names/guidance.tsx create mode 100644 src/content/adhoc/accessible-names/index.ts diff --git a/src/ad-hoc-visualizations/accessible-names/visualization.tsx b/src/ad-hoc-visualizations/accessible-names/visualization.tsx index 36801bc635c..065fc13e2df 100644 --- a/src/ad-hoc-visualizations/accessible-names/visualization.tsx +++ b/src/ad-hoc-visualizations/accessible-names/visualization.tsx @@ -7,11 +7,13 @@ import { TelemetryDataFactory } from 'common/telemetry-data-factory'; import { AdHocTestkeys } from 'common/types/store-data/adhoc-test-keys'; import { VisualizationType } from 'common/types/visualization-type'; import { generateUID } from 'common/uid-generator'; +import { adhoc as content } from 'content/adhoc'; import { RuleAnalyzerConfiguration } from 'injected/analyzers/analyzer'; import { ScannerUtils } from 'injected/scanner-utils'; import { VisualizationInstanceProcessor } from 'injected/visualization-instance-processor'; import { isEmpty } from 'lodash'; +const { guidance } = content.accessibleNames; const accessiblenamesTestKey = AdHocTestkeys.AccessibleNames; const accessibleNamesRuleAnalyzerConfiguration: RuleAnalyzerConfiguration = { @@ -50,4 +52,5 @@ export const AccessibleNamesAdHocVisualization: VisualizationConfiguration = { getDrawer: provider => provider.createAccessibleNamesDrawer(), getSwitchToTargetTabOnScan: () => false, getInstanceIdentiferGenerator: () => generateUID, + guidance, }; diff --git a/src/content/adhoc/accessible-names/guidance.tsx b/src/content/adhoc/accessible-names/guidance.tsx new file mode 100644 index 00000000000..beaabb91637 --- /dev/null +++ b/src/content/adhoc/accessible-names/guidance.tsx @@ -0,0 +1,51 @@ +// Copyright (c) Microsoft Corporation. All rights reserved. +// Licensed under the MIT License. +import { create, GuidanceTitle, React } from '../../common'; + +export const guidance = create(({ Markup, Link }) => ( + + + +

Why accessible names matter

+ +

+ The Accessible name is a short label that provides information about the purpose of a user interface element. Without it, people + that use Assistive Technologies (AT) would have difficulty understanding the purpose of an element and interacting with it. +

+

+ For more information about Accessible names and their computation, please check out . +

+ +

About Accessible names visualization

+ +

+ The visualization in Accessibility Insights for Web enable developers to see accessibility markup that’s normally invisible. The{' '} + Accessible names visualization highlights elements that have accessible names and, when possible, + shows the accessible name. It does not highlight elements with empty, or no accessible names. +

+ + + +

+ If a widget has visible label, make sure they are programmatically related to it.{' '} + +

+ +
    +
  • A widget's visible label should be included in its accessible name.
    • +
+

+ Use the widget's accessible name and/or accessible description to identify the expected input.{' '} + +

+ +
    +
  • + For example, a button should indicate what action it will initiate. A text field should indicate what type of data + is expected and whether a specific format is required. +
    • +
+ + + +)); diff --git a/src/content/adhoc/accessible-names/index.ts b/src/content/adhoc/accessible-names/index.ts new file mode 100644 index 00000000000..ab05b20fda4 --- /dev/null +++ b/src/content/adhoc/accessible-names/index.ts @@ -0,0 +1,7 @@ +// Copyright (c) Microsoft Corporation. All rights reserved. +// Licensed under the MIT License. +import { guidance } from './guidance'; + +export const accessibleNames = { + guidance, +}; diff --git a/src/content/adhoc/index.ts b/src/content/adhoc/index.ts index a0b59de0286..5d00a8c3e95 100644 --- a/src/content/adhoc/index.ts +++ b/src/content/adhoc/index.ts @@ -1,5 +1,6 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. +import { accessibleNames } from './accessible-names'; import { color } from './color'; import { headings } from './headings'; import { landmarks } from './landmarks'; @@ -10,4 +11,5 @@ export const adhoc = { headings, landmarks, tabstops, + accessibleNames, }; diff --git a/src/content/link.tsx b/src/content/link.tsx index 663c05e8240..71369cf9e8e 100644 --- a/src/content/link.tsx +++ b/src/content/link.tsx @@ -78,6 +78,7 @@ export const link = { 'WAI-ARIA Authoring Practices 1.1: Landmark Regions', 'https://www.w3.org/TR/wai-aria-practices-1.1/#aria_landmark', ), + accessileNameComputation: linkTo('ARIA 1.1 Important Terms Section', 'https://www.w3.org/TR/wai-aria/#terms'), Keyboard: linkTo('WebAIM: Keyboard Accessibility', 'https://aka.ms/webaim/keyboard-accessibility'), InteroperabilityWithAT: linkTo( 'Section 508 - 502.2.2', @@ -92,6 +93,9 @@ export const link = { 'Understanding Success Criterion 1.4.1: Use of Color', 'https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html', ), + WCAG21UnderstandingInfoAndRelationships: linkTo('WCAG 1.3.1', 'https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships'), + WCAG21UnderstandingLabelInName: linkTo('WCAG 2.5.3', 'https://www.w3.org/WAI/WCAG21/Understanding/label-in-name'), + WCAG21UnderstandingLabelsOrInstructions: linkTo('WCAG 3.3.2', 'https://www.w3.org/WAI/WCAG21/Understanding/label-in-name'), WCAG21UnderstandingAudioOnlyViewOnlyPrerecorded: linkTo( 'Understanding Success Criterion 1.2.1: Audio-only and Video-only (Prerecorded)', 'https://www.w3.org/WAI/WCAG21/Understanding/audio-only-and-video-only-prerecorded.html', From 3d1e305a6a1baf1d45e201f874ee5b133683d8c2 Mon Sep 17 00:00:00 2001 From: Zakiya Date: Mon, 15 Aug 2022 15:20:17 -0700 Subject: [PATCH 2/5] update e2e tests --- .../adhoc/accessible-names/guidance.tsx | 2 +- .../guidance-content.test.ts.snap | 132 ++++++++++++++++++ 2 files changed, 133 insertions(+), 1 deletion(-) diff --git a/src/content/adhoc/accessible-names/guidance.tsx b/src/content/adhoc/accessible-names/guidance.tsx index beaabb91637..be39d9d84c9 100644 --- a/src/content/adhoc/accessible-names/guidance.tsx +++ b/src/content/adhoc/accessible-names/guidance.tsx @@ -6,7 +6,7 @@ export const guidance = create(({ Markup, Link }) => ( -

Why accessible names matter

+

Why Accessible names matter

The Accessible name is a short label that provides information about the purpose of a user interface element. Without it, people diff --git a/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap b/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap index 7c0851d009b..bc326d14031 100644 --- a/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap +++ b/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap @@ -1,5 +1,137 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Guidance Content pages adhoc/accessibleNames/guidance matches the snapshot 1`] = ` + +

+
+
+

+ Accessible names +

+

+ Why accessible names matter +

+

+ The Accessible name is a short label that provides information about the purpose of a user interface element. Without it, people that use Assistive Technologies (AT) would have difficulty understanding the purpose of an element and interacting with it. +

+

+ For more information about Accessible names and their computation, please check out + + ARIA 1.1 Important Terms Section + + . +

+

+ About Accessible names visualization +

+

+ The visualization in Accessibility Insights for Web enable developers to see accessibility markup that’s normally invisible. The + + Accessible names + + visualization highlights elements that have accessible names and, when possible, shows the accessible name. It does not highlight elements with empty, or no accessible names. +

+
+
+
+

+ Do +

+ + + +
+
+

+ If a widget has visible label, make sure they are programmatically related to it. + + WCAG 1.3.1 + + + + WCAG 2.5.3 + +

+
    +
  • + A widget's visible label should be included in its accessible name. +
    • +
+

+ Use the widget's accessible name and/or accessible description to identify the expected input. + + WCAG 3.3.2 + +

+
    +
  • + For example, a button should indicate what action it will initiate. A text field should indicate what type of data is expected and whether a specific format is required. +
    • +
+
+
+
+
+
+
+ +`; + exports[`Guidance Content pages adhoc/color/guidance matches the snapshot 1`] = `
Date: Tue, 16 Aug 2022 10:29:50 -0700 Subject: [PATCH 3/5] Update snapshot --- src/content/adhoc/accessible-names/guidance.tsx | 9 ++++----- src/content/link.tsx | 5 +---- .../content/__snapshots__/guidance-content.test.ts.snap | 4 ++-- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/content/adhoc/accessible-names/guidance.tsx b/src/content/adhoc/accessible-names/guidance.tsx index be39d9d84c9..cddc4ef91a5 100644 --- a/src/content/adhoc/accessible-names/guidance.tsx +++ b/src/content/adhoc/accessible-names/guidance.tsx @@ -13,7 +13,7 @@ export const guidance = create(({ Markup, Link }) => ( that use Assistive Technologies (AT) would have difficulty understanding the purpose of an element and interacting with it.

- For more information about Accessible names and their computation, please check out . + For more information about Accessible names and their computation, please check out .

About Accessible names visualization

@@ -27,16 +27,15 @@ export const guidance = create(({ Markup, Link }) => (

- If a widget has visible label, make sure they are programmatically related to it.{' '} - + If a widget has visible label, make sure they are programmatically related to it. {' '} +

  • A widget's visible label should be included in its accessible name.

- Use the widget's accessible name and/or accessible description to identify the expected input.{' '} - + Use the widget's accessible name and/or accessible description to identify the expected input.