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

feature(web): make the product selection more appealing and accessible #1550

Merged
merged 22 commits into from
Sep 5, 2024

Commits on Aug 21, 2024

  1. Decorated product selection without radio btn

    * Resolves Issue agama-project#1415
    
    * Entire card is clickable, selection of card
      is still marked by blue boarder
    
    * Add icon to structures, pass it to dbus, etc
      (please do not mix product icon with pattern icon)
      fallback to default.svg in case that no icon is set
    
    * Rework button layout to clickable layout
    
    * We might need to use table or similar in case that
      description is longer than the
    
    * Supply icon for all products including default icon
    lkocman committed Aug 21, 2024
    Configuration menu
    Copy the full SHA
    d43bcc2 View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    562fa73 View commit details
    Browse the repository at this point in the history
  3. Configuration menu
    Copy the full SHA
    51b84d7 View commit details
    Browse the repository at this point in the history
  4. Configuration menu
    Copy the full SHA
    632a652 View commit details
    Browse the repository at this point in the history
  5. Configuration menu
    Copy the full SHA
    243d344 View commit details
    Browse the repository at this point in the history
  6. Configuration menu
    Copy the full SHA
    43604fa View commit details
    Browse the repository at this point in the history

Commits on Aug 22, 2024

  1. Update web/src/components/product/ProductSelectionPage.jsx

    Co-authored-by: José Iván López <[email protected]>
    lkocman and joseivanlopez authored Aug 22, 2024
    Configuration menu
    Copy the full SHA
    e7e7b9d View commit details
    Browse the repository at this point in the history
  2. Update service/lib/agama/software/product.rb

    Co-authored-by: Josef Reidinger <[email protected]>
    lkocman and jreidinger authored Aug 22, 2024
    Configuration menu
    Copy the full SHA
    e06eb2c View commit details
    Browse the repository at this point in the history
  3. Update service/lib/agama/software/product_builder.rb

    Co-authored-by: Josef Reidinger <[email protected]>
    lkocman and jreidinger authored Aug 22, 2024
    Configuration menu
    Copy the full SHA
    ca59133 View commit details
    Browse the repository at this point in the history
  4. Update service/lib/agama/software/product.rb

    Co-authored-by: Josef Reidinger <[email protected]>
    lkocman and jreidinger authored Aug 22, 2024
    Configuration menu
    Copy the full SHA
    3c92e8d View commit details
    Browse the repository at this point in the history
  5. Revert "Update web/src/components/product/ProductSelectionPage.jsx"

    Breaks build
    
    ERROR in ./src/components/product/ProductSelectionPage.jsx 107:22-63
    Module not found: Error: Can't resolve '~/assets/products' in '/home/runn
    
    This reverts commit e7e7b9d.
    lkocman committed Aug 22, 2024
    Configuration menu
    Copy the full SHA
    f8ae4e7 View commit details
    Browse the repository at this point in the history

Commits on Sep 4, 2024

  1. Configuration menu
    Copy the full SHA
    8ad16c2 View commit details
    Browse the repository at this point in the history
  2. fix(web): restore radio inputs in product selection

    Since it's arguably that they might confuse users and also because of
    consistent with the rest of the UI. They could be drop or hidden later,
    but thinking globally in all selectors and implications of doing so.
    
    Also, this commit improves a little the proposed layout by making use of
    the label for "increasing" the clickable area instead of adding a
    handler for the PF/Card component itself. Again, this can be refactored
    later if really needed.
    
    Read the reasoning at
    agama-project#1550 (review)
    and/or agama-project#1550 (comment).
    dgdavid committed Sep 4, 2024
    Configuration menu
    Copy the full SHA
    ce403e0 View commit details
    Browse the repository at this point in the history
  3. fix(web): do not lost focus when selecting a product

    As a result of an internal component defined in the body of the main
    component (aka "render function"), the focus was lost each time the main
    component got re-rendered because of a "selected product" changed.
    
    This happens because these internal components are actually not
    re-rendered but remounting since they were re-defined :/ A bit messy,
    but there is a lot of documentation about it. To link a few,
    
      * https://react.dev/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state
        - Which contains a "Pitfall" warning that says: **This is why you
          should not nest component function definitions.**
      * https://www.developerway.com/posts/react-re-renders-guide#part3.1
    dgdavid committed Sep 4, 2024
    Configuration menu
    Copy the full SHA
    3cb7ebf View commit details
    Browse the repository at this point in the history
  4. feat(web): copy product logos to public dist directory

    To make them accessible.
    dgdavid committed Sep 4, 2024
    Configuration menu
    Copy the full SHA
    e85aef0 View commit details
    Browse the repository at this point in the history
  5. refactor(web): rework product selector

    For improving its a11y when using an screen reader.
    
    Also makes the PF/Card element clickable as proposed by @lkocman
    initially ease the selection for mouse users, but keeping the radio
    inputs as both, visual and keyboard aid.
    dgdavid committed Sep 4, 2024
    Configuration menu
    Copy the full SHA
    ec57cc1 View commit details
    Browse the repository at this point in the history

Commits on Sep 5, 2024

  1. fix(web): improve a11y of product selector

    Kind of undoing some changes made at
    ec57cc1 related to the clickable card.
    It made a11y tools complain about "Clickable elements must be focusable
    and should have interactive semantics" which makes sense.
    
    Instead of start adding keyboard handlers to the PF/Card component too
    this commit uses a CSS technique for "expanding" the area of the label
    to the whole card and using the pointer cursor, while keeping the
    details out of the label but the cursor: pointer. That way, the
    component still accessible for keyboard and screen reader while improve
    the mouse users experience too.
    dgdavid committed Sep 5, 2024
    Configuration menu
    Copy the full SHA
    f22d679 View commit details
    Browse the repository at this point in the history
  2. refactor(web): migrate product selector to TypeScript

    Which revealed that `pattern` property of `SoftwareConfig` type is
    actually optional.
    dgdavid committed Sep 5, 2024
    Configuration menu
    Copy the full SHA
    1d823e9 View commit details
    Browse the repository at this point in the history
  3. Configuration menu
    Copy the full SHA
    aefdd5f View commit details
    Browse the repository at this point in the history
  4. Configuration menu
    Copy the full SHA
    ac7f797 View commit details
    Browse the repository at this point in the history
  5. Configuration menu
    Copy the full SHA
    ed0025a View commit details
    Browse the repository at this point in the history
  6. Configuration menu
    Copy the full SHA
    18b48cc View commit details
    Browse the repository at this point in the history