diff --git a/.github/workflows/create-tag.yml b/.github/workflows/create-tag.yml index 36c0a29ad..d886404c3 100644 --- a/.github/workflows/create-tag.yml +++ b/.github/workflows/create-tag.yml @@ -1,197 +1,110 @@ -## REFER DOCS: -# https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines -# https://semver.org/ -# https://github.com/semantic-release/semantic-release -# https://github.com/mathieudutour/github-tag-action#bumping - - +--- ################################################ # GITHUB ACTION WORKFLOW NAME ################################################ -name: Practera Release Tag/Branch Creation - +name: "Create tag for normal release or hotfix" ################################################ # GITHUB ACTION EVENT TRIGGER ################################################ -on: +on: workflow_dispatch: inputs: - RELEASE_BRANCH: - description: '# Branch name that has code to release!' + IS_HOTFIX: + type: choice + description: "Is a hotfix or not." required: true - default: '' + default: "false" + options: + - "false" + - "true" HOTFIX_TAG: - description: '# Optional, if Hotfix Release, then mandatory to input recent tag version (include prefix - v as well) deployed to live otherwise ignore this input' - default: 'false' + description: "Tag to calculate creation of hotfix." + default: "" + IS_MAJOR: + type: choice + description: "Is a major release?" + required: true + default: "false" + options: + - "false" + - "true" + IS_MINOR: + type: choice + description: "Is a minor release?" + required: true + default: "false" + options: + - "false" + - "true" + IS_PATCH: + type: choice + description: "Is a patch release?" + required: true + default: "false" + options: + - "false" + - "true" ################################################ -# GITHUB ACTION JOBS -################################################ +# GITHUB ACTION JOB +################################################ jobs: - create-release-tag: - name: create-release-tag - runs-on: ubuntu-latest + create-tag: + permissions: write-all timeout-minutes: 15 - + runs-on: ubuntu-latest ################################################ # GITHUB ACTIONS GLOBAL ENV VARIABLES ################################################ env: - ENV : live # Valid values are dev,test,live only - STACK_NAME: live # Valid values are au,us,uk,p2,lf,nu,p1-sandbox,p1-stage,p2-sandbox,shared,p2-usa only - ROOTSTACK: app-v2 - CFNS3BucketName: devops-cfn-templates - PRIVATES3BucketName: devops-shared-private + ENV: live STATUSREPORTS3Bucket: deployment-status.practera.com - VERSION_FILE: package.json - RELEASE_BRANCH: ${{ github.event.inputs.RELEASE_BRANCH }} - HOTFIX_TAG: ${{ github.event.inputs.HOTFIX_TAG }} - - + REGION: ap-southeast-2 + AWS_ACCOUNT_ID: ${{ secrets.AWS_ACCOUNT_ID }} + steps: ################################################ # GITHUB REPO CHECKOUT ################################################ - steps: - uses: actions/checkout@v4 with: - fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis - ref: ${{ github.event.inputs.RELEASE_BRANCH }} - + fetch-depth: 0 + ref: release/live # branch for release ################################################ -# AWS CLI CONFIGURATION - DEVOPS -################################################ - - name: Configure AWS credentials from $STACK_NAME account - uses: aws-actions/configure-aws-credentials@v4 - with: - aws-access-key-id: ${{ secrets.DEVOPS_AWS_ACCESS_KEY_ID }} - aws-secret-access-key: ${{ secrets.DEVOPS_AWS_SECRET_ACCESS_KEY }} - aws-region: ap-southeast-2 - - +# AWS credentials setup ################################################ -# NEW TAG DEFINED FOR RELEASE PROCESS -################################################ - - name: New tag defined for release process - if: env.HOTFIX_TAG == 'false' + - name: Get AWS Organization Number + id: AWS_ORG run: | - aws s3 cp s3://$STATUSREPORTS3Bucket/scripts/create-tag-release.sh create-tag-release.sh - chmod +x ./create-tag-release.sh - ./create-tag-release.sh - + CENTRALIZED=$(echo $AWS_ACCOUNT_ID | jq -r .CENTRALIZED) + echo "::add-mask::$CENTRALIZED" + echo "CENTRALIZED=$CENTRALIZED" >> $GITHUB_OUTPUT + - name: Configure AWS Credentials from Centralized account + uses: ./.github/actions/aws-oidc + with: + role-to-assume: arn:aws:iam::${{ steps.AWS_ORG.outputs.CENTRALIZED }}:role/github-restricted-role-to-assume + region: ${{ env.REGION }} -########################################################## -# NEW TAG DEFINED FOR RELEASE PROCESS - For Hotfix Release -########################################################### - - name: New tag defined for release process - if: env.HOTFIX_TAG != 'false' +################################################ +# Download script from s3 bucket +################################################ + - name: Download script file run: | - aws s3 cp s3://$STATUSREPORTS3Bucket/scripts/create-hotfix-tag-release.sh create-hotfix-tag-release.sh - chmod +x ./create-hotfix-tag-release.sh - ./create-hotfix-tag-release.sh - + aws s3 cp s3://$STATUSREPORTS3Bucket/scripts/tag-releasev2.sh tag-releasev2.sh + chmod +x ./tag-releasev2.sh ################################################ -# BUMP VERSION AND PUSH TAGS -################################################ - - name: Bump version and push tag - id: tag_version - uses: mathieudutour/github-tag-action@v5.5 - with: - github_token: ${{ secrets.GITHUB_TOKEN }} - custom_tag: ${{ env.RELEASE_TAG_VERSION }} - tag_prefix: v - release_branches: ${{ github.event.inputs.RELEASE_BRANCH }} - create_annotated_tag: true - # custom_release_rules: hotfix:patch,pre-feat:preminor,bug:patch:Bug Fixes,chore:patch:Chores - dry_run: false - - +# Run script to create tag ################################################ -# CREATE GIT TAGS FOR RELEASE PROCESS -################################################ - - name: Create a GitHub release - uses: actions/create-release@v1 - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - with: - tag_name: ${{ steps.tag_version.outputs.new_tag }} - release_name: Release ${{ steps.tag_version.outputs.new_tag }} - body: ${{ steps.tag_version.outputs.changelog }} - - - -# ########################################################## -# # SLACK NOTIFICATION FOR SUCCESS -# ########################################################## - - name: Slack Notification - if: ${{ success() }} # Pick up events even if the job fails or is canceled. - uses: 8398a7/action-slack@v3 - env: - SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} - MATRIX_CONTEXT: ${{ toJson(matrix) }} # required - with: - status: ${{ job.status }} - author_name: Release ${{ steps.tag_version.outputs.new_tag }} created for ${{ env.ROOTSTACK }} for deployment to ${{ env.ENV }} environemnt in ${{ env.STACK_NAME }} AWS account. git previous tag id ${{ env.CURRENT_TAG_VERSION }} - mention: 'here' - if_mention: failure,cancelled - job_name: create-release-tag # Match the name above. - fields: repo,commit,eventName,ref,workflow,message,author,job,took - custom_payload: | - { - username: 'GitHub Action CI WorkFlow', - icon_emoji: ':github:', - attachments: [{ - color: '${{ job.status }}' === 'success' ? 'good' : ${{ job.status }}' === 'failure' ? 'danger' : 'warning', - text: - `${process.env.AS_REPO}\n - ${process.env.AS_COMMIT}\n - ${process.env.AS_EVENT_NAME}\n - @${process.env.AS_REF}\n - @${process.env.AS_WORKFLOW}\n - ${process.env.AS_MESSAGE}\n - ${process.env.AS_AUTHOR}\n - ${process.env.AS_JOB}\n - ${process.env.AS_TOOK}`, - }] - } - - - -# ########################################################## -# # SLACK NOTIFICATION FOR FAILURE -# ########################################################## - - name: Slack Notification - if: ${{ failure() }} # Pick up events even if the job fails or is canceled. - uses: 8398a7/action-slack@v3 + - name: Run script + run: | + ./tag-releasev2.sh env: - SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} - MATRIX_CONTEXT: ${{ toJson(matrix) }} # required - with: - status: ${{ job.status }} - author_name: create tag failed; package.json version id ${{env.NEW_TAG_VERSION}}; git latest tag id ${{env.CURRENT_TAG_VERSION}} mismatch - ${{ env.ERR_MSG }} - mention: 'here' - if_mention: failure,cancelled - job_name: create-release-tag # Match the name above. - fields: repo,commit,eventName,ref,workflow,message,author,job,took - custom_payload: | - { - username: 'GitHub Action CI WorkFlow', - icon_emoji: ':github:', - attachments: [{ - color: '${{ job.status }}' === 'success' ? 'good' : ${{ job.status }}' === 'failure' ? 'danger' : 'warning', - text: - `${process.env.AS_REPO}\n - ${process.env.AS_COMMIT}\n - ${process.env.AS_EVENT_NAME}\n - @${process.env.AS_REF}\n - @${process.env.AS_WORKFLOW}\n - ${process.env.AS_MESSAGE}\n - ${process.env.AS_AUTHOR}\n - ${process.env.AS_JOB}\n - ${process.env.AS_TOOK}`, - }] - } \ No newline at end of file + IS_HOTFIX: ${{ github.event.inputs.IS_HOTFIX }} + HOTFIX_TAG: ${{ github.event.inputs.HOTFIX_TAG }} + IS_MAJOR: ${{ github.event.inputs.IS_MAJOR }} + IS_MINOR: ${{ github.event.inputs.IS_MINOR }} + IS_PATCH: ${{ github.event.inputs.IS_PATCH }} diff --git a/docs/accessibility/App V3 - Accessibility Checklist 2.2 AA - Detailed Analysis.csv b/docs/accessibility/App V3 - Accessibility Checklist 2.2 AA - Detailed Analysis.csv new file mode 100644 index 000000000..0a1f18b4d --- /dev/null +++ b/docs/accessibility/App V3 - Accessibility Checklist 2.2 AA - Detailed Analysis.csv @@ -0,0 +1,130 @@ +#,Title,Description,Level,Compliant,Date Reviewed,Reviewed By,Comments,Jira Ticket, +Provide text alternatives for non-text content (e.g. images),,,,,,,,, +1.1.1,1.1.1 Non-text Content (Level A),Provide text alternatives for non-text content (e.g. images),Level A,Supports,1/4/2024,Wes,Content author must provide alternatives,AV2-1219, +Provide alternatives for time-based media (audio and video),,,,,,,,, +1.2.1,1.2.1 Audio-only and Video-only (Prerecorded) (Level A),Provide alternatives for pre-recorded audio-only or video-only content,Level A,Supports,1/4/2024,Wes,Content author must provide alternatives,, +1.2.2,1.2.2 Captions (Prerecorded) (Level A),Provide captions for pre-recorded audio,Level A,Supports,1/4/2024,Wes,Content author must use a video / audio hosting provider that supports captions,, +1.2.3,1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A),Provide alternatives for pre-recorded synchronized audio/video,Level A,Supports,1/4/2024,Wes,Content author must provide alternatives,, +1.2.4,1.2.4 Captions (Live) (Level AA),Provide captions for live audio in synchronized audio/video,Level AA,Not Applicable,1/4/2024,Wes,The platform does not support live audio / video,, +1.2.5,1.2.5 Audio Description (Prerecorded) (Level AA),Provide an audio description of pre-recorded video,Level AA,Supports,1/4/2024,Wes,Content author must use a video / audio hosting provider that supports descriptions,, +1.2.6,1.2.6 Sign Language (Prerecorded) (Level AAA),Provide sign language interpretation of pre-recorded audio in synchronized audio/video,Level AAA,Supports,1/4/2024,Wes,Content author must use a video / audio hosting provider that supports sign language interpretation or incorporate into media directly,, +1.2.7,1.2.7 Extended Audio Description (Prerecorded) (Level AAA),Provide extended audio descriptions of pre-recorded video in synchronized audio/video,Level AAA,Supports,1/4/2024,Wes,Content author must use a video / audio hosting provider that supports captions,, +1.2.8,1.2.8 Media Alternative (Prerecorded) (Level AAA),Provide text alternatives for both audio and video in synchronized audio/video,Level AAA,Supports,1/4/2024,Wes,Content author must provide text alternatives,, +1.2.9,1.2.9 Audio-only (Live) (Level AAA),Provide a text alternative for live audio in audio-only content,Level AAA,Not Applicable,1/4/2024,Wes,The platform does not support live audio,, +Content can be presented in different ways (e.g. through a screen reader) without losing info or structure,,,,,,,,, +1.3.1,1.3.1 Info and Relationships (Level A),"Information, structure, and relationships can be programmatically determined",Level A,Partially Supports,1/5/2024,Paul MW,Minor issues with heading levels found by only 1 acessibility checker - marking as partially supports until resolved,"CORE-6313, CORE-6315", +1.3.2,1.3.2 Meaningful Sequence (Level A),The correct reading sequence can be programmatically determined,Level A,Supports,1/5/2024,Paul MW,,, +1.3.3,1.3.3 Sensory Characteristics (Level A),"Do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound",Level A,Supports,1/5/2024,Paul MW,,, +1.3.4,1.3.4 Orientation (Level AA 2.1 and 2.2),"Content can be presented in both portrait and landscape orientations, without losing functionality or meaning.",Level AA,Supports,1/5/2024,Paul MW,,, +1.3.5,1.3.5 Identify Input Purpose (Level AA 2.1 and 2.2),"For text input elements, the autocomplete attribute should be in place to let the user know what kind of data is expected to be entered.",Level AA,Supports,1/5/2024,Paul MW,,,New Updated criteria for 2.1 +1.3.6,1.3.6 Identify Purpose (Level AAA 2.1 and 2.2),"The type and purpose of User Interface components, icons, and regions should be identified.",Level AAA,Not Evaluated,,,,, +Make sure content is readable and the foreground contrasts sufficiently with the background,,,,,,,,, +1.4.1,1.4.1 Use of Color (Level A),Color is not used as the only visual means of conveying info,Level A,Supports,1/4/2024,Wes,,, +1.4.2,1.4.2 Audio Control (Level A),"Audio can be paused and stopped, or the audio volume can be changed",Level A,Supports,1/5/2024,Paul MW,,, +1.4.3,1.4.3 Contrast (Minimum) (Level AA),Text has enough contrast with the background (contrast ratio 4:5:1 for small text and 3:1 for large text),Level AA,Supports,1/4/2024,Wes,depend on customer chosen color - authoring system will warn if contrast ratio exceeds standards. PMW - note discrepancies found in JIRA tickets opposite.,"CORE-6313, CORE-6314, CORE-6315", +1.4.4,1.4.4 Resize text (Level AA),Text can be enlarged up to 200% without the use of assistive technology (screen magnifiers),Level AA,Supports,1/5/2024,Paul MW,,, +1.4.5,1.4.5 Images of Text (Level AA),"Text is used rather than images of text, except where the presentation of text is essential, such as in logos",Level AA,Supports,1/4/2024,Wes,Content author must adhere to standard,, +1.4.6,1.4.6 Contrast (Enhanced) (Level AAA),Enhanced contrast: Text has enough contrast with the background (contrast ratio 7:1 for small text and 4:5:1 for large text),Level AAA,Supports,1/4/2024,Wes,depend on customer chosen color - authoring system will warn if contrast ratio exceeds standards,, +1.4.7,1.4.7 Low or No Background Audio (Level AAA),"Low or no background audio, or background audio can be turned off",Level AAA,Supports,1/5/2024,Paul MW,,, +1.4.8,1.4.8 Visual Presentation (Level AAA),"Various visual presentation enhancements including selectable colors, no justified text",Level AAA,Partially Supports,1/4/2024,Wes,Available via Accessibe overlay solution,, +1.4.9,1.4.9 Images of Text (No Exception) (Level AAA),"Images of text are used only for decoration or where the presentation of text is essential, such as in logos",Level AAA,Supports,1/4/2024,Wes,Content author must adhere to standard,, +1.4.10,1.4.10 Reflow (Level AA 2.1 and 2.2),Content should be presented without loss of information or functionality when users adjust the viewport size.,Level AA,Supports,1/5/2024,Paul MW,,, +1.4.11,1.4.11 Non-text Contrast (Level AA 2.1 and 2.2),"The contrast between user interface components and their background can be at least 3:1 for graphics that are essential for understanding the content, except for large text.",Level AA,Supports,1/4/2024,Wes,Content author must adhere to standard,, +1.4.12,1.4.12 Text Spacing (Level AA 2.1 and 2.2),"In content that can be zoomed up to 200% without losing content or functionality, the spacing of text can be adjusted, and the user can read the text without requiring assistive technology.",Level AA,Supports,1/5/2024,Paul MW,,CORE-6033, +1.4.13,1.4.13 Content on Hover or Focus (Level AA 2.1 and 2.2),"When any content is displayed on hover or focus, the content can be dismissed by the user without moving the pointer, and it doesn’t block additional content from being displayed.",Level AA,Not Applicable,1/4/2024,Wes,We don't display content this way,, +Make all functionality available from a keyboard,,,,,,,,, +2.1.1,2.1.1 Keyboard (Level A),"All functionality is available from a keyboard, except for tasks such as drawing",Level A,Supports,1/5/2024,Paul MW,,"AV2-1188 AV2-1189 AV2-1190 +AV2-1191 AV2-1197 AV2-1198 +AV2-1199 AV2-1202", +2.1.2,2.1.2 No Keyboard Trap (Level A),The user can use the keyboard to move through page elements and is not trapped on a particular element,Level A,Supports,1/5/2024,Paul MW,,, +2.1.3,2.1.3 Keyboard (No Exception) (Level AAA),All functionality is available from a keyboard,Level AAA,Not Evaluated,,,,, +2.1.4,2.1.4 Character Key Shortcuts (Level A 2.1 and 2.2),"Keyboard shortcuts using only letter, punctuation, number, or symbol characters can be remapped or turned off to avoid conflicts with user agent functionality.",Level A,Supports,1/5/2024,Paul MW,We don't have single key shortcuts,, +Give users enough time to read and use content,,,,,,,,, +2.2.1,2.2.1 Timing Adjustable (Level A),Users are warned of time limits shorter than 20 hours and time limits can be turned off or extended,Level A,Supports,1/5/2024,Paul MW,We don't have time based UI elements,, +2.2.2,"2.2.2 Pause, Stop, Hide (Level A)","Users can stop, pause or hide moving, blinking, scrolling or auto-updating information",Level A,Supports,1/5/2024,Paul MW,,, +2.2.3,2.2.3 No Timing (Level AAA),"Time is not an essential part of any event or activity, except for real-time events and non-interactive synchronized audio/video",Level AAA,Supports,1/5/2024,Paul MW,,, +2.2.4,2.2.4 Interruptions (Level AAA),"Interruptions can be postponed or suppressed by the user, except those involving an emergency",Level AAA,Not Evaluated,,,,, +2.2.5,2.2.5 Re-authenticating (Level AAA),"When an authenticated session expires and the user has to re-authenticate, the user can continue without loss of data",Level AAA,Not Evaluated,,,,, +2.2.6,2.2.6 Timeouts (Level AAA 2.1 and 2.2),"Users are warned of any loss of data that could occur if the user is inactive, unless that data is preserved for more than 20 hours.",Level AAA,Not Evaluated,,,,, +2.2.6,,"If an authenticated session has a timeout, the user is warned with the time remaining and given the option to extend the session.",Level AAA,Not Evaluated,,,,, +Do not use content that can cause seizures,,,,,,,,, +2.3.1,2.3.1 Three Flashes or Below Threshold (Level A),"No more than three flashes in a 1- second period, or the flashes are below the defined thresholds",Level A,Supports,1/5/2024,Paul MW,,, +2.3.2,2.3.2 Three Flashes (Level AAA),No more than three flashes in a 1- second period,Level AAA,Supports,1/5/2024,Paul MW,,, +2.3.3,2.3.3 Animation from Interactions (Level AAA 2.1 and 2.2),"Motion animation instigated by user interaction be disabled, unless the animation is essential to the functionality or information being conveyed.",Level AAA,Not Evaluated,,,,, +"Help users to navigate, find content, and determine where they are",,,,,,,,, +2.4.1,2.4.1 Bypass Blocks (Level A),"Users can bypass blocks of content that are repeated on multiple Web pages, such as navigation menus",Level A,Partially Supports,1/5/2024,Paul MW,Minor issues with heading levels found by only 1 acessibility checker - marking as partially supports until resolved,"AV2-1220, CORE-6312, CORE-6313, CORE-6315", +2.4.2,2.4.2 Page Titled (Level A),The page has a title describing its topic or purpose,Level A,Partially Supports,1/1/2024,Wes,,, +2.4.3,2.4.3 Focus Order (Level A),Users can tab through the elements of a page in a logical order,Level A,Supports,1/5/2024,Paul MW,,, +2.4.4,2.4.4 Link Purpose (In Context) (Level A),The purpose of each link can be determined from the link text or context,Level A,Supports,1/5/2024,Paul MW,,, +2.4.5,2.4.5 Multiple Ways (Level AA),"More than one way is available to navigate to other Web pages, such as a sitemap",Level AA,Supports,1/5/2024,Paul MW,,, +2.4.6,2.4.6 Headings and Labels (Level AA),"The headings and labels are clear and consistent, accurately describing the topic or purpose",Level AA,Supports,1/5/2024,Paul MW,,, +2.4.7,2.4.7 Focus Visible (Level AA),The page element with the current keyboard focus has a visible focus indicator,Level AA,Supports,1/5/2024,Paul MW,,, +2.4.8,2.4.8 Location (Level AAA),"Show the user's location within a set of Web pages, for instance by using a breadcrumb",Level AAA,Not Evaluated,,,,, +2.4.9,2.4.9 Link Purpose (Link Only) (Level AAA),The purpose of each link can be determined from the link text alone,Level AAA,Not Evaluated,,,,, +2.4.10,2.4.10 Section Headings (Level AAA),Section headings are used to organize the content,Level AAA,Not Evaluated,,,,, +2.4.11,2.4.11 Focus Not Obscured (Minimum) (Level AA 2.2 only),"Ensure when an item gets keyboard focus, it is at least partially visible.",Level AA,Supports,1/23/2024,Wes,Focused elements are not obscured,, +,2.4.12 Focus Not Obscured (Enhanced) (Level AAA 2.2 only),,Level AAA,,,,,, +,2.4.13 Focus Appearance (Level AAA 2.2 only),,Level AAA,,,,,, +Make it easier for users to operate functionality through various inputs beyond keyboard,,,,,,,,, +2.5.1,2.5.1 Pointer Gestures (Level A 2.1 and 2.2),"All operations must use simple gestures that need only a single touch or click. If more complex operations exist, a single touch or click alternative must be given.",Level A,Supports,1/5/2024,Paul MW,We can have issues with embed content from H5 for example.,, +2.5.2,2.5.2 Pointer Cancellation (Level A 2.1 and 2.2),"Allow users to recover from accidental or erroneous pointer input (touch screen taps, mouse clicks)",Level A,Supports,1/5/2024,Paul MW,,, +2.5.3,2.5.3 Label in Name (Level A 2.1 and 2.2),"For user interface components with visible text, ensure that the accessible name includes the visible text.",Level A,Supports,1/5/2024,Paul MW,,AV2-1221, +2.5.4,2.5.4 Motion Actuation (Level A 2.1 and 2.2),"Motion input (shaking, orientation change, tilting, etc.) must be accompanied by another means of input (such as a button)",Level A,Supports,1/5/2024,Paul MW,,, +2.5.5,2.5.5 Target Size (Enhanced) Level AAA(Added in 2.1),,Level AAA,,,,,, +2.5.6,2.5.6 Concurrent Input Mechanisms Level AAA(Added in 2.1),,Level AAA,,,,,, +2.5.7,2.5.7 Dragging Movements (AA),"For any action that involves dragging, provide a simple pointer alternative.",Level AA,Supports,1/23/2024,Wes,The app does not use dragging. The only part that can use dragging is file upload and there are click alternatives (actually dragging is the alternative to the primary click UI),, +2.5.8,2.5.8 Target Size (Minimum) (AA),Ensure targets meet a minimum size or have sufficient spacing around them.,Level AA,Supports,1/23/2024,Wes,The clickable elements in the app are all larger than 24 pixels,, +2.5.5,2.5.5 Target Size (Level AAA 2.1 and 2.2),"The size of the target area for pointer inputs can be at least 44 by 44 CSS pixels, except for situations where accuracy is essential.",Level AAA,Not Evaluated,,,,, +2.5.6,2.5.6 Concurrent Input Mechanisms (Level AAA 2.1 and 2.2),"Functions that can be operated by device motion or user motion can also be operated by user interface components and keypresses, except where the motion is essential for the function.",Level AAA,Supports,1/5/2024,Paul MW,we do not have this feature,, +2.5.7,2.5.7 Dragging Movements (Level AA 2.2 only),"The size of the target for pointer inputs (mouse, touchscreen) is at least 44 by 44 pixels",Level AAA,Not Evaluated,,,,, +2.5.8,2.5.8 Target Size (Minimum) (Level AA 2.2 only),"Web content does not restrict use of different input types (keyboard, mouse, touch screen, speech input, etc.) except where the restriction is essential",Level AAA,Not Evaluated,,,,, +Text should be readable and understandable,,,,,,,,, +3.1.1,3.1.1 Language of Page (Level A),Specify the language (e.g. English) of the Web page,Level A,Partially Supports,1/4/2024,Wes,"As a web app, it supports translation built into the browser. There is also direct support for UI element translation into several languages.",, +3.1.2,3.1.2 Language of Parts (Level AA),Specify the language (e.g. English) of each text phrase or passage that is in a language other than the default language specified for the entire Web page,Level AA,Partially Supports,1/4/2024,Wes,"As a web app, it supports translation built into the browser",, +3.1.3,3.2.3 Consistent Navigation (Level AA),"Provide definitions of idioms, jargon, and unusual terms and phrases",Level AAA,Supports,1/4/2024,Wes,Content author must adhere to standard,, +3.1.4,3.2.4 Consistent Identification (Level AA),Provide the expanded form of abbreviations,Level AAA,Supports,1/4/2024,Wes,Content author must adhere to standard,, +3.1.5,3.1.5 Reading Level (Level AAA),Provide a simplified version of text that requires an advanced level of understanding,Level AAA,Supports,1/4/2024,Wes,Content author must adhere to standard,, +3.1.6,3.1.6 Pronunciation (Level AAA),Provide the pronunciation of words where the meaning is unclear without knowing the correct pronunciation,Level AAA,Supports,1/4/2024,Wes,Content author must adhere to standard,, +Make Web pages appear and operate in predictable ways,,,,,,,,, +3.2.1,3.2.1 On Focus (Level A),"When a UI component receives focus, this does not trigger unexpected actions such as automatically submitting a form, opening a new window or switching focus to another element",Level A,Supports,1/5/2024,Paul MW,,, +3.2.2,3.2.2 On Input (Level A),"Changing the setting of a checkbox, radio button or other UI component does not trigger unexpected changes in context, such as causing significant changes to the page content or opening a new window",Level A,Partially Supports,1/5/2024,Paul MW,Errors found on AppV3,CORE-6313, +3.2.3,3.2.3 Consistent Navigation (Level AA),Navigation menus are in the same location and order on every Web page,Level AA,Supports,1/5/2024,Paul MW,,, +3.2.4,3.2.4 Consistent Identification (Level AA),UI components used across the Web site are identified consistently on every page,Level AA,Supports,1/5/2024,Paul MW,,, +3.2.5,3.2.5 Change on Request (Level AAA),"All unexpected changes in context, such as causing significant changes to the page content or opening a new window, are triggered by the user, or such unexpected changes in context can be turned off by the user",Level AAA,Not Evaluated,,,,, +3.2.6,3.2.6 Consistent Help (Level A 2.2 only),Consistent identification of components that have the same functionality across different Web pages can be programmatically determined.,Level AA,Supports,1/5/2024,Paul MW,,, +Help users to avoid and correct mistakes,,,,,,,,, +3.3.1,3.3.1 Error Identification (Level A),Input errors are clearly marked and described to the user,Level A,Supports,1/5/2024,Paul MW,,, +3.3.2,3.3.2 Labels or Instructions (Level A),Items requiring user input are clearly labeled or have clear instructions,Level A,Supports,1/5/2024,Paul MW,,, +3.3.3,3.3.3 Error Suggestion (Level AA),"When the user makes an input error, give suggestions for valid input",Level AA,Supports,1/5/2024,Paul MW,,, +3.3.4,"3.3.4 Error Prevention (Legal, Financial, Data) (Level AA)","For Web pages causes legal or financial commitments, input can be reviewed and corrected before final submission, and submissions can be reverted",Level AA,Not Applicable,1/4/2024,Wes,This platform is not intended for legal or financial commitments use,, +3.3.5,3.3.5 Help (Level AAA),Provide context-sensitive help,Level AAA,Not Evaluated,1/4/2024,Wes,,, +3.3.6,3.3.6 Error Prevention (All) (Level AAA),"Input can be reviewed and corrected before final submission, and submissions can be be reverted",Level AAA,Partially Supports,1/4/2024,Wes,Some submissions cannot easily be reverted by design,, +3.3.7,3.3.7 Redundant Entry (Level A 2.2 only),"Users can authenticate themselves in ways that are accessible to a variety of disabilities, such as providing alternatives to visual input or speech recognition.",Level A,Supports,1/4/2024,Wes,Login and authentication can be accomplished via LTI or magic link sent via email,, +3.3.8,3.3.8 Accessible Authentication (Minimum) (Level AA 2.2 only),"A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following: + +Alternative +Another authentication method that does not rely on a cognitive function test. +Mechanism +A mechanism is available to assist the user in completing the cognitive function test. +Object Recognition +The cognitive function test is to recognize objects. +Personal Content +The cognitive function test is to identify non-text content the user provided to the Web site.",Level AA,Supports,1/4/2024,Wes,Login and authentication can be accomplished via LTI or magic link sent via email,, +3.3.9,3.3.9 Accessible Authentication (Enhanced) (Level AAA 2.2 only),"A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following: + +Alternative +Another authentication method that does not rely on a cognitive function test. +Mechanism +A mechanism is available to assist the user in completing the cognitive function test.",Level AAA,Supports,1/4/2024,Wes,Login and authentication can be accomplished via LTI or magic link sent via email,, +Maximize compatibility with assistive technologies (such as screen readers) and future browsers,,,,,,,,, +4.1.1,"4.1.1 Parsing (Level A) + WCAG 2.0 and 2.1 – Always answer ‘Supports’ + WCAG 2.2 (obsolete and removed) - Does not apply","Use valid, error-free HTML, including unique (non-duplicate) element IDs",Level A,Partially Supports,1/5/2024,Paul MW,"Minor errors found, does not affect usage but getting resolved, marked as partially supports until then","CORE-6312, CORE-6314, CORE-6315", +4.1.2,"4.1.2 Name, Role, Value (Level A)","For all UI components, the name, value and role can be programmatically determined",Level A,Partially Supports,1/5/2024,Paul MW,"Minor errors found, does not affect usage but getting resolved, marked as partially supports until then",CORE-6314, +4.1.3,4.1.3 Status Messages (Level AA 2.1 and 2.2),Status Messages must be available to AT such as screen readers. This does not include context changes (e.g. alert or dialogs),Level AA,Supports,1/5/2024,Paul MW,,, +4.1.3,,"Status messages conveyed through programmatically determined roles, states, or properties can be programmatically determined.",Level AA,Supports,1/5/2024,Paul MW,,, +4.1.4,,"Content can be resized up to 400% without loss of content or functionality, except for images of text, which can be resized up to 200%.",Level AA,Supports,1/4/2024,Wes,,CORE-6033, +4.1.5,,"If the purpose of an image is to convey text, the text is also provided in the content or is programmatically determined.",Level AA,Supports,1/5/2024,Wes,,, +4.1.6,,"Text can be resized up to 200% without requiring the user to scroll horizontally, and without using assistive technology.",Level AA,Supports,1/6/2024,Wes,,CORE-6033, +4.1.7,,"Content that appears on hover or focus can be dismissed by the user without causing any additional content to appear or disappear, and without requiring the user to move the pointer.",Level AAA,Supports,1/7/2024,Wes,,, +4.1.8,,The content is presented in different viewports without losing information or functionality.,Level AA,Supports,1/8/2024,Wes,,, \ No newline at end of file diff --git a/docs/accessibility/CRITICAL_FIX_Nov2025.md b/docs/accessibility/CRITICAL_FIX_Nov2025.md new file mode 100644 index 000000000..a3444bacb --- /dev/null +++ b/docs/accessibility/CRITICAL_FIX_Nov2025.md @@ -0,0 +1,132 @@ +# Critical Navigation Fix - November 4, 2025 + +## Issue Summary + +Two critical issues were discovered during staging verification: + +### 1. Side Navigation Labels Breaking UI +**Problem:** `ion-label` elements inside navigation links were visible and breaking the layout, appearing as text overlays on the page. + +**Root Cause:** The navigation links were refactored to use semantic `` tags with `aria-label` attributes, but the `ion-label` elements inside them were still visible, causing duplicate visual text and layout issues. + +**Impact:** +- Visual layout broken with text appearing in wrong places +- Confusing user experience +- Navigation appeared broken + +### 2. Navigation Clicks Not Working +**Problem:** Users reported being unable to click navigation links to access Reviews, Messages, Due Dates, etc. + +**Root Cause:** The visible `ion-label` elements were intercepting pointer events, even though `pointer-events: none` was set on all child elements. The `ion-label` component has its own internal styling that was overriding this. + +**Impact:** +- Navigation appeared completely broken +- Users couldn't access key features + +--- + +## Solution + +### CSS Changes (`v3.page.scss`) + +**Initial Approach (Had Issues):** +- Tried screen-reader-only pattern (position: absolute, 1px width/height) +- **Problem 1:** Labels still took up space in flex layout causing excessive left padding +- **Problem 2:** `pointer-events: none` on all children prevented link clicks + +**Final Solution:** +Use `display: none` on `ion-label` elements since `aria-label` on the parent link/button provides the accessible name: + +```scss +// Menu link styling for accessibility +a.menu-link { + display: flex; + align-items: center; + width: 100%; + padding: 10px 20px; + text-decoration: none; + color: inherit; + cursor: pointer; + + &:focus { + outline: 2px solid var(--ion-color-primary); + outline-offset: -2px; + } + + &:focus-visible { + outline: 2px solid var(--ion-color-primary); + outline-offset: -2px; + } + + // Hide ion-label - display: none is OK because aria-label provides accessible name + ion-label { + display: none; + } +} + +// For menu items without a.menu-link (like Settings) +&:not(:has(a.menu-link)) { + ion-label { + display: none; + } +} +``` + +### HTML Changes (`v3.page.html`) + +Added `aria-label` to Settings button: + +```html + + + {{i18nText.setting}} + + +``` + +--- + +## Why This Approach? + +1. **Accessible Name Provided by aria-label:** Each navigation link has an `aria-label` attribute that provides the accessible name for screen readers. The `ion-label` element is redundant. + +2. **display: none is Appropriate:** Since the `aria-label` on the parent `` or ` diff --git a/projects/v3/src/app/components/team-member-selector/team-member-selector.component.html b/projects/v3/src/app/components/team-member-selector/team-member-selector.component.html index d01af9047..5513fe57f 100644 --- a/projects/v3/src/app/components/team-member-selector/team-member-selector.component.html +++ b/projects/v3/src/app/components/team-member-selector/team-member-selector.component.html @@ -17,7 +17,7 @@

