Comments (8)
I think we should discuss this one a bit first. Since the action component is used within action-bar (toolbar), I'm not sure it would make sense to support some of the actions being links.
In this case, why can't they use a calcite-button
?
from calcite-design-system.
Some of the concerns i have
- Potential issues with a11y due to roles of parent components consuming actions and expecting a button role.
- Unexpected behavior from an end user when clicking an action and not expecting a URL to change or be opened in a new window.
Can we research the accessibility issues and look into the UX a bit? I could see it being problematic when we are stying both a button and a link to look exactly the same with no visual difference to an end user. Its also weird for a component's role to change dynamically whether its a link or not. Maybe these should be separate components in order to avoid the confusion and potential a11y issues.
from calcite-design-system.
In this case, why can't they use a
calcite-button
?
In the use case, teams were using tile
prior to its redesign. We recommended they slot in an action
, but it required them to also add in JS to support a link: https://codepen.io/geospatialem/pen/JjVZgNL. A button
doesn't have the same meaning in the use case. cc-ing @macandcheese if there is a different pattern we should recommend here though.
Some of the concerns i have
- Potential issues with a11y due to roles of parent components consuming actions and expecting a button role.
- Unexpected behavior from an end user when clicking an action and not expecting a URL to change or be opened in a new window.
Makes sense on the URL opening, think this speaks to having the dev add in a meaningful label
that depicts a link is present and will send the user to either a new window or tab. We could add some doc around this support.
Can we research the accessibility issues and look into the UX a bit? I could see it being problematic when we are stying both a button and a link to look exactly the same with no visual difference to an end user. Its also weird for a component's role to change dynamically whether its a link or not. Maybe these should be separate components in order to avoid the confusion and potential a11y issues.
Believe the action
component is currently using a button
role, so maybe we should strategize if that's still the correct approach, and how to proceed, if at all, with the above request.
from calcite-design-system.
I don't see an issue with allowing Action to conditionally render as a anchor - it's the same in Button currently. Ultimately the onus of making the UX make sense and actions apparent to a user falls to the implementer - so the same as any of our current components.
There are definitely places where using an Action inline in this way is preferable to a Button for UI - internally the Button renders an anchor or button element, so seems reasonable to have Action behave the same way. Ultimately it's a different UI expectation than Button.
from calcite-design-system.
I don't see an issue with allowing Action to conditionally render as a anchor - it's the same in Button currently. Ultimately the onus of making the UX make sense and actions apparent to a user falls to the implementer - so the same as any of our current components.
It's not exactly the same as button. Button doesn't have any parent components like action-bar that will soon expect a toolbar role with buttons inside. If we allow action to be a link this could cause issues with accessibility and expected roles. We would have to specify in documentation not to do this. This kind of doc leads me to believe separate components might make more sense here. Like an action-link?
I think we should spike and discuss this. Specifically if components should change role internally depending on a property value (anchor link vs button). A separate discussion involving design should be made to whether links and buttons can or should look exactly the same as that could be confusing to an end user because there would be no way to visually tell them apart.
from calcite-design-system.
Yeah, we should verify those use cases and it might come down to doc.
From the design side - we already have the same set up in Link and Button - each renders either an a
or button
depending on the presence of the same properties. It will always come down to the implementer to determine the correct UI / UX to communicate to and inform a user, combined with correctly populated a11y / aria.
from calcite-design-system.
From the design side - we already have the same set up in Link and Button - each renders either an a or button depending on the presence of the same properties. It will always come down to the implementer to determine the correct UI / UX to communicate to and inform a user, combined with correctly populated a11y / aria.
Having a button render a link or a link render a button has always seemed off to me. I just wanted to bring it to get more attention. We will just need to document correct usage.
from calcite-design-system.
Yeah, totally fair. Link especially as that one insinuates href
by name, IMO.
For Button, it's pretty common to render either a / button based on href
, looking at other systems: https://mui.com/material-ui/react-button/#contained-button, https://ant.design/components/button, https://developer.microsoft.com/en-us/fluentui#/controls/web/button, etc.
That said, some like Atlassian have (newly introduced) distinct components for Icon Button, Link Button, Split Button, etc.
from calcite-design-system.
Related Issues (20)
- [Dropdown Group] The `group-tile` scale is not scaling with the `dropdown` scale HOT 2
- [table] Add option to remove selection chips for single-selection mode HOT 4
- Tile: slotted content can over-extend the boundary HOT 2
- Update tests using URL placeholder images to use the placeholderImage utility function HOT 2
- calcite-modal: Option to prevent modal from returning focus when modal is removed from the DOM (when focus trap is enabled).
- [List Item] Can't use keyboard navigation with multiple list items on hover
- `Calcite-input-number` - Prevent Invalid Local Characters in Calcite Number Input
- Can't correctly clear SegmentedControl selected item
- Date selected in input-date-picker gets cleared for "bs", "it-CH" locales HOT 2
- Console error when only some tabs set the tab attribute
- Test issue
- New Component : calcite-month-picker component. HOT 2
- New Component : support year-picker as type in input-date-picker HOT 2
- Add eslint rule to prevent external urls for stories, html demo files, etc
- performance issue with floating-ui-owning components HOT 3
- [Navigation Logo/Navigation User] Truncate text for smaller widths, such as mobile devices
- Nested child list items are displayed briefly until component recognizes them and adds the caret and hides them
- Combobox: When you tab into the input, the options do not appear
- Support a non-transparent state for FAB
- Please add a way to customize the height of the CalciteSlider.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from calcite-design-system.