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

Add title to interactive iframe #10530

Open
Tracked by #9495
atsansone opened this issue May 8, 2024 · 0 comments
Open
Tracked by #9495

Add title to interactive iframe #10530

atsansone opened this issue May 8, 2024 · 0 comments
Assignees
@parlough
Labels
e2-days Effort: < 5 days infra.structure Relates to the tools that create docs.flutter.dev p2-medium Necessary but not urgent concern. Resolve when possible. st.triage.ltw Indicates Lead Tech Writer has triaged t.a11y Relates to an accessibility concern

Comments

@atsansone
Copy link
Contributor

From: https://buganizer.corp.google.com/issues/337851628

OBSERVED RESULTS

Navigating through the interactive code example, I noticed that the i frame is not having a defined title.

EXPECTED RESULTS

  • Ensure that when the user is on the code section the iframe should have a definite name like: Interactive code iframe text section.

  • Element has no title attribute aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element's default semantics were not overridden with role="none" or role="presentation"

USER IMPACT

Screen reader and Cognitive users are confused because they do not know what is the name of that section is.

STEPS TO REPRODUCE

  1. Enabled VoiceOver using "Command+F5" also ChromeVox using "Ctrl+Alt+Z"
  2. Open the following page:URL
  3. Continue the linear navigation using the "Tab" and "Arrow" keys and reach the interactive example code.
  4. Listen to announced the title on that iframe.

GAR Assessment

Flutter Docs

GAR DETAILS

1.1. Do all non-text content and user interface components have meaningful accessible names and alternative text?

ADDITIONAL INFORMATION

NA

ENVIRONMENT DETAILS

  • Machine: MAC/ChromeBook
  • Browser: Chrome Version 120.0.6099.272 (Official Build) (64-bit)
  • Screen reader:VoiceOver/ChromeVox.
  • Bug filling time: 15 mins.
@atsansone atsansone mentioned this issue May 8, 2024
Open
32 tasks
@atsansone atsansone added p2-medium Necessary but not urgent concern. Resolve when possible. t.a11y Relates to an accessibility concern st.triage.ltw Indicates Lead Tech Writer has triaged infra.structure Relates to the tools that create docs.flutter.dev e2-days Effort: < 5 days labels May 8, 2024
@parlough parlough mentioned this issue May 24, 2024
Merged
atsansone pushed a commit that referenced this issue May 27, 2024
@parlough
Prepare DartPad embed attribute specifying (#10661)
bfc53de 
Enables the mechanism for
#10530 to be implemented, by
adding a `title` attribute to DartPad code blocks.

````markdown
```dartpad run="true" title="The classic hello world program in Dart!"
void main() {
  print('Hello world!');
}
```
````

Contributes to #10530

@atsansone After this lands, feel free to add titles to the embedded
DartPads. I'd be happy to review!

I'll follow up with similar changes for dart.dev
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@parlough parlough

Labels
e2-days Effort: < 5 days infra.structure Relates to the tools that create docs.flutter.dev p2-medium Necessary but not urgent concern. Resolve when possible. st.triage.ltw Indicates Lead Tech Writer has triaged t.a11y Relates to an accessibility concern
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@atsansone @parlough