+

+ [value]="display" + role="tablist" + aria-label="Content navigation tabs" i18n-aria-label> + mode="ios" + role="tab" + [attr.aria-selected]="display === 'activities'" + [attr.aria-controls]="'activities-panel'"> Activities + mode="ios" + role="tab" + [attr.aria-selected]="display === 'badges'" + [attr.aria-controls]="'badges-panel'"> { getIsPointsConfigured, select, true {Badges & Points} false {Badges} } + role="tab" + *ngIf="pulseCheckIndicatorEnabled === true" + [attr.aria-selected]="display === 'pulse-checks'" + [attr.aria-controls]="'pulse-checks-panel'"> Skill & Progress Surveys - +
+ +
- +
+ +
- +
+ +
@@ -110,7 +127,9 @@ + style="width: 50px; display: inline;" + role="status" + aria-label="Loading" i18n-aria-label> @@ -125,13 +144,18 @@ [ngClass]="{'locked': milestone.isLocked}" lines="none" (click)="showGuideline(milestone)" + (keydown.enter)="showGuideline(milestone)" + (keydown.space)="showGuideline(milestone); $event.preventDefault()" + tabindex="0" + role="button" + [attr.aria-label]="milestone.name + (milestone.isLocked ? ' (locked)' : '')" aria-describedby="milestone-description">
+ aria-hidden="true"> + role="button" + [attr.aria-label]="activity.name + (lastVisitedActivityId === activity.id ? ' (last visited)' : '') + (bookmarkedActivities[activity.id] ? ' (bookmarked)' : '')"> @@ -169,25 +195,28 @@

