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.

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

docs: 📚 Provide Accessibility (A11y) Information for All Components #1670

Open
4 of 7 tasks
karlbaumhauer opened this issue Nov 22, 2024 · 4 comments · May be fixed by #1806
Open
4 of 7 tasks

docs: 📚 Provide Accessibility (A11y) Information for All Components #1670

karlbaumhauer opened this issue Nov 22, 2024 · 4 comments · May be fixed by #1806
Assignees
Labels
A11y Audit Identifies tasks related to accessibility improvements identified in the A11y audit of the DS 🚧🛑🚧 BLOCKED 🚧🛑🚧 Item is blocked and cannot be continued. 🔧 code needs changes in code

Comments

@karlbaumhauer
Copy link
Contributor

karlbaumhauer commented Nov 22, 2024

Description

As a user,
I need clear and detailed accessibility (A11y) information for each component
so that I can understand if a component is A11y compliant and, if not, what the known issues are.

Acceptance Criteria:

  1. Accessibility Section in Documentation:
    • Each component has an “Accessibility Information” section beneath its description.
    • Provide a detailed list of known A11y issues.
  2. Content Management:
    • The information must be easy to update as compliance or known issues change.

Notes:

  • Known issues should include links to any relevant tickets or documentation for transparency. ( Do not include GitHub Links in docs Inline comments are acceptable)
  • This information helps users make informed decisions about which components to use in A11y-sensitive contexts.
  • Ensure the documentation itself meets accessibility standards.
  • Add information in contribution guide about "how/when to update these information"
  • DoD would be checking and adding it to all components.

Where to put the documentation

Storybook

DoR

  • Item has business value
  • Item has been estimated by the team
  • Item is clear and well-defined
  • Item dependencies have been identified

DoD

  • Relevant stories (Features, A11y) are created/updated
  • Migration Guide has been created/updated (if applicable)
  • Implementation works successfully on feature branch
@karlbaumhauer karlbaumhauer added the 🔧 code needs changes in code label Nov 22, 2024
@karlbaumhauer karlbaumhauer moved this to ⚙️ To be refined in Solid Design System Project Board Nov 22, 2024
@karlbaumhauer karlbaumhauer added the A11y Audit Identifies tasks related to accessibility improvements identified in the A11y audit of the DS label Nov 22, 2024
@yoezlem yoezlem removed their assignment Nov 22, 2024
@yoezlem yoezlem moved this from ⚙️ To be refined to 🔖 Ready in Solid Design System Project Board Nov 22, 2024
@Vahid1919 Vahid1919 self-assigned this Dec 3, 2024
@Vahid1919 Vahid1919 moved this from 🔖 Ready to 🏗 In progress in Solid Design System Project Board Dec 16, 2024
@Vahid1919
Copy link
Contributor

Under "Reviewed" you will find a list of components that I took a look at to add a11y information. if checked, the section has been included. If unchecked, it means that I did not include a11y information because there was not relevant information available (eg: no a11y issues or all issues are resolved)

Reviewed

#### Components Checklist
  • sd-accordion-group
  • sd-accordion
  • sd-audio
  • sd-badge
  • sd-brandshape
  • sd-button
  • sd-carousel-item
  • sd-carousel
  • sd-checkbox-group
  • sd-checkbox
  • sd-combobox
  • sd-dialog
  • sd-divider
  • sd-drawer
  • sd-dropdown
  • sd-expandable - tackled in feat[dev]: ✨ implement A11y improvements to sd-expandable #1476
  • sd-flipcard
  • sd-header
  • sd-icon
  • sd-input
  • sd-link
  • sd-map-marker
  • sd-navigation-item
  • sd-notification
  • sd-optgroup
  • sd-option
  • sd-quickfact
  • sd-radio-button
  • sd-radio-group
  • sd-radio
  • sd-scrollable
  • sd-select
  • sd-spinner
  • sd-step-group
  • sd-step
  • sd-switch
  • sd-tab-group
  • sd-tab-panel
  • sd-tab
  • sd-tag
  • sd-teaser-media
  • sd-teaser
  • sd-textarea
  • sd-tooltip
  • sd-video

Under "Not Reviewed" are the styles that I did not have time to check whether they need to have an a11y hint or not.

Not Reviewed

Styles Checklist

  • sd-chip
  • sd-container
  • sd-copyright
  • sd-display
  • sd-flag
  • sd-footnotes
  • sd-headline
  • sd-hidden-links
  • sd-interactive
  • sd-leadtext
  • sd-list
  • sd-mark
  • sd-media
  • sd-meta
  • sd-paragraph
  • sd-prose
  • sd-table-cell
  • sd-table

@MartaPintoTeixeira
Copy link
Contributor

@coraliefeil since code is now having a section called "Accessibility Information" should we rename our "Accessibility" section in figma to match storybook?

@MartaPintoTeixeira
Copy link
Contributor

Figma "Accessibility" renamed to "Accessibility Information" to match code future improvements in this ticket

@auroraVasconcelos
Copy link
Contributor

auroraVasconcelos commented Jan 29, 2025

Blocked by #1699 and will need refactor due to #1379 .

Current status:

Components in conformity with figma:

  • Accordion-group
  • Accordion
  • Badge
  • Brandshape
  • Button
  • Carousel-item
  • Carousel
  • Checkbox-group
  • Checkbox
  • Combobox
  • Dialog
  • Divider
  • Flipcard
  • Header
  • Input
  • Link
  • Map-marker
  • Navigation-tiem
  • optgroup
  • Option
  • Select
  • Teaser-media
  • Textarea
  • Tooltip
  • Copyright
  • Footnotes
  • Headline
  • Hidden-links
  • Prose
  • Video

Components with diferences between Storybook and Figma:

  • Drawer
  • Dropdown
  • Explandable
  • Notification
  • Radio-button
  • Radio-button-group
  • Scrollable

Components with no information in Accessibility Information section in figma:

  • Icon
  • Quickfact
  • Radio
  • Step-group
  • Step
  • Switch
  • Tag
  • Teaser
  • Interactive

Components with no Accessibility Information (storybook and figma):

  • Spinner
  • Tab-group
  • Tab-panel
  • Tab
  • Chip
  • Container
  • Display
  • Flag
  • Leadtext
  • List
  • Mark
  • Media
  • Meta
  • Paragraph
  • Table-cell
  • Table

@auroraVasconcelos auroraVasconcelos added the 🚧🛑🚧 BLOCKED 🚧🛑🚧 Item is blocked and cannot be continued. label Jan 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A11y Audit Identifies tasks related to accessibility improvements identified in the A11y audit of the DS 🚧🛑🚧 BLOCKED 🚧🛑🚧 Item is blocked and cannot be continued. 🔧 code needs changes in code
Projects
Status: 🏗 In progress
Development

Successfully merging a pull request may close this issue.

5 participants