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

Web component: Feature card block large - Focus is not covering entire card. #3881

Closed
Praveen-sr opened this issue Sep 9, 2020 · 0 comments
Closed

Web component: Feature card block large - Focus is not covering entire card. #3881

Praveen-sr opened this issue Sep 9, 2020 · 0 comments
Assignees
@IgnacioBecerra
Labels
accessibility Has accessibility requirement bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround
Milestone
Sprint 20-20

Comments

@Praveen-sr
Copy link

Detailed description

Issue: Feature card block large - On keyboard navigation, focus is not covering entire card.

Note: This is needs to be fixed on Web component & react canary versions.

Additional information

Actual :
image.png

Expected:
image.png
@Praveen-sr Praveen-sr added accessibility Has accessibility requirement bug Something isn't working dev Needs some dev work severity 3 Affects minor functionality, has a workaround labels Sep 9, 2020
@RobertaJHahn RobertaJHahn added Airtable Done package: web components Work necessary for the IBM.com Library web components package labels Sep 9, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 20-19 milestone Sep 9, 2020
@IgnacioBecerra IgnacioBecerra self-assigned this Oct 1, 2020
@IgnacioBecerra IgnacioBecerra mentioned this issue Oct 5, 2020
Merged
kodiakhq bot pushed a commit that referenced this issue Oct 7, 2020
@IgnacioBecerra
fix(feature-card-block-large): focus outline now wraps around card pr…
59c0d3f 
…operly (#4139)

### Related Ticket(s)

#3881 

### Description

The previous FeatureCardBlockLarge wasn't focusing correctly due to reusing the `outline` values meant for the `Default` and `Medium` CardBlocks. Inserting custom values to the Large `:focus` state makes it fit more adequately. 

Before (notice bottom right):
![Screen Shot 2020-10-05 at 3 59 55 PM](https://user-images.githubusercontent.com/24970122/95140488-dc86be80-0723-11eb-85ad-952e0dd832ab.png)

After: 
![Screen Shot 2020-10-05 at 3 58 13 PM](https://user-images.githubusercontent.com/24970122/95140401-a77a6c00-0723-11eb-87ea-f3e73aa816ad.png)



### Changelog

**New**

- Added new `outline` values to `.bx--feature-card-block-large .bx--card:focus` 

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: vanilla": Vanilla -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive, React (Expressive) -->
<!-- *** "RTL": React (RTL) -->
<!-- *** "feature flag": React (experimental) -->
@jeffchew jeffchew mentioned this issue Oct 8, 2020
Closed
ariellalgilmore pushed a commit to ariellalgilmore/carbon-for-ibm-dotcom that referenced this issue Oct 22, 2020
@IgnacioBecerra @ariellalgilmore
fix(feature-card-block-large): focus outline now wraps around card pr…
19b9afe 
…operly (carbon-design-system#4139)

### Related Ticket(s)

carbon-design-system#3881 

### Description

The previous FeatureCardBlockLarge wasn't focusing correctly due to reusing the `outline` values meant for the `Default` and `Medium` CardBlocks. Inserting custom values to the Large `:focus` state makes it fit more adequately. 

Before (notice bottom right):
![Screen Shot 2020-10-05 at 3 59 55 PM](https://user-images.githubusercontent.com/24970122/95140488-dc86be80-0723-11eb-85ad-952e0dd832ab.png)

After: 
![Screen Shot 2020-10-05 at 3 58 13 PM](https://user-images.githubusercontent.com/24970122/95140401-a77a6c00-0723-11eb-87ea-f3e73aa816ad.png)



### Changelog

**New**

- Added new `outline` values to `.bx--feature-card-block-large .bx--card:focus` 

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: vanilla": Vanilla -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive, React (Expressive) -->
<!-- *** "RTL": React (RTL) -->
<!-- *** "feature flag": React (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@IgnacioBecerra IgnacioBecerra

Labels
accessibility Has accessibility requirement bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround
Projects
None yet
Milestone
Sprint 20-20
Development

No branches or pull requests
5 participants
@jeffchew @ljcarot @IgnacioBecerra @RobertaJHahn @Praveen-sr