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.

Sign up for GitHub

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

Jump to bottom

docs: updated accessibility section #4161

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

docs: updated accessibility section #4161

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c7ba118
docs: updated accessibility section
Mar 8, 2024
d7d546a
docs: updated accessibility contracts documentation
Mar 8, 2024
47804e1
chore: updated accessibility aria values on button and replaced badge
Mar 11, 2024
0de30ba
Merge branch 'main' of https://github.com/adobe/spectrum-web-componen…
Mar 11, 2024
2959d1c
chore: updated accessibility layouts in components
Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions projects/documentation/content/_includes/component.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ layout: layout.njk
{% for part in collections[componentName] %}
<sp-tab-panel class="section" value="{{ part.data.partType }}">
{{ part.templateContent | safe }}
{% if hasReadmePackagesTemplate %}
Copy link
Contributor

Choose a reason for hiding this comment

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

This will place this content at the bottom of the Examples AND the API Table which is what is causing duplicate IDs in the same DOM tree and causing the Tooltips not to open in the Examples tab.

Copy link
Contributor Author

@Rajdeepc Rajdeepc Mar 11, 2024 •
edited

Choose a reason for hiding this comment

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

The logic has been changed to add inside the for loop within the tab panel

{% for part in collections[componentName] %}
        <sp-tab-panel class="section" value="{{ part.data.partType }}">
            {{ part.templateContent | safe }}
            {% if isComponentTemplate and part.data.partType === 'examples' %}
              {% include "partials/accessibility.njk" %}
            {% endif %}
        </sp-tab-panel>
      {% endfor %}

{% include "partials/accessibility.njk" %}
{% endif %}
</sp-tab-panel>
{% endfor %}
</sp-tabs>
Expand Down
100 changes: 100 additions & 0 deletions projects/documentation/content/_includes/partials/accessibility.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<div class="headerContainer">
<h2 id="accessibility" tabindex="-1" class="spectrum-Heading spectrum-Heading--sizeM">Accessibility testing status&nbsp;<sp-link class="header-anchor" href="#accessibility" aria-label="Accessibility" dir="ltr" focusable="">#</sp-link></h2>
<sp-divider size="l" dir="ltr" role="separator"></sp-divider>
</div>
<sp-table quiet>
<sp-table-head>
<sp-table-head-cell>Component</sp-table-head-cell>
<sp-table-head-cell>Accessibility test</sp-table-head-cell>
<sp-table-head-cell>Status</sp-table-head-cell>
<sp-table-head-cell>Source Code</sp-table-head-cell>
</sp-table-head>
<sp-table-body>
<sp-table-row value="row1">
<sp-table-cell><sp-link href="https://opensource.adobe.com/spectrum-web-components/components/{{componentName}}/#usage">{{componentName}}</sp-link></sp-table-cell>
<sp-table-cell>
<span id="defaulttest">Default state</span>
<sp-overlay trigger="defaulttest@hover" placement="bottom">
Copy link
Contributor

Choose a reason for hiding this comment

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

We're still working on #3596 but, the accessibility here with a screen reader should be more like https://enhancement-docs-accessibility--spectrum-web-components.netlify.app/components/overlay/#example than it is now. I'm not sure if that's the lack of tab indexes on the triggers, or the duplicate IDs, or type="auto" when it should be type="hint", or something else, but please take a closer look to ensure we've at least prepared this content to the best of the capabilities of the elements we're using.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I checked and the accessibility is not there for badge component which in turn renders a label. So I have updated each element inside this table to render as a button to leverage the accessibility implementations of a button and tested it in screen reader. Please note this is a screen reader test. The UI has been updated accordingly.

Screenshot 2024-03-11 at 3 58 36 PM