Badges awarded

-

+ class="ion-text-center no-achievement" + role="status" + aria-live="polite"> +

No badges status

+ aria-hidden="true" + role="img">

You have no badges yet!

Experience badge will show up here.
+ class="total-points" + role="status"> Total Points Earned: {{getEarnedPoints}} @@ -202,24 +231,31 @@ lines="full" (click)="achievePopup(achievement)" [leadImageClass]="!achievement.isEarned ? 'black-white-image' : ''" - (keydown)="achievePopup(achievement, $event)" + (keydown.enter)="achievePopup(achievement, $event)" + (keydown.space)="achievePopup(achievement, $event); $event.preventDefault()" [endingIcon]="achievement.isEarned ? 'checkmark-circle' : 'lock-closed'" [endingIconColor]="achievement.isEarned ? 'success' : 'medium'" tabindex="0" + role="button" + [attr.aria-label]="achievement.name + (achievement.isEarned ? ' (earned)' : ' (locked)') + (achievement.points ? ', ' + achievement.points + ' points' : '')" i18n-subtitle1> + class="ion-text-center" + role="status" + aria-live="polite">

No activities available at the moment.

+ size="small" + aria-label="Retry loading activities" i18n-aria-label> + slot="start" + aria-hidden="true"> Retry @@ -229,17 +265,22 @@

