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

fix: a11y status for menu button #4313

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix: a11y status for menu button #4313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9128f40
fix: a11y status for menu button
riddhybansal Oct 7, 2024
ee48fcd
chore: yarn format
alisonjoseph Oct 7, 2024
0bfd37b
Merge branch 'main' into a11y_status_for_menu_buttons
alisonjoseph Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions src/components/A11yStatus/A11yStatus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,17 @@ const A11yStatus = ({ components, layout }) => {
.includes(componentName.toLowerCase().replace(' ', ''));
});

const githubUrl = `https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/${componentName
.replace(/\b\w/g, (char) => char.toUpperCase())
.replace(/\s+/g, '')}`;
let githubUrl = '';
if (componentName === 'Menu buttons') {
const githubComponentName = 'Menu button';
githubUrl = `https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/${githubComponentName
.replace(/\b\w/g, (char) => char.toUpperCase())
.replace(/\s+/g, '')}`;
} else {
githubUrl = `https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/${componentName
.replace(/\b\w/g, (char) => char.toUpperCase())
.replace(/\s+/g, '')}`;
}

// Function to check if the spec has a specific tag and
// if the status is skipped
Expand Down
5 changes: 4 additions & 1 deletion src/pages/components/menu-buttons/accessibility.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,4 +208,7 @@ custom component.
- When the combo button menu is open, the element (`div`) wrapping the entire
combo button is given `aria-owns` with a value of the menu `id`.

<A11yStatus layout="table" components="Menu buttons" />
<A11yStatus
layout="table"
components={['Menu buttons', 'Combo button', 'Overflow menu']}
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
components={['Menu buttons', 'Combo button', 'Overflow menu']}
components={['Menu button', 'Combo button', 'Overflow menu']}

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 already did that but there is no component called menu button so its not even getting rendered in the table thats what I was not sure about either I should rename to component in carbon website or I should do that CUSTOM LOGIC , as I think renaming the component might break many things in website.

Copy link
Member

Choose a reason for hiding this comment

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

Ah I think I know what's missing. This needs to get added to the data/components.json for Menu Button to show up.

{
  "component": "Menu button",
  "parentComponent": "Menu buttons",
  "overview": false,
  "testing": {
    "screenreader": "manual"
  }
},

/>
Loading