<sp-tooltip>
Test(s) that ensure the initial render state of a component is accessible.
</sp-tooltip>
</sp-overlay>
</sp-table-cell>
<sp-table-cell>
<sp-badge
variant="positive"
id="defaultstatus"
>
Tested
</sp-badge>
<sp-overlay trigger="defaultstatus@hover" placement="bottom">
<sp-tooltip>
Passes all automated tests with no reported accessibility violations.
</sp-tooltip>
</sp-overlay></sp-table-cell>
<sp-table-cell>
<sp-link target="_blank" href="https://github.com/adobe/spectrum-web-components/tree/main/packages/{{componentName}}">Github link</sp-link>
</sp-table-cell>
</sp-table-row>
<sp-table-row value="row2">
<sp-table-cell></sp-table-cell>
<sp-table-cell>
<span id="advancedtest">Advanced states</span>
<sp-overlay trigger="advancedtest@hover" placement="bottom">
<sp-tooltip>
Tests that ensure additional states of the component are accessible.
This could be interactive states of a component or its multiple variants.
</sp-tooltip>
</sp-overlay>
</sp-table-cell>
<sp-table-cell><sp-badge variant="positive" id="advancedstatus">Tested</sp-badge>
<sp-overlay trigger="advancedstatus@hover" placement="bottom">
<sp-tooltip>
Passes all automated tests with no reported accessibility violations.
</sp-tooltip>
</sp-overlay></sp-table-cell>
<sp-table-cell></sp-table-cell>
</sp-table-row>
<sp-table-row value="row2">
<sp-table-cell></sp-table-cell>
<sp-table-cell>
<span id="keyboardtest">Keyboard navigation</span>
<sp-overlay trigger="keyboardtest@hover" placement="bottom">
<sp-tooltip>
Tests that ensure additional states of the component are accessible.
This could be interactive states of a component or its multiple variants.
</sp-tooltip>
</sp-overlay>
</sp-table-cell>
<sp-table-cell><sp-badge variant="positive" id="keyboardstatus">Tested</sp-badge>
<sp-overlay trigger="keyboardstatus@hover" placement="bottom">
<sp-tooltip>
Passes all automated tests with no reported accessibility violations.
</sp-tooltip>
</sp-overlay>
</sp-table-cell>
<sp-table-cell></sp-table-cell>
</sp-table-row>
<sp-table-row value="row3">
<sp-table-cell></sp-table-cell>
<sp-table-cell>
<span id="screenreadertest">Screen reader</span>
<sp-overlay trigger="screenreadertest@hover" placement="bottom">
<sp-tooltip>
This manual testing ensures that the visual information on the screen
is properly conveyed and read correctly by screen readers such as JAWS, VoiceOver, and NVDA.
</sp-tooltip>
</sp-overlay>
</sp-table-cell>
<sp-table-cell>
<sp-badge variant="indigo" id="screenreaderstatus">Manually tested</sp-badge>
<sp-overlay trigger="screenreaderstatus@hover" placement="bottom">
<sp-tooltip>
A human has manually tested this component, e.g. screen reader testing.
</sp-tooltip>
</sp-overlay>
</sp-table-cell>
<sp-table-cell></sp-table-cell>
</sp-table-row>
</sp-table-body>
</sp-table>
4 changes: 4 additions & 0 deletions projects/documentation/scripts/copy-component-docs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,9 @@ export async function processREADME(mdPath) {
'template.js'
)
);
const hasReadmeinPackages = fs.existsSync(
path.resolve(__dirname, '../../../packages', packageName, 'README.md')
);
Copy link
Contributor

Choose a reason for hiding this comment

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

What does this state mean to you? Also, when would a README.md not exist?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Should be simplified now with isComponent value. This was experimental to check inside the package directory. I found isComponent already does this.

/* eslint-disable prettier/prettier */
const data = `${
hasArgs
Expand All @@ -210,6 +213,7 @@ export async function processREADME(mdPath) {
}export default {
hasDemoControls: ${hasArgs},
hasDemoTemplate: ${hasTemplate},
hasReadmePackagesTemplate: ${hasReadmeinPackages},
deprecationNotice: ${JSON.stringify(deprecationNotice)},
${hasArgs ? 'demoControls: Object.values(argTypes),' : ''}
};
Expand Down