Skip to content

Commit

Permalink
Merge pull request #249 from IBMa/cp-update-UG-focusview
Browse files Browse the repository at this point in the history 
Focus view updates to the UG
  • Loading branch information
@tombrunet
tombrunet authored Oct 7, 2020
2 parents a423095 + 818193d commit b67ea52
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 24 deletions.
Binary file added accessibility-checker-extension/src/assets/img/Filters.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added accessibility-checker-extension/src/assets/img/htmlFocusViewAll.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added accessibility-checker-extension/src/assets/img/searchFocusView.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added accessibility-checker-extension/src/assets/img/searchFocusViewAll.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
110 changes: 86 additions & 24 deletions accessibility-checker-extension/src/ts/usingAC/UsingACApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,27 +101,32 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
6.1 Accessibility Checker
</a>
</li>
<li>
<a href="#focus_view" title="Focus view">
6.2 Focus view
</a>
</li>
<li>
<a href="#a11y_assess" title="Accessibility Assessment">
6.2 Accessibility Assessment
6.3 Accessibility Assessment
</a>
</li>
<li>
<a
href="#t_select_hidden_settings"
title="Select hidden content Settings"
>
6.3 Hidden content scanning
6.4 Hidden content scanning
</a>
</li>
<li>
<a href="#scan_local_files" title="Scan local files">
6.4 Scanning local files
6.5 Scanning local files
</a>
</li>
<li>
<a href="#a11y_considerations" title="Accessibility Considerations">
6.5 Accessibility Considerations
6.6 Accessibility Considerations
</a>
</li>
</ul>
Expand Down Expand Up @@ -543,9 +548,8 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
<p style={{ marginTop: "0rem" }}>
To <strong>filter</strong> issues and focus only on
violations, items that need review or recommendations,
select the issue type in the issue count region below the
'Scan' button. Select the same issue type again to see all
issue types.
deselect the checkbox by the issue type in the issue count region below the
'Scan' button to exclude the issue type from the results. Select the checkbox by the issue type to include the issue type in the results.
</p>
</li>
<li>
Expand All @@ -566,14 +570,16 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
</li>
<li>
Element roles tab:
<br/>
<p>
<img
src="assets/img/checkResults.png"
alt="Accessibility Checker screenshot - a sample report of Accessibility Checker"
src="assets/img/Filters.png"
alt="Accessibility Checker screenshot - results of Accessibility Checker filtered by Violations"
width="100%"
height="100%"
/>
</p>
<br/>
<ul
style={{
listStyleType: "circle",
Expand Down Expand Up @@ -683,15 +689,15 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
<li>
<p style={{ marginTop: "0rem" }}>
Use the <strong>‘Reset’</strong> button to return the view
to the way it was just after scanning, with no issues
highlighted or opened.
to the initial scan, with the results showing all the issues for the page,
highlighted and opened.
</p>
</li>
<li>
<p style={{ marginTop: "0rem" }}>
Use the <strong>‘Report’</strong> button to download a
Use the <strong>‘Reports’</strong> button to download a
standalone HTML report that includes the same three views
and all the help information provided in the checker.
and all the help information provided in the checker and a MS Excel spreadsheet report for easy data manipulation.
</p>
</li>
<li>
Expand All @@ -704,7 +710,62 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
</ol>
</div>

<h3 id="a11y_assess">6.2 Accessibility Assessment</h3>
<h3 id="focus_view">6.2 Focus View</h3>
<div className="pa">
The <strong>'Focus view'</strong> switch allows you to switch between viewing all issues on the page, or only the issues for a selected element or component in the DOM. To focus on any individual element or component:
<ol
style={{ listStyleType: "decimal", marginInlineStart: "2rem" }}
>
<li>Select the element or the component in the DOM, or</li>
<li>
Right-click on a page element and select 'Inspect' (Chrome) or ‘Inspect Element’ (Firefox).
</li>
<li>
Select the element name in the <strong>‘Focus View’</strong> switch to view only the issues for that element and its children.
</li>
<li>Select the <strong>'All'</strong> option in the <strong>‘Focus View’</strong> switch to see all issues for the page again.</li>

By default, after the first scan of a page, all issues are shown, and the &lt;html&gt; element is selected, as shown in this screenshot:



<p>
<img
src="assets/img/htmlFocusViewAll.png"
alt="Accessibility Checker screenshot - Focus view will all issues"
width="100%"
height="100%"
/>
</p>
<br/>
In this screen shot, the search &lt;input&gt; element in the DOM has been selected, and the
<strong>‘Focus View’</strong> switch has has been set to show all the issues on the whole page:
<br/>
<p>
<img
src="assets/img/searchFocusViewAll.png"
alt="Accessibility Checker screenshot. Focus view switch options are 'input' and 'All' (selected) and all issues on the page are shown"
width="100%"
height="100%"
/>
</p>
<br/>
In this screen shot, the search &lt;input&gt; element in the DOM has been selected, and the
<strong>‘Focus View’</strong> switch has has been set to show only the issues for that search &lt;input&gt; element:
<br/>
<p>
<img
src="assets/img/searchFocusView.png"
alt="Accessibility Checker screenshot. Focus view switch options are 'input' (selected) and 'All' only the two issues within the search input element are shown"
width="100%"
height="100%"
/>
</p>

</ol>
</div>

<h3 id="a11y_assess">6.3 Accessibility Assessment</h3>
<div className="pa">
<ol
style={{
Expand Down Expand Up @@ -929,7 +990,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
</ol>
</div>

<h3 id="t_select_hidden_settings">6.3 Hidden content scanning</h3>
<h3 id="t_select_hidden_settings">6.4 Hidden content scanning</h3>
<p>
By default, the tool skips hidden content (Web pages that use the{" "}
<var>visibility:hidden</var> or <var>display:none</var> elements),
Expand All @@ -940,7 +1001,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
Accessibility Checker can validate the content that is displayed.
</p>

<h3 id="scan_local_files">6.4 Scan local files</h3>
<h3 id="scan_local_files">6.5 Scan local files</h3>
<div className="pa">
The Accessibility Checker is able to scan local .html or .htm
files launched in the Firefox browser by default. Follow the steps
Expand Down Expand Up @@ -968,7 +1029,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
</ol>
</div>

<h3 id="a11y_considerations">6.5 Accessibility Considerations</h3>
<h3 id="a11y_considerations">6.6 Accessibility Considerations</h3>
<div className="pa">
Highlighted below are several accessibility features for adaptability and to ensure ease of access to the Checker functionality, including with keyboard or with a screen reader:
<ol
Expand Down Expand Up @@ -1061,10 +1122,9 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
</ol>
</div>

<h2 id="the_report">7. Accessibility Checker report</h2>
<h2 id="the_report">7. Accessibility Checker reports</h2>
<p>
The Accessibility Checker provides a full report that you can
download as HTML. To open the Accessibility Checker report:
The Accessibility Checker provides two kinds of reports to download, one as HTML and one as MS Excel spreadsheet. To open the Accessibility Checker reports:
</p>
<ol
style={{
Expand All @@ -1088,8 +1148,8 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
</li>
<li>
<p style={{ marginTop: "0rem" }}>
Select the <strong>'Report'</strong> icon to download the
report:
Select the <strong>'Reports'</strong> icon to download the
reports:
</p>
<p>
<img
Expand All @@ -1102,9 +1162,9 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
</li>
</ol>

<h3 id="t_view_report">7.1 Review the report</h3>
<h3 id="t_view_report">7.1 Review the reports</h3>
<p>
The Accessibility Checker Report is an interactive report that you
<strong>HTML Accessibility Checker report:</strong> This is an interactive report that you
can save as an HTML file for future use. It includes the report
scan date and time, URL, and a summary of test results followed by
the issue details organized by checklist checkpoints, by element
Expand Down Expand Up @@ -1132,6 +1192,8 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
height="100%"
/>
</p>
<p><strong>MS Excel Spreadsheet report:</strong> This is a 3 sheet report. The header sheet includes the name of the tool with its version, the scan date, the ruleset and the guidelines used for the scan, and a summary of the results. The issue sheet has the issue details which now includes scan label, issue id and toolkit levels. The third sheet has definition of the fields used as columns in the issue details sheet.
</p>

<h2 id="feedback">8. Feedback</h2>
<div className="pa">
Expand Down

0 comments on commit b67ea52

Please sign in to comment.