Pulse checks and skills

-
+
-

On Track

+

On Track

+ (click)="onTrackInfo()" + (keydown.enter)="onTrackInfo()" + (keydown.space)="onTrackInfo(); $event.preventDefault()" + tabindex="0" + role="button" + aria-label="Show on track information" i18n-aria-label>
- Track your progress across key areas + Track your progress across key areas
@@ -252,13 +293,18 @@

On Track

-
+
-

Skill Strength

+

Skill Strength

+ (click)="showGlobalSkillsInfo()" + (keydown.enter)="showGlobalSkillsInfo()" + (keydown.space)="showGlobalSkillsInfo(); $event.preventDefault()" + tabindex="0" + role="button" + aria-label="Show skill strength information" i18n-aria-label>
@@ -316,38 +362,40 @@

Skill Strength

- - - - - - - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + +
diff --git a/projects/v3/src/app/pages/notifications/notifications.page.ts b/projects/v3/src/app/pages/notifications/notifications.page.ts index 8e48acddf..0eb43d9d6 100644 --- a/projects/v3/src/app/pages/notifications/notifications.page.ts +++ b/projects/v3/src/app/pages/notifications/notifications.page.ts @@ -45,6 +45,7 @@ export class NotificationsPage implements OnInit, OnDestroy { } ngOnInit() { + this.utils.setPageTitle('Notifications - Practera'); this.subscriptions.push(this.homeService.milestones$.subscribe(async milestones => { if (milestones === null) { this.homeService.getMilestones(); diff --git a/projects/v3/src/app/pages/page-not-found/page-not-found.page.ts b/projects/v3/src/app/pages/page-not-found/page-not-found.page.ts index 6a95577d1..1d9d2386d 100644 --- a/projects/v3/src/app/pages/page-not-found/page-not-found.page.ts +++ b/projects/v3/src/app/pages/page-not-found/page-not-found.page.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { BrowserStorageService } from '../../services/storage.service'; +import { UtilsService } from '@v3/services/utils.service'; import { Router } from '@angular/router'; @Component({ @@ -10,10 +11,12 @@ import { Router } from '@angular/router'; export class PageNotFoundPage { constructor( private storageService: BrowserStorageService, - private route: Router + private route: Router, + private utils: UtilsService ) {} ionViewDidEnter() { + this.utils.setPageTitle('Page Not Found - Practera'); this.storageService.lastVisited('url', null); } diff --git a/projects/v3/src/app/pages/review-desktop/review-desktop.page.ts b/projects/v3/src/app/pages/review-desktop/review-desktop.page.ts index 649baa188..d7565f0d7 100644 --- a/projects/v3/src/app/pages/review-desktop/review-desktop.page.ts +++ b/projects/v3/src/app/pages/review-desktop/review-desktop.page.ts @@ -35,6 +35,7 @@ export class ReviewDesktopPage implements OnInit { ) { } ngOnInit(): void { + this.utils.setPageTitle('Reviews - Practera'); this.assessmentService.assessment$.subscribe(res => this.assessment = res); this.assessmentService.submission$.subscribe(res => this.submission = res); this.assessmentService.review$.subscribe(res => this.review = res); diff --git a/projects/v3/src/app/pages/review-mobile/review-mobile.page.ts b/projects/v3/src/app/pages/review-mobile/review-mobile.page.ts index f39367c94..4dfbf1504 100644 --- a/projects/v3/src/app/pages/review-mobile/review-mobile.page.ts +++ b/projects/v3/src/app/pages/review-mobile/review-mobile.page.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { Review, ReviewService } from '@v3/app/services/review.service'; +import { UtilsService } from '@v3/services/utils.service'; @Component({ selector: 'app-review-mobile', @@ -13,9 +14,11 @@ export class ReviewMobilePage implements OnInit { private route: ActivatedRoute, private router: Router, private reviewService: ReviewService, + private utils: UtilsService, ) { } ngOnInit(): void { + this.utils.setPageTitle('Reviews - Practera'); this.reviewService.reviews$.subscribe(res => this.reviews = res); this.route.queryParams.subscribe(_params => { this.reviewService.getReviews(); diff --git a/projects/v3/src/app/pages/settings/settings.page.ts b/projects/v3/src/app/pages/settings/settings.page.ts index 6f10a4c47..cb506f674 100644 --- a/projects/v3/src/app/pages/settings/settings.page.ts +++ b/projects/v3/src/app/pages/settings/settings.page.ts @@ -97,6 +97,7 @@ export class SettingsPage implements OnInit, OnDestroy { } ngOnInit() { + this.utils.setPageTitle('Settings - Practera'); this._retrieveUserInfo(); this.utils.getEvent('support-email-checked') .pipe(takeUntil(this.unsubscribe$)) diff --git a/projects/v3/src/app/pages/tabs/tabs.page.html b/projects/v3/src/app/pages/tabs/tabs.page.html index 23929c196..69f5b624a 100644 --- a/projects/v3/src/app/pages/tabs/tabs.page.html +++ b/projects/v3/src/app/pages/tabs/tabs.page.html @@ -1,35 +1,47 @@ - + [ngClass]="{'selected': selectedTab === 'home'}" + (keydown)="keyboardNavigateTab('home', $event)" + aria-label="Home" i18n-aria-label> + - + [ngClass]="{'selected': selectedTab === 'events'}" *ngIf="showEvents" + (keydown)="keyboardNavigateTab('events', $event)" + aria-label="Events" i18n-aria-label> + - - {{ badges.review }} + [ngClass]="{'selected': selectedTab === 'reviews'}" *ngIf="reviews && reviews.length" + (keydown)="keyboardNavigateTab('reviews', $event)" + [attr.aria-label]="'Reviews' + (badges.review > 0 ? ', ' + badges.review + ' unread' : '')" i18n-aria-label> + + - - {{ badges.chat }} + [ngClass]="{'selected': selectedTab === 'messages'}" + (keydown)="keyboardNavigateTab('messages', $event)" + [attr.aria-label]="'Messages' + (badges.chat > 0 ? ', ' + badges.chat + ' unread' : '')" i18n-aria-label> + + - + [ngClass]="{'selected': selectedTab === 'dueStatus'}" + (keydown)="keyboardNavigateTab('due-dates', $event)" + aria-label="Due Status" i18n-aria-label> + - + [ngClass]="{'selected': selectedTab === 'settings'}" + (keydown)="keyboardNavigateTab('settings', $event)" + aria-label="Settings" i18n-aria-label> + diff --git a/projects/v3/src/app/pages/tabs/tabs.page.scss b/projects/v3/src/app/pages/tabs/tabs.page.scss index f35f3735a..81293f652 100644 --- a/projects/v3/src/app/pages/tabs/tabs.page.scss +++ b/projects/v3/src/app/pages/tabs/tabs.page.scss @@ -1,12 +1,39 @@ .tab-item { - --color-selected: var(--ion-color-primary) !important; - --color: var(--ion-color-primary); + // Use darker color for icons to meet WCAG 1.4.11 Non-text Contrast (3:1 minimum) + // color-mix creates darker shade: 50% primary + 50% dark green for better contrast + --tab-icon-color: color-mix(in srgb, var(--ion-color-primary) 50%, #1a4d2a); + + // Fallback for browsers without color-mix support + @supports not (color-mix(in srgb, white, black)) { + --tab-icon-color: var(--ion-color-primary-shade, #2a6d3f); + } + + --color-selected: var(--tab-icon-color) !important; + --color: var(--tab-icon-color); margin: 0 10px 0 10px; + &.selected { border-bottom: 3px solid; - border-bottom-color: var(--ion-color-primary); + border-bottom-color: var(--tab-icon-color); } + ion-icon { font-size: 28px; + // Apply WCAG-compliant darker color to icons + color: var(--tab-icon-color); + // Ensure icons don't intercept pointer events + pointer-events: none; + } + + // Ensure badges don't intercept pointer events + ion-badge { + pointer-events: none; + } + + // Ensure proper focus visibility for keyboard navigation + &:focus-visible { + outline: 2px solid var(--tab-icon-color); + outline-offset: 2px; + border-radius: 4px; } } diff --git a/projects/v3/src/app/pages/tabs/tabs.page.ts b/projects/v3/src/app/pages/tabs/tabs.page.ts index e4e9fff7f..1200a7437 100644 --- a/projects/v3/src/app/pages/tabs/tabs.page.ts +++ b/projects/v3/src/app/pages/tabs/tabs.page.ts @@ -1,6 +1,6 @@ import { Component, HostListener, isDevMode, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { IonTabs } from '@ionic/angular'; -import { ActivatedRoute } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { Review, ReviewService } from '@v3/services/review.service'; import { BrowserStorageService } from '@v3/services/storage.service'; import { ChatService } from '@v3/services/chat.service'; @@ -39,6 +39,7 @@ export class TabsPage implements OnInit, OnDestroy { private notificationsService: NotificationsService, private route: ActivatedRoute, private activityService: ActivityService, + private router: Router, ) { } @@ -57,6 +58,7 @@ export class TabsPage implements OnInit, OnDestroy { } ngOnInit() { + this.utils.setPageTitle('Practera'); this.utils.screenStatus$.subscribe((res) => { this.hasLeftSidebar = res.leftSidebarExpanded; }); @@ -127,4 +129,32 @@ export class TabsPage implements OnInit, OnDestroy { setCurrentTab() { this.selectedTab = this.tabs.getSelected(); } + + /** + * Handle keyboard navigation for tab buttons + * Ensures proper keyboard support similar to side menu navigation + */ + keyboardNavigateTab(tabName: string, keyboardEvent: KeyboardEvent): void | Promise { + if (keyboardEvent && (keyboardEvent?.code === 'Space' || keyboardEvent?.code === 'Enter')) { + keyboardEvent.preventDefault(); + // Map tab names to routes + const tabRouteMap: { [key: string]: string } = { + 'home': '/v3/home', + 'events': '/v3/events', + 'reviews': '/v3/review-desktop', + 'messages': '/v3/messages', + 'due-dates': '/v3/due-dates', + 'settings': '/v3/settings' + }; + const route = tabRouteMap[tabName]; + if (route && this.tabs) { + // Use Ionic tabs API to select the tab + this.tabs.select(tabName); + // Also navigate to ensure URL is correct + return this.router.navigateByUrl(route); + } + } else if (keyboardEvent) { + return; + } + } } diff --git a/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.ts b/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.ts index 70ac84a15..a2fe9ac59 100644 --- a/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.ts +++ b/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { ActivityService, Task } from '@v3/app/services/activity.service'; import { TopicService, Topic } from '@v3/app/services/topic.service'; +import { UtilsService } from '@v3/services/utils.service'; import { BehaviorSubject, firstValueFrom } from 'rxjs'; @Component({ @@ -21,11 +22,17 @@ export class TopicMobilePage implements OnInit { private route: ActivatedRoute, private router: Router, private topicService: TopicService, - private activityService: ActivityService + private activityService: ActivityService, + private utils: UtilsService ) { } ngOnInit() { - this.topic$.subscribe(res => this.topic = res); + this.topic$.subscribe(res => { + this.topic = res; + if (res?.title) { + this.utils.setPageTitle(`${res.title} - Practera`); + } + }); this.activityService.currentTask$.subscribe(res => this.currentTask = res); this.route.params.subscribe(params => { this.topicService.getTopic(params.id); diff --git a/projects/v3/src/app/pages/v3/v3.page.html b/projects/v3/src/app/pages/v3/v3.page.html index 18650a713..73b3f99e7 100644 --- a/projects/v3/src/app/pages/v3/v3.page.html +++ b/projects/v3/src/app/pages/v3/v3.page.html @@ -1,5 +1,6 @@ - - + Side menu *ngFor="let p of appPages; let i = index"> -
- - {{p.badges}} - -
+ [title]="p.title" + lines="none"> + +
+ + + +
- - {{p.title}} - + + {{p.title}} + + - - - {{i18nText.setting}} - - + + + +
+ +
+ + {{i18nText.setting}} + + + + - - {{i18nText.myExperience}} + detail="false" + [title]="i18nText.myExperience" + lines="none"> + +
+ +
+ + {{i18nText.myExperience}} + @@ -60,8 +85,10 @@

Side menu

lines="none" detail="false" aria-hidden="true"> - - + + @@ -69,5 +96,5 @@

Side menu

 - + diff --git a/projects/v3/src/app/pages/v3/v3.page.scss b/projects/v3/src/app/pages/v3/v3.page.scss index e3d7353ec..f8019f8f9 100644 --- a/projects/v3/src/app/pages/v3/v3.page.scss +++ b/projects/v3/src/app/pages/v3/v3.page.scss @@ -7,19 +7,20 @@ ion-menu.collapsed { --padding-bottom: 1px; --padding-start: 1px; display: flex; + align-items: center; + justify-content: center; position: relative; margin-right: 10px; .indicator { - position: absolute; display: flex; height: 24px; width: 24px; } .hint { + position: absolute; right: -1.5px; - top: -5px; top: 10px; border-radius: 100%; /* overflow: visible; */ @@ -32,6 +33,20 @@ ion-menu.collapsed { } } + .notification-dot { + position: absolute; + top: -2px; + right: -2px; + width: 8px; + height: 8px; + background-color: var(--ion-color-danger); + border-radius: 50%; + + &.hidden { + display: none; + } + } + &.icon-container.expanded { display: block; } @@ -46,22 +61,32 @@ ion-menu.collapsed { } .badge-wrapper { - margin: 0px 5px 0px 5px; + margin: 0; } .menu-item { - --padding-start: 15px; + --padding-start: 0px; &.selected { - --padding-start: 12px; + --padding-start: 0px; + border-left: 3px solid; + border-left-color: var(--ion-color-primary); } - & > ion-icon { - margin: 5px; + a.menu-link { + justify-content: center; + + ion-label { + display: none; + } + + &.selected { + padding-left: 0; + } } - & > ion-label { - display: none; + ion-icon { + margin: 0; } .item-inner { @@ -91,17 +116,45 @@ ion-menu { border-right-color: var(--practera-grey-25); .badge-wrapper { + display: flex; + align-items: center; + position: relative; + margin-right: 16px; + + ion-icon { + font-size: 24px; + } + .hint { position: absolute; - right: 1.5px; + right: -8px; + top: -8px; /* overflow: visible; */ display: flex; align-items: center; + justify-content: center; + min-width: 18px; + height: 18px; + padding: 0 4px; .icon-inner { height: 36px; } } + + .notification-dot { + position: absolute; + top: -2px; + right: -2px; + width: 8px; + height: 8px; + background-color: var(--ion-color-danger); + border-radius: 50%; + + &.hidden { + display: none; + } + } } &.menu-pane-visible, & > ion-item-divider { @@ -131,18 +184,55 @@ ion-item-divider { } .menu-item { - --padding-start: 20px; + --padding-start: 0px; + --min-height: 48px; + + // Prevent ion-item from intercepting clicks when it contains a menu-link + &:has(a.menu-link) { + pointer-events: none; + + a.menu-link { + pointer-events: auto; + } + } + + // Menu link styling for accessibility + a.menu-link { + display: flex; + align-items: center; + width: 100%; + height: 100%; + min-height: 48px; + padding: 10px 20px; + text-decoration: none; + color: inherit; + cursor: pointer; + + &:focus { + outline: 2px solid var(--ion-color-primary); + outline-offset: -2px; + } + + &:focus-visible { + outline: 2px solid var(--ion-color-primary); + outline-offset: -2px; + } + } ion-icon { - // margin-left: 4px; - margin-right: 20px; color: var(--ion-color-primary); + font-size: 24px; } &.selected { - --padding-start: 17px; + --padding-start: 0px; border-left: 3px solid; border-left-color: var(--ion-color-primary); + + a.menu-link { + padding-left: 17px; + } + ion-icon { color: var(--ion-color-primary); } diff --git a/projects/v3/src/app/personalised-header/personalised-header.component.html b/projects/v3/src/app/personalised-header/personalised-header.component.html index 6d7e118a0..799de5f02 100644 --- a/projects/v3/src/app/personalised-header/personalised-header.component.html +++ b/projects/v3/src/app/personalised-header/personalised-header.component.html @@ -1,32 +1,61 @@ -
+